我正在使用jQuery v1.8.3和jQuery UI v1.9.2。我想通过添加和覆盖一些选项和方法来扩展现有的jQuery UI小部件(在我的情况下为Autocomplete小部件),但保留其他功能和官方发行版中的功能相同。如何使这种“适当”(也许是“标准”)方式成为可能?

附注:我在网上搜索了(12,...),发现文档主要与创建新的jQuery UI小部件有关,而与扩展现有的小部件无关。

最佳答案

在jQuery UI 1.9+中,扩展小部件的方式与创建新小部件的方式相同。小部件工厂($.widget())支持以下几种情况:

使用基础窗口小部件($.Widget)作为起点创建新的窗口小部件:
$.widget( "ns.widget", { ... } )
创建一个从现有小部件继承的新小部件:
$.widget( "ns.widget", $.ns.existingWidget, { ... } )
扩展小部件:
$.widget( "ns.widget", $.ns.widget, { ... } )
您会注意到扩展语法和继承语法是相同的。窗口小部件工厂足够聪明,可以注意到您正在创建的窗口小部件和您要从中继承的窗口小部件都是相同的,并且可以适当地对其进行处理。

在继承或扩展窗口小部件时,只需定义要更改或添加的内容。基础窗口小部件上还存在一些新方法,可以更轻松地处理继承和更改上下文的方法。阅读jQuery.Widget documentation以获取方法及其描述的完整列表。如果要扩展小部件,您肯定会想了解_super()

以下是将默认delay选项更改为500并添加新选项prefix并将其添加到所有建议中的示例:

$.widget( "ui.autocomplete", $.ui.autocomplete, {
    options: {
        delay: 500,
        prefix: ""
    },

    _renderItem: function( ul, item ) {
        var label = item.label;
        if ( this.options.prefix ) {
            label = this.options.prefix + " " + label;
        }
        return $( "<li>" )
            .append( $( "<a>" ).text( label ) )
            .appendTo( ul );
    },
});

09-10 11:27
查看更多