如何扩展现有的jQuery UI小部件？

Question

我正在使用jQuery v1.8.3和jQuery UI v1.9.2.我想通过添加和覆盖一些选项和方法来扩展现有的jQuery UI小部件(在我的情况下是自动完成小部件),但保留其他功能,如官方发行版中的那些.我怎样才能使其成为"适当的"(也许是"标准")方式？

---

PS:我搜索在网络上(1,2,...),我发现文件大多涉及到创建一个新的jQuery UI部件而不是扩展现有的一个.

Answer 1

在jQuery UI 1.9+中,扩展窗口小部件的方式与创建新窗口小部件的方式相同.widget factory($.widget())支持以下几种方案:

使用基本小部件($.Widget)作为起点创建新小部件:

$.widget( "ns.widget", { ... } )

创建从现有窗口小部件继承的新窗口小部件:

$.widget( "ns.widget", $.ns.existingWidget, { ... } )

扩展小部件:

$.widget( "ns.widget", $.ns.widget, { ... } )

您会注意到扩展语法和继承语法是相同的.小部件工厂非常聪明,可以注意到您正在创建的小部件和您继承的小部件是相同的并且适当地处理它.

继承或扩展窗口小部件时,您只需要定义要更改或添加的内容.基本窗口小部件上还存在一些新方法,以便更轻松地使用继承和更改上下文的方法.阅读jQuery.Widget文档以获取完整的方法列表及其描述.如果你正在扩展一个小部件,你肯定想要阅读有关_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 );
    },
});