Creer Son Plugin jQuery

8/6/2019 Creer Son Plugin jQuery

1/6

Crer un plugin jQuery : une

liste droulante personnalise

parPierre 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
http://pckult.developpez.com/tutoriels/javascript/frameworks/jquery/introduction/http://khayyam.developpez.com/http://www.developpez.net/forums/member.php?u=29897http://www.developpez.com/


2/6

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

- 2 -Copyright 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 Ede dommages et intrts.

http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/

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...............................................................................................................................................................6IV - Rsultat, conclusion..............................................................................................................................................6
http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/http://www.developpez.net/forums/member.php?u=29897http://www.developpez.com/


3/6




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'unefonction 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 ducontenu dans $.fn.exemple(paramtres), votre plugin sera appelable directement parjQuery.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 leconstructeur 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.

ab$("div").exemple();

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 desparamtres 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);
http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://plugins.jquery.com/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/http://www.developpez.net/forums/member.php?u=29897http://www.developpez.com/


4/6




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

III - Ralisation d'une liste droulante personnalise

Je choisis de me baser sur une liste HTML compose de balises ulet lipuis de la transformer en une liste droulantecompose 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 paramtrerle 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 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 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 envoyelors de la soumission du formulaire. Pour cela vous allez devoir crer un lment 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 stockercette 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 = $(''+ opts.title +'');

// crer la seconde zone, affichant toutes les options

var dropdown = $('');

$(this).find("li").each(function(){

dropdown.append($('')
http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/http://www.developpez.net/forums/member.php?u=29897http://www.developpez.com/


5/6




.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");


}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");


// 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 :

Allemagne

Belgique

Espagne

France

Italie

Suisse

functionf(){

alert('clic');

}

$("ul").customDropDown({title:"Pays", selectEvent:f});
http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/http://www.developpez.net/forums/member.php?u=29897http://www.developpez.com/


6/6




L'attribut value des lments sera repris dans la zone personnalise, il conviendradonc de penser le renseigner.

III-2 - CSS

Aucun style n'est dfini dans le plugin, uniquement des classes CSS : dropdownCell, dropdownPanel, dropdownOptet dropdownOptSelected. Voici un exemple de style qui ne rend pas trop mal :

/* la zone affichant l'option slectionne */

.dropdownCell{

border:1pxsolid#bbb;

width:150px;

height:23px;

cursor:pointer;

font-family: arial;

font-size:10pt;

max-height:23px;

background:transparenturl('arrow.gif') righttopno-repeat;

}

.dropdownCell img{

margin:0px3px0px3px;

vertical-align:middle;

width:24px;

}

.dropdownPanel{

border:1pxsolid#bbb;

width:150px;

position:absolute;

}

.dropdownOpt{

background-color:#fff;

cursor:pointer;

font-family: arial; font-size:10pt;

}

.dropdownOpt img{

margin:0px3px0px3px;

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.
http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin//demo/jquery-dropdown.jshttp://khayyam.developpez.com/articles/web/javascript/jquery/plugin//demo/jquery-dropdown.jshttp://khayyam.developpez.com/articles/web/javascript/jquery/plugin//demo/jquery-dropdown.jshttp://khayyam.developpez.com/articles/web/javascript/jquery/plugin//demo/jquery-dropdown.jshttp://khayyam.developpez.com/articles/web/javascript/jquery/plugin//demo/jquery-dropdown.jshttp://khayyam.developpez.com/articles/web/javascript/jquery/plugin//demo/jquery-dropdown.jshttp://khayyam.developpez.com/articles/web/javascript/jquery/plugin//demo/jquery-dropdown.jshttp://khayyam.developpez.com/articles/web/javascript/jquery/plugin//demo/jquery-dropdown.jshttp://khayyam.developpez.com/articles/web/javascript/jquery/plugin//demo/jquery-dropdown.jshttp://khayyam.developpez.com/articles/web/javascript/jquery/plugin//demo/jquery-dropdown.jshttp://www.developpez.com/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin//demo/jquery-dropdown.jshttp://khayyam.developpez.com/articles/web/javascript/jquery/plugin//demo/http://khayyam.developpez.com/articles/web/javascript/jquery/plugin/http://khayyam.developpez.com/http://www.developpez.net/forums/member.php?u=29897http://www.developpez.com/

Documents

Creer Son Plugin jQuery