• Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Créer un plugin

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Vous en savez maintenant bien assez pour apporter votre pierre à l'édifice jQuery en créant vos propres plugins. Surtout, ne sautez pas ce chapitre en vous disant que l'écriture de plugins n'est pas faite pour vous car cela doit être horriblement compliqué. Vous allez bientôt être convaincus du contraire !

Le squelette d'un plugin

jQuery a été bien pensé dans les moindres détails. Y compris en ce qui concerne la création de plugins. Si vous vous lancez dans l'aventure, tout ce que vous avez à savoir, c'est que les objets jQuery reposent tous sur le prototypejQuery.fn. En d'autres termes, si vous ajoutez une nouvelle fonction JavaScript à l'objetjQuery.fn, elle devient une méthode jQuery ! Par exemple, le code suivant définit la méthodegis():

jQuery.fn.gis = function(param1, param2, param3, …)
{
  // Une ou plusieurs instructions JavaScript
}

Si vous sauvegardez ce code dans un fichier d'extension.jset que vous y faites référence dans une page Web à l'aide d'une balise<script>, vous pouvez directement l'utiliser en faisant quelque chose comme ceci :

$('p').gis(5, 'abc', 10);

Cette instruction applique la méthodegis()à toutes les balises<p>du document en lui transmettant les trois paramètres spécifiés entre les parenthèses. Bravo, vous venez de créer votre premier plugin jQuery !

C'est tout ? Les autres plugins sont-ils vraiment construits sur ce modèle ?

Eh bien… oui ! À quelques petits détails près qui vont être abordés dans la suite.

Conflits entre plusieurs bibliothèques JavaScript

De nombreuses bibliothèques JavaScript utilisent le signe $ pour faire référence à une variable ou une fonction qui leur est propre. Lorsqu'une page Web utilise une bibliothèque de ce type ainsi que jQuery, il se produit un conflit qui peut entraîner des dysfonctionnements de l'une ou l'autre des bibliothèques.

Heureusement, il est possible de demander à jQuery de ne pas utiliser l'alias « $ » à la place du mot « jQuery ». Pour cela, on utilise la méthodenoConflict():

jQuery.noConflict();

Une fois cette instruction exécutée, il est possible d'utiliser le signe $ en accord avec l'autre bibliothèque. Voici un exemple de code :

<script src="uneBibliothequeJavaScript.js"></script>
<script src="jquery.js"></script>
<script>
  $.noConflict();
  // Ici, vous pouvez insérer une ou plusieurs instructions
  // Qui utilisent le signe $ en accord avec les spécifications 
  // De la bibliothèque uneBibliothequeJavaScript.js
</script>

En utilisant une instruction$.noConflict()dans vos plugins, vous les rendez utilisables avec d'autres bibliothèques JavaScript. C'est donc une bonne pratique à mettre en œuvre systématiquement dans vos plugins.

Est-ce que cela veut dire qu'après avoir exécuté l'instruction$.noConflict()dans un plugin je ne pourrai plus utiliser d'instructions jQuery ?

Bien sûr que non ! Cela signifie simplement qu'au lieu d'utiliser le signe $ vous utiliserez le mot « jQuery ». Cette situation est parfaitement tolérable si vous développez de petits plugins qui ne dépassent pas une centaine de lignes de code. Mais elle devient vite insupportable au-delà.

Continuer à utiliser l'alias « $ » dans un plugin jQuery

Tous les programmeurs jQuery sont habitués à utiliser l'alias « $ » à la place de « jQuery », et vous allez voir que cela est toujours possible, même après l'instructionjQuery.noConflict(). Ce tour de force réside dans l'utilisation d'une fonction anonyme (c'est-à-dire sans nom) :

(function($) {
  // Entrez ici le code de votre plugin jQuery
})(jQuery);

Prenez quelques instants pour examiner cette fonction. La syntaxe utilisée est quelque peu inhabituelle, je vous l'accorde. Mais en y regardant d'un peu plus près, on comprend sans peine le mécanisme : la fonction anonyme comporte un paramètre. Lors de son appel, la valeur « jQuery » lui est transmise. Étant donné que, dans la définition de la fonction, le paramètre a pour nom « $ », toutes les instructions situées à l'intérieur de la fonction remplaceront automatiquement le signe $ par « jQuery ». Ce qui est exactement l'effet recherché. Il est donc possible de continuer à utiliser l'alias « $ » dans le plugin si vous incluez son code à l'intérieur de la fonction anonyme. Dans notre cas, le code devient le suivant :

(function($) {
  $.fn.gis = function(paramètres)
  {
    …
  };
})(jQuery);

Parcourir les éléments issus du sélecteur

Les méthodes jQuery sont appliquées à un sélecteur. Ainsi par exemple, l'instruction suivante applique la méthodegis()à toutes les balises de classepremier:

$('.premier').gis();

Il se peut que le document ne comporte qu'une balise de classepremier, mais il se peut aussi qu'il en comporte plusieurs. Pour passer en revue les différents éléments susceptibles d'être retournés par le sélecteur, vous utiliserez l'instructioneach():

this.each(function()
{
  //Les instructions du plugin
});

Le code du plugin devient le suivant :

(function($) {
  $.fn.gis = function(paramètres)
  {
    this.each(function() {
      // Les instructions du plugin
    });
  };
})(jQuery);

Ne rompez pas la chaîne

Vous l'avez expérimenté à maintes reprises dans ce cours : de nombreuses méthodes jQuery peuvent être chaînées. Par exemple, ces deux instructions :

$('.rouge').css('background','red');
$('.rouge').css('color','yellow');

… sont équivalentes à cette instruction :

$('.rouge').css('background','red').css('color','yellow');

Cela vient du fait que la méthodecss()retourne l'objet qui l'a appelée. Cette remarque s'applique également à la plupart des autres méthodes jQuery. Lorsque vous écrivez un plugin, vous devez respecter cette pratique en retournant l'objet sur lequel a été appliquée votre méthode. Ceci est extrêmement simple, puisqu'une instruction suffit :

return this ;

Voici donc (enfin !) le squelette de vos futurs plugins jQuery :

(function($) {
  $.fn.gis = function(paramètres)
  {
    this.each(function() {
      // Les instructions du plugin
    });
    Return this;
  };
})(jQuery);

Un premier plugin

Maintenant, vous savez comment sont construits les plugins jQuery. Il est temps de passer à la pratique en écrivant votre premier plugin. Pour commencer en douceur, je vous propose de créer un plugin qui affecte les attributs gras, italique et souligné au contenu des balises sur lesquelles il est appliqué. C'est le fameux plugin « gis » dont je vous parle depuis le début du chapitre.

Ce plugin est très simple : il ne demande aucun paramètre et se contente d'appliquer trois propriétés CSS au contenu des balises concernées. Voici le code utilisé :

(function($) {
  $.fn.gis = function()
  {
    this.each(function() {
      $(this).wrap('<b><i><u></u></i></b>');
    });
    return this;
  };
})(jQuery);

En appliquant la méthodewrap('<b><i><u></u></i></b>')aux éléments sélectionnés, leur contenu se verra entouré des balises<b>,<i>et<u>. Le texte apparaîtra donc en gras, italique et souligné.

Sauvegardez ce code dans le fichiergis.js. Nous allons maintenant utiliser ce plugin dans une page HTML.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Utilisation du plugin gis</title>
</head>
<body>
  <p class="grasItaliqueSouligne">Ce texte devrait apparaître en gras, italique, souligné après avoir cliqué sur le bouton</p>
  <p>Ce texte devrait rester inchangé</p>
  <p class="grasItaliqueSouligne">Ce texte devrait apparaître en gras, italique, souligné après avoir cliqué sur le bouton</p>
  <p>Ce texte devrait rester inchangé</p><br />
  <button id="action">Cliquez ici pour utiliser le plugin gis</button>        

  <script src="http://code.jquery.com/jquery.min.js"></script>
  <script src="gis.js"></script> 
  <script>
    $(function() {
      $('#action').click(function(){
        $('.grasItaliqueSouligne').gis();
      });
    });
  </script>
</body>
</html>

Le corps du document contient quatre paragraphes (deux de classegrasItaliqueSouligneet deux sans classe) et un bouton de commande d'identifiant#action. Remarquez l'appel au plugin « gis » (situé dans le même dossier que la page en cours d'exécution).

Lorsque le bouton est cliqué, la méthodegis()est appliquée aux éléments de classegrasItaliqueSouligne, c'est-à-dire aux premier et troisième paragraphes :

$('#action').click(function(){
  $('.grasItaliqueSouligne').gis();
});

Je dois bien l'avouer, ce plugin n'est pas très intéressant. Que diriez-vous de quelque chose de plus poussé ?

Un plugin plus ambitieux

Si vous êtes prêts à aller plus loin, je vous propose de développer un plugin qui effectue un rebond multiple amorti sur un élément (un peu comme une bille qu'on laisse tomber sur le sol). Mais avant de commencer à entrer dans les détails du code jQuery, un petit détour mathématique s'impose, à moins que vous n'ayez une idée précise de ce qu'est un sinus cardinal…

Sous ce nom barbare se cache une fonction mathématique bien sympathique dont la représentation produira l'effet de rebond recherché :y = abs(sin(x))/x, oùxreprésente la position sur un axe horizontal etyla position sur un axe vertical. La figure suivante vous montre à quoi ressemble cette courbe.

Représentation graphique de la fonction y = abs(sin(x))/x
Représentation graphique de la fonction y = abs(sin(x))/x

Maintenant, vous savez ce qu'est un sinus cardinal. Nous pouvons donc clore cet aparté et retourner à la programmation jQuery. Pour corser (un peu, si peu !) le code, nous allons utiliser deux paramètres dans le plugin : l'amplitude du déplacement horizontal et l'amplitude du déplacement vertical. Nous allons appeler ce plugin « rebond », dont voici le code :

(function($) {
  $.fn.rebond = function(amplX, amplY)
  {
    this.each(function() {
      var x, y, affX, affY, initX, initY;
      initX = parseInt($(this).css('left'));
      initY = parseInt($(this).css('top'));
      for (x = (Math.PI)/2; x < (4*Math.PI); x = x+.2)
      {
        y = (Math.abs(Math.sin(x)))/x;
        affX = initX + x * amplX;
        affY = initY - y * amplY;
        $(this).animate({left: affX, top: affY},10);
      }
    });
    return this;
  };
})(jQuery);

C'est un peu effrayant, mais je vais vous expliquer comment il fonctionne.

Remarquez l'utilisation des paramètresamplXetamplYdans la définition de la fonction :

$.fn.rebond = function(amplX, amplY)

Dans le code jQuery, l'accès aux valeurs passées au plugin se fera donc via les variablesamplXetamplY.

La première instruction qui suit la bouclethis.each()définit les variables qui seront utilisées dans le plugin :

var x, y, affX, affY, initX, initY;

Dans cette instruction :

  • xetysont les coordonnées calculées par la formule du sinus cardinal ;

  • affXetaffYsont les coordonnées d'affichage de l'élément en cours de traitement ;

  • initXetinitYsont les coordonnées de départ de l'élément en cours de traitement.

Les coordonnées de départ sont obtenues en passant les valeursleftettopà la méthodecss(), et en appliquant cette méthode à l'élément en cours de traitement. Remarquez l'utilisation de la fonction JavaScriptparseInt()pour convertir la valeur de la chaîne retournée par la méthodecss()en une valeur numérique entière :

initX = parseInt($(this).css('left'));
initY = parseInt($(this).css('top'));

La boucleforqui suit fait le gros du traitement. Elle fait varier l'abscisse entre $\(\frac{\pi}{2}\)$ et $\(4 \pi\)$ par pas de 0,2 (rien ne vous empêche d'expérimenter d'autres valeurs pour obtenir un rebond un peu différent) :

for (x = (Math.PI)/2; x < (4*Math.PI); x = x+.2)

L'ordonnée est obtenue en appliquant le sinus cardinal à la valeur courante de la variablex:

y = (Math.abs(Math.sin(x)))/x;

Les coordonnées d'affichage sont obtenues en ajoutant les coordonnées de départ (initXetinitY) aux coordonnées calculées (xety) pondérées par les paramètres fournis au plugin (amplXetamplY) :

affX = initX + x * amplX;
affY = initY - y * amplY;

L'élément en cours de traitement est alors déplacé avec la méthodeanimate(). Les propriétésleftettopsont modifiées pour atteindre (respectivement) les coordonnéesaffXetaffY. La durée du déplacement est fixée à 10 millisecondes. Ici encore, rien ne vous empêche d'expérimenter d'autres durées de déplacement :

$(this).animate({left: affX, top: affY},10);

Voyons maintenant comment se servir de ce plugin :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Utilisation du plugin rebond</title>
  <style type="text/css">
     img { position: absolute; }
     #balle { top: 100px; left: 100px; }  
  </style>
</head>

<body>
  <img src="balle.png" id="balle">
  <button id="action">Cliquez ici pour utiliser le plugin rebond</button>

  <script src="jquery.js"></script>
  <script src="rebond.js"></script> 
  <script>
    $(function() {
      $('#action').click(function(){
        $('img').rebond(10, 100);
      });
    });
  </script>
</body>
</html>

Essayer

Ce document contient une image d'identifiant#balleet un bouton d'identifiant#action. Quelques instructions CSS positionnent l'image de façon absolue, aux coordonnées (100, 100). Lorsque le bouton#actionest cliqué, le plugin « rebond » est appelé en lui transmettant les paramètres10et100:

$('#action').click(function(){
  $('img').rebond(10, 100);
});

Le reste se fait tout seul, c'est le plugin qui le prend en charge.

Vous en savez maintenant assez pour créer des plugins qui faciliteront vos développements et, pourquoi pas, ceux de la communauté des programmeurs jQuery. Si vous voulez mettre vos créations à la disposition des autres développeurs jQuery, soignez particulièrement la documentation. Montrez comment utiliser votre plugin, indiquez comment fonctionnent ses paramètres et donnez plusieurs exemples d'appel.

  • Écrire un plugin pour jQuery n'est pas bien difficile : il suffit d'utiliser le bon squelette et d'y insérer les instructions jQuery et JavaScript qui réaliseront les actions souhaitées.

  • La fonction anonyme vous permet de continuer à utiliser l'alias « $ » de jQuery dans le code du plugin. Y compris si la page qui appelle le plugin fait référence à une autre bibliothèque JavaScript qui utilise le signe $ en interne.

  • La méthodethis.each()permet de parcourir un à un les éléments sur lesquels doit être appliqué le plugin.

  • L'instructionreturn this;assure la continuité de la chaîne jQuery. Avec elle, votre plugin pourra être chaîné à une méthode jQuery ou à un autre plugin.

Exemple de certificat de réussite
Exemple de certificat de réussite