JQuery UI: Come chiamare una funzione widget di con il suo spazio dei nomi

Question

ho creato due widget personalizzati jQuery UI con lo stesso nome ma con diversi spazi dei nomi, come indicato di seguito: primo widget:

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

secondo widget:

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

Oltre a questi due, l'interfaccia utente di JQuery ha il proprio widget di dialogo (ui.dialog) nello spazio dei nomi ui.

La mia domanda è: Quale widget di dialogo verrà chiamato quando chiamo quanto segue in una pagina Web come indicato di seguito?

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

Nota. Includo tutte e tre le varianti del widget nella pagina Web.

Capisco che ci sono conflitti nello scenario di cui sopra. Come possiamo invocare una funzione widget con il suo spazio dei nomi in modo che non ci siano conflitti?

Answer 1

Ho avuto la stessa domanda, ma non penso sia possibile invocare un widget ui jquery con lo spazio dei nomi.

Se ho capito correttamente da questo: http://bugs.jqueryui.com/ticket/7489 Definendo i widget con lo stesso nome, è designato per sovrascrivere le definizioni precedenti. Perché indipendentemente dallo spazio dei nomi, i widget sono mappati con il loro nome in $ .fn.

Come suggerito nel ticket del bug, è possibile utilizzare la funzione bridge per creare un mapping univoco per il widget specifico del namespace e chiamarlo utilizzando il nome univoco.

Nel tuo caso, può essere simile a questo:

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

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

suppongo un altro modo sarebbe quello di creare i nomi di widget unici, in primo luogo.

Answer 2

È possibile richiamare un widget jQuery UI per il suo spazio dei nomi in questo modo:

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

Utilizzare il primo parametro, che è nulla nell'esempio di cui sopra, per inviare le opzioni al widget.

Answer 3

Penso che queste due funzioni possano essere d'aiuto in tal caso. Il primo carica un widget puntando alla funzione creata da JQ sull'oggetto namespace. Il secondo usa direttamente il nome che penso non sarà in conflitto a patto che il nome sia unico.

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