Как расширить существующий виджет пользовательского интерфейса jQuery?

Я использую jQuery v1.8.3 и jQuery UI v1.9.2. Я хотел бы расширить существующий виджет jQuery UI (в моем случае виджет Autocomplete), добавляя и переопределяя только некоторые параметры и методы, но сохраняя другие функции как те присутствующих в официальном выпуске. Как я могу сделать это "правильным" (возможно, "стандартным" ) способом?

PS: Я искал в Интернете (1, 2,...) и я нашел документацию, в основном связанную с созданием нового виджета jQuery UI, но не для расширения существующего.

Ответ 1

В 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 );
    },
});