Conditions d'utilisation et licence
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.
version 1.0.0, dernière mise à jour le 12 janvier 2012.
jQuery est une bibliothèque facilitant la création de code JavaScript portable, et facile à lire. Mais son intérêt ne se limite pas à cela : ses concepteurs ont élaboré un mécanisme permettant de compléter la bibliothèque. Il existe un répertoire « ,officiel » des plugins, mais de nombreux autres peuvent être trouvés sur le Web.
Une présentation plus complète, en anglais, peut être trouvée sur le site officiel sur une page intitulée Plugins/Authoring, qui détaille la manière « canonique » de conception d'un plugin, qui se retrouve dans la plupart de ceux qui existent. Nous ne passerons pas en revue dans ce cours d'introduction tout ce qui y est exposé, mais seulement le début en nous arrêtant au paramétrage du plugin, en construisant un plugin élémentaire pas à pas.
On crée un plugin en étendant la fonction $. Pour cela, on écrit...
(function( $ )
{
$.fn.monPlugin = function() {
//Code du plugin
} ;
})(jQuery) ;
D'habitude avec jQuery, pour faire référence à l'objet jQuery courant on utilise $(this) (this renvoie en effet d'habitude l'objet du DOM). Cependant, le fait que le code du plugin sera appliqué à un objet jQuery fait qu'il n'est pas nécessaire de prendre cette précaution, et on peut écrire directement this.
Il suffit ensuite d'écrire le code du plugin. Analysons par exemple ceci :
(function( $ )
{
$.fn.metEnGras = function(e) {
this.html("<b>"+$(this).text()+"</b>") ;
e.stopPropagation() ;
} ;
})(jQuery) ;
Ce code remplace le contenu de l'élément auquel le plugin est appliqué. Il prend un paramètre e, qui sera en fait un objet de type événement jQuery. On en a besoin afin d'arrêter sa propagation vers le haut du DOM et ainsi éviter que, de proche en proche, les remplacements de code HTML ne finissent par remplacer l'élément body lui-même. Après l'avoir chargé, on l'applique dans le fichier HTML à un objet jQuery :
$(document).ready(hop) ;
function
hop() {
$("p,i").click(testP) ;
}
function
testP(evt) {
$(this).metEnGras(evt) ;
}
Ainsi qu'on peut le constater, le plugin s'applique comme n'importe quelle fonction jQuery, directement à un objet jQuery renvoyé par la fonction $. Pour un test grandeur nature, vous pouvez consulter cet exemple HTML de mise en œuvre du plugin, ainsi que ce premier plugin lui-même.
Un des atouts de jQuery est la possibilité de constituer une chaîne de commandes, par exemple $("p").addClass("rouge").slideToggle() afin de pouvoir les appliquer successivement à un objet jQuery. À cet effet, chaque fonction retourne elle-même un objet jQuery (un peu comme si on écrivait une suite de commandes Unix en ligne, séparées par plusieurs caractères |). Afin de préserver cette capacité, il faut faire en sorte que le plugin que l'on crée retourne un objet jQuery. Or un objet jQuery est créé de la même manière que nous l'avons fait précédemment. Notre plugin doit donc retourner une fonction. De plus, comme a priori il peut s'insérer dans une chaîne traitant une collection de nœuds, il faut s'assurer que la fonction est retournée pour chacun des nœuds de la collection. On obtient donc :
(function( $ )
{
$.fn.metEnGras = function(e) {
return this.each(function() {
this.html("<b>"+$(this).text()+"</b>") ;
e.stopPropagation() ;
})
} ;
})(jQuery) ;
On peut alors tester la chaîne sur ce fichier HTML, avec le plugin associé.
La plupart du temps, le fonctionnement d'un plugin peut être personnalisé à l'aide de paramètres. Il est souvent utile de préciser un lot d'options pour le plugin, avec des valeurs définies par défaut. Ces options sont spécifiées dans un littéral objet qui va « étendre x le jeu d'options par défaut :
(function( $ )
{
$.fn.metEnGras = function(e, options)
var settings = $.extend( {
balise:"b",
classe:""
}, options) ;
{
return this.each(function() {
this.html("<"+settings.balise+">"+$(this).text()+"</"+settings.balise+">") ;
if (settings.classe!="") $(this).addClass(settings.classe) ;
e.stopPropagation() ;
})
} ;
})(jQuery) ;
On peut alors tout à fait insérer l'appel au plugin dans une chaîne, et lui passer des options sous la forme d'un objet littéral : $(this).metEnGras(evt,{balise:"strong",classe:"souligne"}).addClass("rouge");. Les options sont facultatives. Si on écrit $(this).metEnGras(evt,{balise:"strong"}).addClass("rouge");, au lieu d'insérer une balise <b>, le plugin insérera <strong>.
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.