jQueryのUI：下記のようどのようにその名前空間

Question

にウィジェット機能を呼び出すために私は、同じ名前を持つが、異なる名前空間を持つ2つのカスタム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.dialog）がネームスペースuiにあります。

私の質問は次のとおりです： 以下のようにWebページで次のものを呼び出すと、どのダイアログウィジェットが呼び出されますか？

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

ウェブページには、3つのウィジェットの種類がすべて含まれています。

私は上記のシナリオで競合があると認識しています。どのようにして名前空間を持つウィジェット関数を呼び出して、競合が起こらないようにすることができますか？

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 

は、ウィジェットに任意のオプションを送信するために、上記の例ではヌルある最初のパラメータを使用します。

Answer 3

この2つの機能がこのような場合に役立つと思います。最初は、名前空間オブジェクトに対してJQによって作成された関数を指すことによってウィジェットをロードします。 2番目の名前は、名前が一意である限り、私は矛盾しないと思う名前を直接使用します。

 /** 
 
     * 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);