Comment créer un plugin jquery ?

jQuery est la bibliothèque Javascript la plus populaire du moment. Adobe vient même de l’intégrer dans la creative suite 5.5. Il peut-être utile de créer un plugin si vous utilisez souvent les mêmes fonctions, pour un slideshow par exemple.

1. La base

Définir le plugin :

(function($) {
     $.fn.flashonaute = function() {  
          alert('flashonaute');
          return $(this);      
     };
})(jQuery);

Il est préférable de toujours renvoyer un objet jQuery pour conserver une interface fluide.
Pour utiliser le plugin, c’est assez simple, il faut importer le js dans la page pour appeler le plugin :

  

2. Les paramètres

(function($) {
     $.fn.flashonaute = function(options) {  
	  var defaults = {
               title: 'flashonaute'
          }; 
		  
	  if(options) {
               $.extend(defaults, options);
          }
		  
          alert(defaults.title);
		  
          return $(this);      
     };
})(jQuery);
  

3. Exemple

Voici un petit exemple de plugin permettant un affichage progressif d’élément.

(function($) {
     $.fn.flashonaute = function(options) {  
	  var settings = {
               duration: 1000, 
               delay: 100,
               color: '#000',
               backgroundcolor: '#fff'
          }; 
 
          if(options) {
               $.extend(settings, options);
          }
		  
          var delay = 0;
          this.each(function() {
               $(this).hide();
               $(this).css('color', settings.color);
               $(this).css('background-color', settings.backgroundcolor);
               $(this).delay(delay).fadeIn(settings.duration);
               
               delay += settings.delay;
          });
 
          return $(this);      
     };
})(jQuery);