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

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

---

PS ：我在网上搜索（ 1,2 ，…），我发现文档主要与创建新的 jQuery UI小部件相关，但不是扩展现有的小部件。

Answer 1

在jQuery UI 1.9+中，扩展窗口小部件的方式与创建新窗口小部件的方式相同。 小部件工厂（ $.widget() ）支持以下几种方案：

使用基本窗口小部件（ $.Widget ）作为起点创建新窗口小部件：

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

创建从现有窗口小部件inheritance的新窗口小部件：

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

扩展小部件：

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

您会注意到扩展语法和inheritance语法是相同的。 小部件工厂足够聪明，可以注意到您正在创建的小部件和您inheritance的小部件是相同的并且适当地处理它。

在inheritance或扩展窗口小部件时，您只需要定义要更改或添加的内容。 基本窗口小部件上还存在一些新方法，以便更轻松地使用inheritance和更改上下文的方法。 阅读jQuery.Widget文档以获取完整的方法列表及其描述。 如果你正在扩展一个小部件，你肯定想要阅读有关_super（）的内容。

这是一个将默认delay选项更改为500并添加新选项prefix的示例，该选项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 $( "
" ) .append( $( "" ).text( label ) ) .appendTo( ul ); }, });