Question

We are using JQuery UI lib for some interface enhancements which works great. But since we don’t need to support IE6 and other old browsers, there is no need for classes like:

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl

which are added by JQuery UI. Is there any way to tell JQuery UI not to add them? It is no problem to remove style from it, but it doesn’t look good when you have there a lot of empty classes.

Answer 1

This is one possible way to achieve this.

The jquery ui widgets raises a ‘create’ event that is triggered between the execution of the _create() and _init() methods:

this._create();
this._trigger( "create" );
this._init();

This event is raised from the base object Widget so it is available to all the widgets implementing it.

The classes for ‘ui-corner-xxx’ (and others) are typically created in the ‘_create()’ method, so you could bind an event handler to the ‘create’ option of the widgets to remove those classes. Something like:

var classesToRemove = ['ui-corner-all', 'ui-corner-top',
    'ui-corner-bottom', 'ui-corner-right', 'ui-corner-left',
    'ui-corner-tl', 'ui-corner-tr', 'ui-corner-bl', 'ui-corner-br'];

var removeClassesCreateHandler = function(event, ui) {
    var that = this;
    $.each(classesToRemove, function(idx, val) {
        $('.' + val, that).removeClass(val);
    });
};

$("#accordion").accordion({
    create: removeClassesCreateHandler
});

Here is a working example on jsfiddle.

---

About the create event of jQuery UI Widgets

It is important to note that not all jQuery ui widgets actually implements the Widget Factory (thanks to the solution above is possible).

So, even though the documentation page shows a create option, it is not necessarily available.

This the case for the Datepicker for instance. It still relies on pretty old code and does not implement the Widget factory (yet – it is planned to be refactored).