javascript 如何扩展现有的 jQuery UI 小部件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13711127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to extend an existing jQuery UI widget?
提问by user12882
I am using jQuery v1.8.3 and jQuery UI v1.9.2. I would like to extend an existing jQuery UI widget(in my case the Autocompletewidget) by adding and overriding just some options and methods but keeping the others functionalities as those present in the official release. How can I make that the "proper" (maybe, the "standard") way?
我使用 jQuery v1.8.3 和 jQuery UI v1.9.2。我想扩展一个现有的 jQuery UI 小部件（在我的例子中是自动完成小部件），只添加和覆盖一些选项和方法，但保留其他功能与官方版本中的功能相同。我怎样才能使它成为“正确”（也许是“标准”）的方式？
P.S.: I searched on the Web (1, 2, ...) and I found documentation mostly related to creating a newjQuery UI widget but not to extending an existing one.
回答by Scott González
In jQuery UI 1.9+, extending a widget is done in the same manner as creating a new widget. The widget factory ($.widget()) supports a few scenarios:
在 jQuery UI 1.9+ 中，扩展小部件的方式与创建新小部件的方式相同。小部件工厂 ( $.widget()) 支持一些场景：
Creating a new widget using the base widget ($.Widget) as the starting point:
使用基础小部件 ( $.Widget) 作为起点创建一个新小部件：
$.widget( "ns.widget", { ... } )
$.widget( "ns.widget", { ... } )
Creating a new widget that inherits from an existing widget:
创建一个继承自现有小部件的新小部件：
$.widget( "ns.widget", $.ns.existingWidget, { ... } )
$.widget( "ns.widget", $.ns.existingWidget, { ... } )
Extending a widget:
扩展小部件：
$.widget( "ns.widget", $.ns.widget, { ... } )
$.widget( "ns.widget", $.ns.widget, { ... } )
You'll notice that the extending syntax and the inheritance syntax are the same. The widget factory is smart enough to notice that the widget you're creating and the widget you're inheriting from are the same and handle it appropriately.
您会注意到扩展语法和继承语法是相同的。小部件工厂足够聪明，可以注意到您正在创建的小部件和您从其继承的小部件是相同的，并适当地处理它。
When inheriting or extending a widget, you only need to define what you want to change or add. There are also a few new methods that exist on the base widget to make it easier to work with inheritance and methods that change context. Read the jQuery.Widget documentationfor a full list of methods and their descriptions. You'll definitely want to read about _super()if you're extending a widget.
在继承或扩展小部件时，您只需要定义要更改或添加的内容。基础小部件上还有一些新方法，可以更轻松地使用继承和更改上下文的方法。阅读jQuery.Widget 文档以获取方法及其描述的完整列表。如果您要扩展小部件，您肯定会想阅读_super()。
Here's an example that would change the default delayoption to 500and add a new option prefixwhich is added to all suggestions:
这是一个将默认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 );
},
});
