Ecrire un plugin jQuery pour centrer des éléments

Lorsqu'on utilise jQuery, on peut écrire des fonctions javascript classiques qui font simplement appel à jQuery pour effectuer le traitement souhaité.

L'ennui avec ces fonctions est que leur utilisation est plus délicate que l'utilisation de jQuery.

Par exemple, prenons le cas d'une fonction qui permet de centrer un élément. Cette fonction peut s'écrire ainsi :

function centreElement(element) {
   $(element).css({
   'top': (($(window).height() - $(element).height()) / 2) + $(window).scrollTop(),
   'left': (($(window).width() - $(element).width()) / 2) + $(window).scrollLeft()
   });
}

Cette fonction peut être appelée sur n'importe quel élément, de cette façon centreElement('#image1'). Mais que se passe t-il si on veut centrer horizontalement plusieurs éléments images ?

Il suffit de modifier un peu cette fonction pour ne centrer qu'horizontalement. Par contre, il faut exécuter une boucle, par exemple avec la fonction each de jQuery, pour appeler autant de fois que nécessaire cette fonction. Une solution plus élégante peut être d'écrire son propre plugin jQuery, c'est à dire, tout simplement, une fonction personnelle qui se comporte comme une fonction intégrée de jQuery. 

Voilà la façon dont on pourrait écrire un tel plugin :

(function($) {
   $.fn.centreElement = function() {
         this.each(function() {
               var $e = $(this);
            $e.css({
               'left': (($(window).width() - $e.width()) / 2) + $(window).scrollLeft()
            });
         });  
         return this;  
      };
})(jQuery);

Un plugin jQuery nom est tout simplement une fonction définie avec $.fn.nom. Pour éviter tout télescopage avec d'autres bibliothèques installées, on utilise une fonction anonyme qui reçoit un paramètre $, et on appelle cette fonction avec jQuery :

(function($) {

// ici, $ représente jQuery sans aucun risque de télescopage avec une autre bibliothèque

})(jQuery);

Il suffit maintenant de définir une fonction anonyme pour $.fn.centreElement.
Cette fonction doit pouvoir être chainée avec d'autres appels de fonction jQuery et pour cela, elle doit renvoyer l'objet this fourni par jQuery.
Elle doit également exécuter son traitement sur chaque noeud référencé par jQuery, ce que l'on peut réaliser avec la fonction each().
Voilà donc la structure que doit avoir tout plugin jQuery :

$.fn.centreElement = function() {
   this.each(function() { // boucle générique sur chacun de éléments avec la fonction each()
   // code spécifique au plugin écrit
   });  
   return this; // valeur de retour pour pouvoir effectuer le chainage  
};

Et il ne reste plus, pour effectuer le centrage, qu'à reprendre ce que nous avions écrit dans la première fonction, en enlevant le top :

var $e = $(this);
$e.css({
   'left': (($(window).width() - $e.width()) / 2) + $(window).scrollLeft()
});

Notre plugin permet maintenant d'écrire des instructions comme :

$('img').centreElement().show();

Cet exemple est parfois employé comme exercice de cours jQuery