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

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(); 

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

我知道上述情况存在冲突.我们如何使用其命名空间调用窗口小部件函数,以便不会有任何冲突？

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)将任何选项发送到窗口小部件.