Concevoir un plug-in jQuery

1. Aspects théoriques

L’écriture d’un plug-in jQuery passe par des étapes bien déterminées et certaines règles bien précises sont à respecter.

Le plug-in jQuery prend la forme d’un fichier JavaScript externe (extension .js) qui se place immédiatement après la balise d’appel de jQuery (voir la section Utiliser un plug-in jQuery du présent chapitre) soit :

<script src="jquery.js"></script>
 

Nommer le plug-in

Un plug-in doit toujours être nommé sous la forme jquery.nom_du_plug-in.js. Il sera ainsi immédiatement identifiable.

Isoler le code

Dans ce fichier js nouvellement créé, il faut englober le code du plug-in dans une fonction anonyme. De cette manière, toutes les variables du plug-in n’entreront pas en conflit avec les autres scripts de la page.

(function () { 
    // code jQuery 
}) ()
 

Profitons-en pour passer la variable jQuery, grâce à son alias $, à cette fonction, ce qui permettra d’utiliser la variable $ à l’intérieur de celle-ci.

(function ($) { 
    // code jQuery 
}) ()
 

Ajouter la nouvelle méthode à jQuery

Nous sommes presque prêts à écrire notre plug-in. Il faut encore ajouter cette nouvelle méthode aux objets jQuery par l’instruction $.fn.nom_du_plugin. Dans cette fonction le mot-clé this représentera l’objet...