Comment dériver un widget personnalisé de dialogue jquery-ui

Question

Je veux construire un widget jquery-ui et je ne suis pas sûr de la meilleure façon d'aborder ce sujet.

Le widget gérer le sate de certaines données qui est hébergé à l'intérieur d'une boîte de dialogue jquery-ui.

Dois-je construire un widget personnalisé, dans le widget créer fonction ajouter des éléments à la cible widget puis appelez le widget de dialogue sur ma cible de widgets.

Ou

Est-il possible d'hériter de la boîte de dialogue jquery-ui et juste passer outre la partie du contenu de celui-ci?

Answer 1

Il y a un moyen d'étendre d'autres widgets:

$.widget("ui.customwidget", $.ui.dialog, { 
    options: { 
     // your options 
    }, 

    _create: function() { 
     $.ui.dialog.prototype._create.apply(this); 
     // constructor 
    }, 

    destroy: function() { 
     // destructor 
     $.ui.dialog.prototype.destroy.apply(this); 
    }, 

    _setOption: function(key, value) { 
     $.ui.dialog.prototype._setOption.apply(this, arguments); 
     // process the setting of options 
    } 
    // other methods 
}); 

Mais je n'ENCOURAGER utiliser sur une boîte de dialogue, etc. curseur parce que par exemple Le jeu de boutons repose sur l'existence du widget du bouton et ne reconnaîtra (et ne peut) pas si l'élément est une instance d'un widget qui a étendu le bouton. Par conséquent, il crée juste de nouveaux widgets boutons purs, ce qui conduit à une mise en page foiré et DOM. Le remplacement des parties d'un widget est également critique: Le mécanisme d'extension pour les widgets a été introduit il n'y a pas si longtemps, quand certains widgets existaient déjà. Les développeurs d'entre eux n'avaient pas cette fonctionnalité en tête, donc il peut encore y avoir des problèmes avec cela. Je Aggregate mes widgets (première option): Il suffit de prolonger la $.Widget et faire l'élément d'un dialogue aussi. Ajoutez ensuite des écouteurs d'événement pour les propriétés qui doivent être synchronisées entre la boîte de dialogue et votre widget personnalisé.

$.widget("ui.customwidget", $.Widget, { 
    // ... 
    _create: function() { 
     $.Widget.prototype._create.apply(this); 
     this.element.dialog(); 
    } 
    // ... 
}); 

De cette façon plus robuste que d'étendre d'autres widgets (sauf que vous avez construit le parent et savoir ce que vous faites), mais il a ses inconvénients aussi. Par exemple. Acceptez-vous aussi les options de configuration du widget agrégé, ou seulement des parties de celui-ci? Ou n'en faites-vous pas et forcez l'utilisateur à appeler la boîte de dialogue pour tout ce qui n'est pas géré dans votre widget personnalisé? Je préfère la deuxième option: c'est au moins honnête, parce que votre widget ne promet pas des choses qu'il ne peut pas contenir, mais c'est moche aussi, parce que vous pouvez appeler un, puis l'autre widget. Je ne suis toujours pas content de ma solution, mais l'extension des widgets m'a mis devant toute une série de nouveaux problèmes dont les solutions auraient été soit de patcher la source de l'interface jQuery, soit d'écrire un hack laid.

(Je viens de remarquer que cette question date d'environ un an, et le demandeur n'a peut-être plus ce problème.) Mais j'ai déjà écrit tout ce qui précède et je pense que ce n'est pas si mal.)