Я использую jQuery v1.8.3 и jQuery UI v1.9.2. Я хотел бы расширить существующий виджет jQuery UI (в моем случае виджет Autocomplete), добавляя и переопределяя только некоторые параметры и методы, но сохраняя другие функции как те присутствующих в официальном выпуске. Как я могу сделать это "правильным" (возможно, "стандартным" ) способом?
PS: Я искал в Интернете (1, 2,...) и я нашел документацию, в основном связанную с созданием нового виджета jQuery UI, но не для расширения существующего.
В jQuery UI 1.9+ расширение виджета выполняется так же, как создание нового виджета. Виджет factory ($.widget()) поддерживает несколько сценариев:
Создание нового виджета с использованием базового виджета ($.Widget) в качестве отправной точки:
$.widget( "ns.widget", { ... } )
Создание нового виджета, который наследуется от существующего виджета:
$.widget( "ns.widget", $.ns.existingWidget, { ... } )
Расширение виджета:
$.widget( "ns.widget", $.ns.widget, { ... } )
Вы заметите, что синтаксис расширения и синтаксис наследования одинаковы. Виджет factory достаточно умен, чтобы заметить, что созданный вами виджет и виджет, который вы наследуете, одинаковы и обрабатывают его соответствующим образом.
При наследовании или расширении виджета вам нужно только определить, что вы хотите изменить или добавить. Существует также несколько новых методов, которые существуют в базовом виджете, чтобы упростить работу с наследованием и методы, которые изменяют контекст. Прочтите документацию 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 );
},
});