Пользовательский интерфейс JQuery: как вызвать функцию виджета с ее пространством имен

Question

Я создал два пользовательских виджета JQuery UI с тем же именем, но с разными пространствами имен, как показано ниже: Первый виджет:

$.widget('finance.dialog',{....}); // this was created in the file jquery.finance.dialog.js

Второй виджет:

$.widget('hr.dialog',{.....}); // this was created in the file jquery.hr.dialog.js

Помимо этих двух, пользовательский интерфейс JQuery имеет собственный диалоговый виджет (ui.dialog) в пользовательском пространстве имен.

Мой вопрос: Какой виджет диалога будет вызываться, когда я вызываю следующее на веб-странице, как указано ниже?

$('div#something').dialog(); 

Обратите внимание, что я включил все три варианта виджетов на веб-странице.

Я понимаю, что в вышеуказанном сценарии есть конфликты. Как мы можем вызвать функцию виджета с ее пространством имен, чтобы не было никаких конфликтов?

Answer 1

У меня был тот же вопрос, но я не думаю, что можно вызвать виджет jquery ui с пространством имен.

Если я правильно понимаю из этого: http://bugs.jqueryui.com/ticket/7489 Определяя виджеты с тем же именем, мы намеренно перезаписываем более ранние определения. Поскольку независимо от пространства имен, виджеты сопоставляются с их именем в $ .fn.

Как предлагается в билете об ошибке, вы можете использовать функцию моста для создания уникального сопоставления с конкретным виджетом с пространством имен и вызывать его, используя уникальное имя.

В вашем случае это может быть так:

$.widget.bridge( "finance_dialog", $.finance.dialog );
$.widget.bridge( "hr_dialog", $.hr.dialog );

// then call it with...
$( "div#something" ).hr_dialog(); 

Полагаю, другим способом было бы создание уникальных имен виджетов.

Answer 2

Вы можете вызывать виджет пользовательского интерфейса jQuery по его пространству имен следующим образом:

$.ui.dialog(null, $('div#something'));  // Default jQ UI dialog
$.finance.dialog(null, $('div#something'));  // Your first custom dialog
$.hr.dialog(null, $('div#something'));  // Your second custom dialog

Используйте первый параметр, который null в приведенном выше примере, чтобы отправить любые параметры виджету.

Answer 3

Я думаю, что эти две функции могут помочь в таком случае.Сначала загрузите виджет, указав на функцию, созданную JQ для объекта пространства имен.Во-вторых, используйте имя напрямую, которое, я думаю, не будет конфликтовать, если имя уникально.

        /**
         * Apply the JQuery UI widget on an element with the given selector
         * @param {String} emSelector selector
         * @param {String} namespace widget namespace
         * @param {String} widgetName widget name
         * @param {Object}[options] options options object or null
         */
        jqUIWidgetByNSAndName:function(emSelector, namespace, widgetName, options) {
            var em = $(emSelector);
            $[namespace][widgetName].call(em, options, em);
        },


        /**
         * Apply the JQuery UI widget on an element with the given selector
         * @param {String} emSelector selector
         * @param {String} widgetName widget name
         * @param {Object}[options] options options object or null
         */
        jqUIWidgetByName:function (emSelector, widgetName, options) {
            var em = $(emSelector);
            $.fn[widgetName].call(em, options);
        }

        //Example1 - with namespace
        this.jqUIWidgetByNSAndName("#abc", "cg", "WebsiteGlass", options);

        //Example2 - without namespace
        this.jqUIWidgetByName("#abc",  "WebsiteGlass", options);