Bonjour,

Vous vous souvenez de mon dernier article ? Je l’ai écrit il y’a quelques semaines seulement.

Ok, ça parlait de jQuery qui est un Framework JavaScript qui permet de dynamiser vos pages Web. Vous vous en souvenez maintenant ? Et à la fin de l’article je vous avais parlé des plugins jQuery aussi.

Aujourd’hui je vais vous montrer comment en créer.

Pourquoi créer un plugin ?

En général, si vous écrivez un script jQuery ça s’applique que sur les éléments de votre page Web que vous développez, donc si vous voulez réutiliser le code vous serez obligé de faire des modifications (nom des id, classe, … pour éviter les conflits par exemple) pour l’adapter à la structure de votre page Web. Pour régler ces genres de problème vous pouvez créer un plugin qui est juste un script qui permet d’ajouter des fonctionnalités sur les objets jQuery : il ne dépend pas d’un élément.

Fonctionnement des plugins jQuery

Avant d’en créer il faut que l’on sache comment ça marche

À la base, jQuery manipule des éléments du DOM ou une chaîne définie par un sélecteur CSS. Il retourne un objet jQuery, qui est un tableau contenant une liste de noeuds DOM (Document Object Model). Une ou plusieurs méthodes peuvent être chaînées (appliquées successivement) à ce groupe de nœuds.

jQuery autorise l’ajout de méthodes à sa bibliothèque. Lorsqu’elles sont appelées, ces méthodes reçoivent l’objet jQuery sans utiliser l’objet JavaScript “this”. Les nœuds DOM peuvent être manipulés selon les besoins et la méthode retourne en général “this” afin que d’autres fonctions puissent être chaînées.

Déclaration d’un plugin

(function($){

$.fn.monPlugin = function() {

this.css(‘background-color’, ‘red’);

}

})(jQuery);

Vous avez vu le code ci-dessus ? Eh bin, c’est un plugin :-D, il s’appelle « monPlugin ». Ce plugin s’applique aux éléments d’une page comme suit :

$(“div, #id, .class”).monPlugin() ;

Ici tout ce qu’il va faire c’est changer la couleur de fond de tous les div, les éléments qui ont comme id ‘id’ ou comme classe ‘class’ en rouge.

Dès fois l’objet jQuery peut faire référence à un ensemble d’autres objets et il se peut qu’on veuille faire des traitements spécifiques sur chaque objet. Pour ce faire, il faut les parcourir comme le montre le code suivant :

(function($){

$.fn.monPlugin = function() {

this.each(function(){

var o = $(this);

o.css(‘background-color’, ‘red’);

});

return this;

}

})(jQuery);

Voilà, ici la fonction “this.each” explore l’ensemble des nœuds DOM de l’objet jQuery et appelle une fonction anonyme. Au sein de la fonction, “this” contient un seul nœud : l’élément en cours. Un nœud de collecte jQuery est assigné à “$” pour que les méthodes jQuery fonctionnent. Ensuite on change la couleur de fond dudit élément.

Aussi, à la fin il faut toujours faire un “return this” pour ne pas briser la chaîne : qu’on ait la possibilité d’appeler d’autres méthodes. Par exemple :

$(“div”).css(‘color’, ‘white’).fadeIn();

Ajouter des paramètres à un plugin

Eh oui, on a la possibilité d’ajouter des paramètres sur nos plugins, il n’est qu’une fonction

Commençons par le code, puisque vous parlez bien le code

(function($){

$.fn.monPlugin = function(couleur) {

this.each(function(){

var o = $(this);

o.css(‘background-color’, couleur);

});

return this;

}

})(jQuery);

Voilà, vous avez compris ? Oui je sais mais la reformulation est pédagogique. Bon en français facile, avec ce nouveau plugin chaque objet peut spécifier la couleur de fond qu’il veut qu’on lui applique (hihi, like a boss !)

Bon c’était moi, si vous avez des questions je suis à votre disposition.

Autres ressources pour les bon élèves qui veulent aller plus loin