Développez votre propre plug-in jQuery !

Introduction du cours

jQuery est une bibliothèque JavaScript très populaire qui est de plus en plus utilisée. De nombreux sites l'ont en effet adoptée pour ses effets dynamiques qui donnent un aspect très professionnel.

Une des forces majeures de jQuery est la possibilité d'y ajouter ses propres plug-ins, nous permettant ainsi de réutiliser rapidement et facilement nos codes, mais aussi de les proposer de façon pratique au reste de la communauté.

Le but de ce tuto est de vous apprendre à développer vos propres plug-ins : vous verrez que ça n'a rien de sorcier :D !

Il va de soit que pour développer un plug-in jQuery, il est nécessaire d'avoir un minimum de connaissances en... jQuery :p
Si ce n'est pas votre cas, je vous invite à lire ce tuto, signé tit_toinou :) .

Un... plug-in ?

Commençons par le commencement : qu'est-ce qu'un plug-in concrètement ? De façon globale, il s'agit d'un module, d'un petit logiciel qui ajoute des fonctionnalités à un programme donné afin que ce dernier réponde à des besoins plus précis.

Pour l'anecdote, plug-in est un terme anglais qui signifie brancher. Cela résume bien leur rôle : on peut très bien imaginer un plug-in comme étant une drôle de boîte que l'on branche sur un appareil pour l'améliorer ^^ . En français, il est plutôt recommandé de parler de module d'extension, mais le terme anglais est bien plus utilisé, alors c'est celui-ci que nous allons utiliser.

Revenons à ce qui nous intéresse : jQuery ! Ici, un plug-in n'est pas un gros logiciel tout compliqué à développer... Non non, un plug-in jQuery, c'est une simple fonction JavaScript !

Pour être exécutée, cette drôle de fonction devra être appelée en tant que méthode de nos éléments, comme ceci :

$('p').notreSuperPlugIn(); //Là, tous les paragraphes de notre page verront notre plug-in appliqué sur eux !

Il ne reste plus qu'à coder notre super plug-in :p .

Le code minimum de notre plug-inLa fonction jQuery.fn

Avant de s'attaquer à quelque chose de complexe, commençons par voir les bases : comment ajouter un plug-in à jQuery :-° ?

Nous allons nous baser sur la fonction jQuery.fn. Celle-ci est en quelque sorte la fonction mère de jQuery. C'est elle qui nous permet d'écrire $('#element').show() , $('#element').fadeTo() etc... Et c'est donc elle qui nous permettra d'écrire notre plug-in.

Mais comment ? Ça commence plutôt mal car il y a plusieurs façons de faire !

La première étend notre fonction jQuery.fn avec une notation JSON contenant notre plug-in. L'avantage est que nous pouvons ainsi définir plusieurs plug-ins d'un coup :

jQuery.extend(jQuery.fn, { notreSuperPlugIn: function(parametres) { //Code de notre plug-in ici }, secondPlugIn: function(parametres) { //Code du second plug-in ici } });

Cette pratique est cependant déconseillée : il est préférable de n'avoir qu'un plug-in par fichier, c'est plus propre, plus facile à maintenir, ça fait des fichiers moins gros... Cela dit, si vous avez en projet une bibliothèque de plug-ins étant liés les uns avec les autres, cette solution vous conviendra :) .

Mais pour l'instant, évitons de voir trop grand et préférons la seconde méthode : celle-ci ajoute simplement notre plug-in à jQuery.fn, de la même manière que n'importe quelle fonction :

jQuery.fn.notreSuperPlugIn=function(parametres) { //Code de notre plug-in ici };

Nous adopterons donc cette dernière solution dans la suite de ce tuto : elle a l'avantage d'être plus claire, plus explicite mais, surtout, plus rapide à écrire.

Enfermons notre plug-in !

Cependant, si vous utilisez jQuery depuis quelque temps, vous devez avoir l'habitude d'utiliser dans vos codes le $ plutôt que le mot jQuery. Pour ce faire, nous allons mettre la définition de notre plug-in à l'intérieur d'une fonction anonyme et d'une closure, de cette manière :

(function($) { $.fn.notreSuperPlugIn=function(parametres) { //Code de notre plug-in ici }; })(jQuery);

Cette syntaxe peut paraître curieuse aux premiers abords, mais elle est toute logique : on met entre parenthèses notre fonction anonyme et on l'appelle aussitôt avec l'argument jQuery. Ainsi, dans toute notre fonction, $ aura la valeur... jQuery :D !
C'est une technique pour éviter les conflits avec les autres librairies JavaScript utilisant aussi le $.

Récupérer les éléments utilisant le plug-in

Il est temps désormais de récupérer les différents éléments sur lesquels on doit appliquer notre super plug-in. Pour cela, tentons déjà de comprendre ce qui se passe lorsqu'on fait appel à ce dernier. C'est-à-dire, comme on l'a vu au chapitre précédent, quand on écrit ceci :

$('p').notreSuperPlugIn();

Ici, nous voulons appliquer notre plug-in sur tous les paragraphes. En fait, cela revient à appeler une méthode de nos paragraphes. Si vous avez des notions en POO, vous savez que pour accéder à l'élément appelant la méthode, il faut utiliser le mot-clé this. Si vous n'avez pas de notions en POO, sachez simplement que pour accéder à l'élément appelant la méthode, il faut utiliser le mot-clé this.

Ainsi, le mot-clé this dans notre plug-in fait référence à l'objet jQuery appelant notre plug-in ! De petits exemples pour que vous compreniez bien :

$('div').notreSuperPlugIn(); //this fera référence à l'objet jQuery $('div') $('#header').notreSuperPlugIn(); //this fera référence à l'objet jQuery $('#header') $('table.commentaire').notreSuperPlugIn(); //this fera référence à l'objet jQuery $('table.commentaire')

... Bref, je crois que vous avez compris le principe :) .

Vous savez probablement qu'un objet jQuery peut faire lui-même référence à plusieurs éléments de notre page Web. Ainsi, $('div') fait référence à toutes les <div> de notre page !

Et donc, pour pouvoir appliquer notre plug-in sur tous les éléments de notre objet jQuery, nous utiliserons la fonction each() :

(function($) { $.fn.notreSuperPlugIn=function(parametres) { this.each(function() { //Code de notre plug-in ici }); }; })(jQuery);

On retrouve notre cher mot-clé this, qui représente notre objet jQuery appelant le plug-in. Et c'est dans la fonction each() que l'on écrira notre code.

Ne cassons pas la chaîne !

Il reste toutefois un petit quelque chose à ajouter pour avoir une bonne base. Vous n'êtes pas sans savoir que jQuery a pour particularité de chaîner ses fonctions. Comprenez par là que l'on peut faire ceci sans problème :

$('p').css('color','red').appendTo($('div')).show();

Cela est possible car chacune des fonctions, que ce soit css(), appendTo(), show() ainsi que la grande majorité des fonctions de la bibliothèque, renvoient en valeur de retour l'objet jQuery qui les a appelées.

Pour respecter cette philosophie, notre plug-in doit permettre de s'ajouter dans cette chaîne, comme ceci :

$('p').css('color','red').notreSuperPlugIn().appendTo($('div')).show();

Pour ce faire, rien de plus simple, il suffit de renvoyer l'objet jQuery appelant notre plug-in... Vous savez, notre fameux mot-clé this.

(function($) { $.fn.notreSuperPlugIn=function(parametres) { this.each(function() { //Code de notre plug-in ici }); return this; }; })(jQuery);

Bien entendu, la fonction each() renvoie elle aussi l'objet jQuery l'ayant appelé. Ainsi, il est également possible d'écrire ceci :

(function($) { $.fn.notreSuperPlugIn=function(parametres) { return this.each(function() { //Code de notre plug-in ici }); }; })(jQuery);

Ceci sera donc notre code de base pour tous nos futurs plug-ins. Ce n'est pas bien compliqué en fait, il faut juste le savoir, c'est tout :) .

Notre premier plug-in !Débutons par un plug-in basique

Maintenant qu'on a le code de base, le reste va vite couler de source : ça ne sera que du code jQuery traditionnel !

Commençons par un plug-in simple. On va l'appeler hoverFade il abaissera lentement l'opacité de nos éléments au passage de la souris dessus. Une fois l'opacité à 0, il remettra rapidement l'opacité de l'élément à la normale. Cela peut donner un effet sympa pour nos liens par exemple, ça changera d'un simple changement de couleur :p .

On aura donc besoin des fonctions fadeOut() et fadeIn() :) .

Essayez de le faire vous-même avant de regarder le code ci-dessous, c'est en essayant qu'on apprend !

(function($) { $.fn.hoverFade=function() { return this.each(function() { //On veut que l'élément change au passage de la souris, on utilise donc mouseover() ! $(this).mouseover(function() { //On diminue donc l'opacité lentement $(this).fadeOut('slow',function() { //Une fois l'élément invisible, on le fait réapparaitre rapidement ! $(this).fadeIn('fast'); }); }); }); }; })(jQuery);

Il me semble inutile d'expliquer ce code, les commentaires sont assez explicites je pense. Vous pouvez cependant vous demandez pourquoi j'utilise $(this) et non notre mot-clé this.
C'est tout simplement parce que nous codons dorénavant dans la fonction each(), et non plus directement dans notre plug-in ! Et, dans each(), pour accéder à notre élément on utilise... $(this) ^^ .

Et si on testait ?

Ça serait mieux, non :D ? Commençons par enregistrer le plug-in dans un fichier : pour ce faire, on utilise généralement deux méthodes différentes, selon la version de votre fichier :

• La version de développement : c'est celle qu'on a actuellement, avec le code bien présenté, indenté et commenté. Il est facile à maintenir et permet aux autres développeurs de comprendre ce que vous avez fait. On le nomme généralement de cette façon : jquery.nomDuPlugIn.js.

• La version de production : c'est bien évidemment le même code que la version de développement, mais sans l'indentation, sans les commentaires et les retours à la ligne, et qui tient le plus souvent sur une seule ligne ! Le fichier n'est alors plus du tout lisible et le maintenir est un enfer... Mais il a l'avantage d'être plus léger, ce qui le rend idéal pour l'intégrer dans les sites, d'où le terme de "production". Pour transformer notre fichier de développement en version de production, on utilise généralement des outils faits pour, comme le site jscompress. On nomme généralement la version de production de cette façon : jquery.nomDuPlugIn-min.js.

Bien entendu, il est préférable de conserver les deux versions. De plus, si vous voulez proposer votre plug-in au reste du monde, il est préférable de mettre à disposition les deux versions également ^^ .

Bon, alors, nommons notre fichier jquery.hoverFade.js et créons une page HTML pour le tester !

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitionnal//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Notre super plug-in jQuery !</title> <meta http-equiv="Content-Type" content="text/html; charset=charset=iso-8859-1" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="jquery.hoverFade.js"></script> <script type="text/javascript"> $(function() { $('a, h1').hoverFade().css('color','red'); }); </script> </head> <body> <h1>Lorem ipsum dolor sit amet</h1> <p> Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit. Praesent sit amet libero odio. Maecenas auctor varius lorem at commodo. Praesent egestas consectetur hendrerit. Pellentesque condimentum dictum enim, scelerisque convallis erat mollis quis. Ut cursus tellus sed odio feugiat aliquam. Aenean vel orci nunc. Cras pharetra tortor a elit laoreet <a href="#">non ornare magna fermentum</a>. Fusce convallis tincidunt rhoncus. Nunc ac elit in tellus facilisis euismod. Donec vel mi urna. Aliquam in urna dolor, <a href="#">non blandit sapien</a>. Proin consequat, arcu non dignissim semper, nibh tellus condimentum turpis, vel ornare ipsum massa rhoncus eros. </p> </body> </html>

Tester !

N'oubliez pas bien sûr d'inclure le plug-in via une balise <script> dans le <head> ! Veillez aussi à inclure jQuery, sans ça notre plug-in ne pourra pas fonctionner :p .
J'ai choisi pour ma part d'inclure le fichier hébergé par Google.

Enfin, une troisième balise <script> a été ajoutée afin d'appliquer notre plug-in sur les éléments que l'on souhaite. Dans l'exemple ci-dessus, les liens seront donc animés au passage de la souris, ainsi que les titres de premier niveau. L'appel à la fonction .css() n'est là que pour vérifier que le chaînage fonctionne bien :) .

Ce n'est donc pas si compliqué, n'est-ce pas :D ?

Un peu de personnalité avec les paramètresLes paramètres simples

Notre plug-in ci-dessus est bien sympathique, quoique vraiment primaire.

Il serait intéressant de proposer à l'utilisateur de le paramétrer. Par exemple, notre plug-in hoverFade() impose actuellement une vitesse d'animation. Ça pourrait être sympathique de paramétrer cette vitesse non :) ?

La façon de procéder à laquelle vous pensez sans doute est la suivante :

(function($) { $.fn.hoverFade=function(vitesseFadeOut, vitesseFadeIn) { return this.each(function() { //On veut que l'élément change au passage de la souris, on utilise donc mouseover() ! $(this).mouseover(function() { //On diminue donc l'opacité lentement $(this).fadeOut(vitesseFadeOut,function() { //Une fois l'élément invisible, on le fait réapparaitre rapidement ! $(this).fadeIn(vitesseFadeIn); }); }); }); }; })(jQuery);

Pour ensuite l'appeler de cette façon :

$('p').hoverFade(2500,2000);

Cette solution fonctionne, même si dans l'idéal il faudrait vérifier les valeurs envoyées. Cependant, elle n'est pas des plus pratique.

Pourquoi ? Imaginons la plug-in suivant :

$.fn.unSuperPlugIn=function(vitesse, couleur, largeur, hauteur, position_x,...