如何从JQuery UI中删除未使用的类

Question

我们正在使用JQuery UI lib进行一些非常有效的界面增强.但由于我们不需要支持IE6和其他旧浏览器,因此不需要像以下类这样的类:

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

这是由JQuery UI添加的.有没有办法告诉JQuery UI不要添加它们？从中删除样式没有问题,但是当你有很多空类时它看起来不太好.

Answer 1

这是实现这一目标的一种可能方式.

jquery ui小部件引发了一个'create'事件,该事件在执行_create()和_init()方法之间触发:

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

此事件从基础对象Widget引发,因此它可用于实现它的所有小部件.

'ui-corner-xxx'(和其他)的类通常在'_create()'方法中创建,因此您可以将事件处理程序绑定到窗口小部件的'create'选项以删除这些类.就像是:

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
});

这是一个关于jsfiddle的工作示例.

关于createjQuery UI Widgets 的事件

值得注意的是,并非所有jQuery ui小部件实际上都实现了Widget Factory(感谢上面的解决方案是可能的).

因此,即使文档页面显示了一个create选项,它也不一定可用.

这就是Datepicker的情况.它仍然依赖于相当旧的代码并且没有实现Widget工厂(但是 - 它计划被重构).