jQuery est sans doute l’un des plus puissant Framework JavaScript. Une de ses forces réside dans le développement de plug-in facile à intégrer et à développer.
Dans ce tutoriel, nous allons voir comment développer un plug-in jQuery autour d’un simple carrousel pour publier vos images ou réalisations graphiques.
Etape 1 – Préambule
Avant toute chose :
Si vous répondez oui à l’ensemble de ces questions, vous pouvez continuer à suivre ce tutoriel :
- Je connais jQuery et je sais l’intégrer dans une page WEB
- Je sais comment déclencher une action à l’aide de jQuery
- J’ai un éditeur de code HTML / CSS / JAVASCRIPT
- Je sais comment initialiser jQuery
Continuons…
Informations techniques :
J’utilise Aptana IDE comme éditeur
La version jQuery utilisée est la suivante : 1.4.2
Etape 2 – Comprendre
Qu’est-ce qu’un plugin jQuery ?
Un plugin jQuery est un ensemble de fonctions que l’on va rajouter à l’espace de noms de jQuery de manière à enrichir les possibilités du framework. De nombreux plugins existent déjà (la page des plugins jQuery), qu’il s’agisse de créer de nouveaux widgets, de rajouter des fonctions aux opérations de base de jQuery ou de créer de nouveaux comportements. Un plugin est avant tout une fonction qui sera appelable sur un objet jQuery, il sera composé d’une fonction publique et de plusieurs fonctions privées incluses dans la fonction publique.
Dans sa structure, jQuery est fait pour que tout le monde puisse y rajouter facilement des plugins. Un espace de noms est dédié aux plugins : $.fn. Chaque plugin que vous rajouterez est censé se trouver à cet endroit. En créant du contenu dans $.fn.exemple(paramètres), votre plugin sera appelable directement par jQuery.exemple(paramètres). Un plugin sera appliqué sur un objet jQuery, provenant par exemple d’une recherche dans le DOM de la page et possèdera des paramètres, indiqués par le développeur.
Etape 3 – Initialiser
Nous allons commencer par créer un nouveau fichier JavaScript ; dans le cadre de notre tutoriel j’ai décidé d’appeler mon plugIn « sldGal ». Chose important, veillez à ce que le nom de votre plugin soit unique 
. Il nous faudra également un document de base « index.html ».
Code du fichier index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>slDesign - Tutoriel Plugin jQuery</title> <link href="design/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/sldGal.js"></script> </head> <body> <!-- Contenu principal --> </body> </html>
Code du fichier sldGal.js
/**
* sldGals.js - jQuery plugin
*/
//initialisation du plugin
(function($) {
$.fn.sldGal = function(options) {
//Initialise les options par défaut de notre plugin
var defaults = {
title: ""
//Ajout des options ici...
};
//Récupére les paramètres par défaut si ces paramètres ne sont pas fournis à la fonction.
var opts = $.extend(defaults, options);
//Nous déclancherons notre fonction ici
return $(this);
};
})(jQuery);
3- Le code
Cette partie est en cours de refonte… Merci de votre compréhension…
