Расширение виджетов в Jquery UI с переопределением родительских методов

Question

Я пытаюсь расширить диалоговое окно пользовательского интерфейса в соответствии с документацией (версия пользовательского интерфейса 1.8.16):

(function($) {
    $.widget('ui.mydialog', $.extend(true, $.ui.dialog.prototype, {
        _create: function() {
            return $.Widget.prototype._create.apply(this, arguments);
        }
    }));
})(jQuery);

$(function() {
    $('div#dialog').mydialog();
});

Выполнение этого кода вызывает ошибку JS: «this.uiDialog не определен».

И если попытаться переопределить метод _init (), ошибок не будет, но вызов родительского метода не даст результата.

Я в замешательстве .. Какой путь законен, например, для расширения? поставить какой-нибудь пользовательский код инициализации?

Answer 1

Я думаю, что этот пост решит ваш вопрос: Наследование от диалогового окна jQuery UI и вызов переопределенного метода .

Короче говоря, если вы хотите создать виджет, унаследованный от jQuery UI Dialog, вы можете сделать это:

(function($) {
    $.widget("ui.mydialog", $.ui.dialog, {
        _create: function() {
            $.ui.dialog.prototype._create.call(this);
        }
    });

})(jQuery);

Смотрите это в действии: http://jsfiddle.net/william/RELxP/.

---

Из этого туториала вы узнаете: http://wiki.jqueryui.com/w/page/12138135/Widget%20factory. Короче говоря, $.Widget является базовым объектом виджета. Хотя он имеет функцию _create, по умолчанию он ничего не делает, оставляя код инициализации для подкласса. Взгляните на этот обновленный пример: http://jsfiddle.net/william/RELxP/1.

Answer 2

Начиная с jQuery 1.9 и далее, если вы хотите добавить функциональность к виджету и не хотите заменять существующую функцию после того, как ваш код вызывает родительский метод. Чтобы сделать это, вместо того, что предлагает Уильям Ниу, вы можете просто сделать это:

_create: function()
{
    // Custom code here

    // Call the _create method of the widget
    this._super();
}

Это относится ко всем существующим методам. (например, _setOption, _trigger и т. д.)

Answer 3

Я опубликовал простой пример расширения диалога jQueryUI с помощью фабрики виджетов.

http://jsfiddle.net/Artistan/jWUGZ/

Этот пример расширяет диалоговое окно для создания простого модального загрузчика.