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

Я пытаюсь расширить диалоговое окно пользовательского интерфейса в соответствии с документацией (версия пользовательского интерфейса 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 is undefined".

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

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


javascript widget jquery-ui jquery-ui-dialog extending
person Darkside    schedule 16.09.2011    source источник

Ответы (3)


arrow_upward
6
arrow_downward

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

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

(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.

person William Niu    schedule 17.09.2011
comment
Спасибо. Это действительно помощь. Но мне интересно, почему не работает расширение подхода из официальной документации: - person Darkside; 19.09.2011
comment
о какой части официального документа вы говорите? Слово «расширение» ни разу не встречается в «Руководстве разработчика пользовательского интерфейса jQuery». - person William Niu; 20.09.2011
comment
Вот этот: jqueryui.com/docs/Developer_Guide Да, расширить - моя инновация ;) Но я упомянул об этом подходе: $.Widget.prototype... - person Darkside; 20.09.2011
comment
я запутался с документом jqueryui. ты помоги мне разобраться. большое спасибо, чувак! - person Darkside; 21.09.2011
comment
Это все еще рекомендуемый способ? Или лучше сделать this._super(this.options)? - person Marie; 12.01.2017
comment
Работает, но уже устарело и слишком многословно - person ivanaugustobd; 28.06.2021

arrow_upward
4
arrow_downward

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

_create: function()
{
    // Custom code here

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

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

person Odys    schedule 06.06.2014
comment
Да, this._super() вызовет метод родителя с тем же именем: learn.jquery.com/jquery-ui/widget-factory/extending-widgets . Хороший ответ - person tribulant; 24.10.2016
comment
Это спасло мне жизнь. Вот что говорится в документе о расширении существующего метода open: Since dialogs automatically open by default, "open" will be logged when this code runs, но они не вызывают this._super(), что приводит к той же ошибке, что и OP. - person DerpyNerd; 03.09.2019

arrow_upward
1
arrow_downward

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

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

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

person CharPete    schedule 17.08.2012
comment
Немного поздно, тебе не кажется? - person Kpower; 17.08.2012
comment
Да, немного поздно для OP, но не для сообщества;) - person Odys; 06.06.2014