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在命名空间ui中有自己的对话框小部件（ui.dialog）。

我的问题是：当我在网页中调用以下内容时，将调用哪个对话框小部件？

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

请注意我在网页中包含了所有三个小部件变体。

我知道上述情况存在冲突。我们如何使用其命名空间调用widget函数，以便不会有任何冲突？

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小部件，如下所示：

$.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);

JQuery UI：如何使用其命名空间调用widget函数

3 个答案: