Comment écrire une méthode pour un plugin jQuery?

Question

J'ai écrit un plugin jQuery assez basique qui prend une liste non ordonnée et crée une belle liste multi-sélectionnable. L'appeler « multiSelector », la déclaration du plugin ressemble à ceci:

jQuery.fn.multiSelector = function(options) { 
    // plugin code 
} 

Le plugin fonctionne en fait sur un div contenant une liste non ordonnée à l'intérieur (pour des raisons de CSS, entre autres), donc une utilisation typique de ce look plugin comme ceci:

var $listDiv = $('#listDiv') // div that contains unordered list 
$listDiv.multiSelector(); 

Il fonctionne très bien, donc je ne suis pas avoir de problèmes créant le plugin. Cependant, ce que je voudrais faire maintenant, c'est fournir à l'utilisateur un moyen d'obtenir tous les éléments sélectionnés de leur liste. J'ai regardé en ligne comment créer des fonctions à partir de ce plugin, et je ne peux pas vraiment trouver de moyens de l'étendre avec une fonction.

Ce qui serait bien est de faire quelque chose comme ça, où « itemArray » est un tableau de chaînes en fonction de la liste id de l'article (ou quelque chose):

var itemArray = $listDiv.multiSelector().getSelected(); 

Je réalise ma logique est probablement beaucoup ici off, mais je cherche juste quelques conseils sur la façon d'accomplir cela. Peut-être que j'ai besoin d'écrire une nouvelle fonction jQuery pour gérer cette tâche spécifique, ou peut-être que je peux encore l'amadouer sur ce plugin multiSelector en quelque sorte. Toute aide serait appréciée.

Merci.

Answer 1

Je suggère d'ajouter l'option d'appeler une méthode en tant que paramètre du plugin. C'est ainsi que la plupart (tous?) Les plugins jQuery UI le gèrent.

jQuery.fn.multiSelector = function(options) { 
    if (typeof options === "string") { 
     if (options == "selected") { 
     ...return the selected elements 
     } 
     return null; 
    } 

    options = $.extend({}, $.fn.multiSelector.defaults, options); 

    ... rest of plugin body... 
} 

Ensuite, appelez comme

var selected = $('.selector').multiSelector('selected'); 

Answer 2

Si votre plugin renvoie un objet jQuery, vous devez simplement écrire une autre fonction jQuery pour effectuer votre opération "getSelected".

Answer 3

Vous devez activer la fonction multiSelector pour renvoyer un objet qui contient une fonction getSelected.

Par exemple:

jQuery.fn.multiSelector = function(options) { 
    var self = this; 

    return { 
     getSelected: function() { 
      return self.children('.Selected'); 
     }, 
     //Other methods 
    }; 
} 

Notez que dans les méthodes de retour, le mot-clé this fera référence à l'ypu d'objet retourné, et non l'objet jQuery d'origine. Pour contourner ce problème, vous devez enregistrer une référence à l'objet this d'origine (self dans mon exemple)

Notez également que cette brisera de méthodes enchaînées, ce qui signifie que vous ne serez pas en mesure d'écrire $(...).multiSelector().fadeIn(). (Évidemment)

Answer 4

Je vois généralement des propriétés mises en œuvre comme ceci:

listDiv.multiselector $ ('option', 'propriété'); // get $ listDiv.multiselector ('option', 'propriété', 'valeur'); // set

Et j'imagine que vous pourriez faire quelque chose de similaire avec une propriété 'selected'. Un peu encombrant, je réalise. Par exemple, voir UI/Droppable's "methods", qui sont tous accessibles via .droppable("method_name"). Ce que vous ne devriez pas faire, c'est retourner un objet qui a une méthode getSelected(), comme plusieurs réponses le suggèrent (sauf si vous ajoutez cette méthode à l'objet jQuery). Les plugins JQuery doivent renvoyer l'objet jQuery, et s'écarter de cela vous causera du chagrin à long terme, et rendra votre code plus difficile à utiliser.

Answer 5

En règle générale, les plugins fournissent en général cette fonctionnalité en permettant à l'utilisateur de passer dans une chaîne spécifique comme argument à la méthode de plugin qui va provoquer le plugin pour revenir autre chose que l'objet jQuery habituel. Par exemple,

$('#listDiv').multiSelector('getSelected') // will return an array of strings