Vous êtes sur la page 1sur 6

Crer un plugin jQuery : une liste droulante personnalise

par Pierre Schwartz (retour aux articles)


Date de publication : 31 mars 2009 Dernire mise jour :

Cet article va prsenter la cration d'un plugin pour jQuery en ralisant un widget de liste droulante personnalise. Il est conseill d'tre dj l'aise avec l'utilisation de jQuery pour aborder cet article. Rappel : Introduction la bibliothque JavaScript jQuery

Crer un plugin jQuery : une liste droulante personnalise par Pierre Schwartz (retour aux articles)

I - Qu'est-ce qu'un plugin jQuery ?............................................................................................................................. 3 II - Cration d'un plugin............................................................................................................................................... 3 II-1 - Lancement..................................................................................................................................................... 3 II-2 - Paramtres.................................................................................................................................................... 3 III - Ralisation d'une liste droulante personnalise................................................................................................. 4 III-1 - Code............................................................................................................................................................. 4 III-2 - CSS...............................................................................................................................................................6 IV - Rsultat, conclusion..............................................................................................................................................6

-2Copyright 2009 - Pierre Schwartz. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.
http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/

Crer un plugin jQuery : une liste droulante personnalise par Pierre Schwartz (retour aux articles)

I - Qu'est-ce qu'un plugin jQuery ?


Un plugin jQuery est un ensemble de fonctions que l'on va rajouter l'espace de noms de jQuery de manire enrichir les possibilits du framework. De nombreux plugins existent dj (la page des plugins jQuery), qu'il s'agisse de crer de nouveaux widgets, de rajouter des fonctions aux oprations de base de jQuery ou de crer de nouveaux comportements. Un plugin est avant tout une fonction qui sera appelable sur un objet jQuery, il sera compos d'une fonction publique et de plusieurs fonctions prives incluses dans la fonction publique. Dans sa structure, jQuery est fait pour que tout le monde puisse y rajouter facilement des plugins. Un espace de noms est ddi aux plugins : $.fn. Chaque plugin que vous rajouterez est cens se trouver cet endroit. En crant du contenu dans $.fn.exemple(paramtres), votre plugin sera appelable directement par jQuery.exemple(paramtres). Un plugin sera appliqu sur un objet jQuery, provenant par exemple d'une recherche dans le DOM de la page et possdera des paramtres, indiqus par le dveloppeur.

II - Cration d'un plugin II-1 - Lancement


Pour crer un plugin il suffit en thorie de crer une fonction dans $.fn. On peut considrer cette fonction comme le constructeur de votre plugin, rcuprant tous les paramtres et faisant le traitement propre au plugin, positionnant les vnements, etc.
(function($) { // dfinition du plugin $.fn.exemple = function() { alert('hello world'); return $(this); }; })(jQuery);

Ce plugin minimaliste affichera "hello world" chaque fois qu'il sera appel.
<div>a</div><div>b</div><script type="text/javascript">$("div").exemple();</script>

Ce code lancera 2 fois le plugin exemple, une fois sur chaque lment div. On pensera toujours renvoyer un objet jQuery de manire conserver une interface fluide.

II-2 - Paramtres
Les paramtres sont faits pour tre passs sous forme JSON, cel offre entre autres la possibilit de dfinir des paramtres facultatifs. Le principe est de dfinir un jeu de paramtres par dfaut. jQuery prendra ces paramtres lorsqu'ils ne seront pas dfinis dans l'entre JSON.
(function($) { $.fn.exemple = function(options) { var defaults = { title: "", selectEvent: null }; var opts = $.extend(defaults, options); return $(this); }; })(jQuery);

-3Copyright 2009 - Pierre Schwartz. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.
http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/

Crer un plugin jQuery : une liste droulante personnalise par Pierre Schwartz (retour aux articles)

La fonction $.extend se charge de rcuprer les paramtres par dfaut si ces paramtres ne sont pas fournis la fonction. En passant "options" notre fonction de plugin, puis en rcuprant les paramtres effectifs via $.extend, on obtient un second jeu de paramtres not opts dans le code. C'est ce jeu de paramtres qu'il conviendra d'utiliser tout au long de notre plugin.

III - Ralisation d'une liste droulante personnalise


Je choisis de me baser sur une liste HTML compose de balises ul et li puis de la transformer en une liste droulante compose d'une zone affichant l'option slectionne puis d'une zone dite droulante proposant toutes les options de la liste. Le plugin s'appellera directement sur les lments ul : $("ul").customDropDown(); L'utilisateur pourra paramtrer le texte affich la cration de la liste, quand aucune option n'est encore slectionne, ainsi qu'une fonction personnalise appeler chaque slection d'option. Ces 2 paramtres sont nots title et selectEvent. Nous ne savons pas sur combien d'objets jQuery le plugin sera appel, il faudra donc penser en premier lieu sparer tous les lments <ul> pour crer une liste droulante sur chacun. Le principe de la transformation de la liste est le suivant On cre une zone affichant l'option slectionne. On cre une zone contenant tous les lments <li> de la liste. On positionne un vnement clic sur chaque lment slectionnable de manire le reporter dans la premire zone. On met en place un attribut value permettant de rcuprer simplement l'option choisie. Si vous placez une telle liste droulante dans un formulaire, sa valeur ne sera pas envoye lors de la soumission du formulaire. Pour cela vous allez devoir crer un lment <input type="hidden"/> avec la valeur de l'lment slectionn. Le clic sur la premire zone servira drouler et enrouler la liste selon qu'elle est dj droule ou non. Nous aurons besoin de stocker un boolen reprsentant cet tat. J'ai choisi de le stocker dans $.data. Notez qu'on aurait pu stocker cette information directement dans le DOM mais le stockage dans une structure de donnes dcouple du DOM est plus propre.

III-1 - Code
(function($) { //Dfinition du plugin $.fn.imgDropDown = function(options) { // dfinition des paramtres par dfaut var defaults = { title: "", selectEvent: null }; // mlange des paramtres fournis et des paramtres par dfaut var opts = $.extend(defaults, options); // cration d'une liste function createList(f){ // crer la premire zone, affichant l'option slectionne var cell = $('<div class="dropdownCell">' + opts.title + '</div>'); // crer la seconde zone, affichant toutes les options var dropdown = $('<div class="dropdownPanel"></div>'); $(this).find("li").each(function(){ dropdown.append($('<div class="dropdownOpt"></div>') -4Copyright 2009 - Pierre Schwartz. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.
http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/

Crer un plugin jQuery : une liste droulante personnalise par Pierre Schwartz (retour aux articles) .click(onSelect) .attr("value", $(this).attr("value")) .append($(this).html()) .hover(function(){$(this).addClass("dropdownOptSelected");}, function(){$(this).removeClass("dropdownOptSelected");})

});

);

// on masque la zone droulante dropdown.hide(); $.data(cell, "visible", false); // on remplace la balise ul par notre liste personnalise $(this).after(dropdown); $(this).after(cell); $(this).remove(); // on positionne l'vnement de droulage de la liste cell.click(function(){ // si la liste est droule if ($.data(cell, "visible")){ dropdown.slideUp("fast"); $.data(cell, "visible", false); }else{ dropdown.slideDown("fast"); $.data(cell, "visible", true); } }); // fonction appele chaque slection d'un lment function onSelect(){ cell.html($(this).html()); cell.attr("value", $(this).attr("value")); dropdown.slideUp("fast"); $.data(cell, "visible", false); // appel d'une fonction personnalise if (opts.selectEvent) opts.selectEvent($(this));

// cration d'une liste droulante personnalise pour tous les lments de l'objet jQuery $(this).each(createList); // interface fluide return $(this);

}; })(jQuery);

Voici un exemple d'appel :


<ul> <li <li <li <li <li <li </ul> value="1"><img value="2"><img value="3"><img value="4"><img value="5"><img value="6"><img src="germany.png" alt="Allemagne" />Allemagne</li> src="belgium.png" alt="Belgique" />Belgique</li> src="spain.png" alt="Espagne" />Espagne</li> src="france.png" alt="France" />France</li> src="italy.png" alt="Italie" />Italie</li> src="switzerland.png" alt="Suisse" />Suisse</li>

<script type="text/javascript"> function f(){ alert('clic'); } $("ul").customDropDown({title:"Pays", selectEvent:f}); </script>

-5Copyright 2009 - Pierre Schwartz. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.
http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/

Crer un plugin jQuery : une liste droulante personnalise par Pierre Schwartz (retour aux articles)

L'attribut value des lments <li> sera repris dans la zone personnalise, il conviendra donc de penser le renseigner.

III-2 - CSS
Aucun style n'est dfini dans le plugin, uniquement des classes CSS : dropdownCell, dropdownPanel, dropdownOpt et dropdownOptSelected. Voici un exemple de style qui ne rend pas trop mal :
/* la zone affichant l'option slectionne */ .dropdownCell{ border : 1px solid #bbb; width: 150px; height: 23px; cursor: pointer; font-family: arial; font-size: 10pt; max-height: 23px; background: transparent url('arrow.gif') right top no-repeat; } .dropdownCell img{ margin : 0px 3px 0px 3px; vertical-align: middle; width: 24px; } .dropdownPanel{ border : 1px solid #bbb; width: 150px; position: absolute; } .dropdownOpt{ background-color: #fff; cursor: pointer; font-family: arial; font-size: 10pt; } .dropdownOpt img{ margin : 0px 3px 0px 3px; vertical-align: middle; width: 24px; } .dropdownOptSelected{ background-color: #ccc; }

IV - Rsultat, conclusion
Voici une dmonstration de ce que vous pouvez obtenir . N'hsitez pas modifier le style si vos lments de liste ne sont pas tous similaires. Tlcharger le code source de ce plugin Merci l'quipe de la rubrique JavaScript de developpez.com pour sa relecture et ses remarques toujours aussi pertinentes.

-6Copyright 2009 - Pierre Schwartz. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' 3 ans de prison et jusqu' 300 000 E de dommages et intrts.
http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/