Ajouter une méthode personnalisée au plug-in de dialog de l’interface utilisateur

J’utilise les boîtes de dialog de l’interface utilisateur de jQuery et je souhaite append une méthode personnalisée.

Fondamentalement, lorsque mon dialog a une classe de «travail», il comporte une superposition de chargement. J’essaie d’écrire une application globale jQuery afin que, lorsqu’une boîte de dialog se ferme, la classe “fonctionne”.

Je ne suis pas vraiment sûr de ce que je fais mais c’est ce que j’ai jusqu’à présent:

(function ($) { // BIND TO DIALOG CLOSE EVENT $('.ui-dialog').live('dialogclose', function() { $(this).dialog('cancelWorking'); }); // CUSTOM METHOD $.fn.dialog.cancelWorking = function() { $(this).removeClass('working'); }; }(jQuery));

Comme vous pouvez le constater, je ne sais pas trop comment appeler la méthode cancelWorking d’une boîte de dialog et je ne sais pas si j’ai même défini la méthode correctement.

Comme mentionné dans mon commentaire, vous pouvez hériter d’un plugin et étendre ses méthodes.

 (function($,undefined) { $.widget('ui.mydialog', $.ui.dialog,{ test : function() { alert('works') }, }); $.extend($.ui.mydialog,{version:'v0.1'}); })(jQuery);

Pour l’utiliser simplement:

 $('.selector').mydialog({modal:true}); //Create (same as a dialog) $('.selector').mydialog('test'); //Call extended method

Ce modèle vous permet d’append des options d’entrée, des méthodes, des événements, etc. supplémentaires, ainsi que de surcharger ou d’étendre les fonctions fournies dans le plugin parent.

Mentionnons également que c’est bien, car vous pouvez toujours utiliser le plug-in standard sans modifications ailleurs dans votre interface utilisateur.

Je voulais faire la même chose, mais je n’étais pas satisfait de la réponse acceptée. J’ai regardé un peu plus loin et j’ai découvert que vous pouvez utiliser de nouvelles méthodes en tant que telles:

 $.ui.dialog.prototype.toggleProcessing = function(enable) { alert(((enable) ? 'en' : 'dis') + 'able processing'); }

Et ensuite, vous pouvez l’appeler comme n’importe quelle autre méthode de l’interface utilisateur jQuery:

 $('#myDialog').dialog('toggleProcessing', true); $('#myDialog').dialog('toggleProcessing', false);