Pluggez-moi : écrire son propre plugin
Écrire vos propres plugins pour jQuery est vraiment facile. Si vous en restez aux règles suivantes, il sera aussi très simple pour les autres d’intégrer votre plugin.
1 Trouver un nom au plugin, dans l’exemple « foobar ».
2 Créer un fichier nommé jquery.[yourpluginname].js, ici, jquery.foobar.js
3 Créer une ou plusieurs méthodes en étendant l’objet jQuery, ici :
jQuery.fn.foobar = function() {
// faire quelque chose
}; 4 Optionellement, créer un objet avec des fonctions pour l’aide :
jQuery.fooBar = {
height: 5,
calculateBar = function() { ... },
checkDependencies = function() { ... }
};Vous pourrez alors appeler ces fonctions d’aide depuis votre plugin :
jQuery.fn.foobar = function() {
// faire quelque chose
jQuery.foobar.checkDependencies(value);
// faire quelque chose d'autre
}; 5 Optionellement : créer des réglages par défaut que l’utilisateur peut modifier :
jQuery.fn.foobar = function(options) {
var settings = {
value: 5,
name: "pete",
bar: 655
};
if(options) {
jQuery.extend(settings, options);
}
};Vous pouvez alors appeler le plugin sans options, en utilisant les valeurs par défaut :
$("...").foobar();... ou avec des options :
$("...").foobar({
value: 123,
bar: 9
});Si vous publiez votre plugin, il vous faudra de plus des exemples et de la documentation.
De nombreux plugins, et d’excellentes références, existent.
Vous savez maintenant ce qu’il faut pour écrire un plugin. Usons de cette connaissance pour écrire notre propre plugin.
Une chose que plein de gens demandent, en essayant de manipuler des formulaires avec jQuery, est de cocher ou décocher des boutons radio ou des cases à cocher. Ils finissent avec du code du genre :
$("input[@type='checkbox']").each(function() {
this.checked = true;
// ou, pour décocher
this.checked = false;
// ou, pour inverser
this.checked = !this.checked;
});Vous pourriez réécrire n’importe quel each() dans votre code par un plugin sans problème :
$.fn.check = function() {
return this.each(function() {
this.checked = true;
});
};On peut maintenant utiliser ce plugin :
$("input[@type='checkbox']").check();Vous en savez assez pour écrire des plugins à la fois pour uncheck() et toggleCheck(). Mais étendons plutôt notre plugin pour accepter des options.
$.fn.check = function(mode) {
var mode = mode || 'on'; // si mode non défini, défaut: 'on'
return this.each(function() {
switch(mode) {
case 'on':
this.checked = true;
break;
case 'off':
this.checked = false;
break;
case 'toggle':
this.checked = !this.checked;
break;
}
});
};En fournissant un défaut pour l’option, on laisse l’implémenteur l’ignorer ou passer « on », « off » ou « toggle », exemple :
$("input[@type='checkbox']").check();
$("input[@type='checkbox']").check('on');
$("input[@type='checkbox']").check('off');
$("input[@type='checkbox']").check('toggle');S’il y a plus d’un réglage optionnel, cette manière devient compliquée, car l’implémenteur doit passer des valeurs null si le premier paramètre est omis et seul le second utilisé.
L’implémentation de tablesorter au chapitre précédent montre l’utilisation d’un objet littéral pour résoudre ce problème. L’implémenteur peut omettre tous les paramètres ou passer un objet avec des paires propriété/valeur pour chaque réglage à particulariser.
En tant qu’exercice, essayez de réécrire le code du chapitre « Notez-moi » en plugin. L’ossature du plugin ressemble à :
$.fn.rateMe = function(options) {
var container = this; // au lieu d'utiliser un conteneur statique du type $("#rating"), on utilise désormais le contexte jQuery
var settings = {
url: "rate.php"
// ajouter des valeurs par défaut ici
// penser à mettre une virgule (",") après chaque paire, mais pas à la fin !
};
if(options) { // vérifier si des options sont présentes avant d'étendre les réglages
$.extend(settings, options);
}
// ...
// suite du code
// ...
return this; // si possible, retourner "this" pour ne pas briser la chaîne
});Prochaines étapes
Si vous pensez développer plus de javascript, intéressez-vous à l’extension Firefox appelée FireBug. Elle fournit une console (plus agréable que les alerts), un débugueur et d’autres choses bien utiles pour du développement javascript quotidien.
Si vous avez des problèmes que vous ne pouvez résoudre, des idées que vous voulez partager ou simplement une opinion à émettre sur jQuery, n’hésitez pas à poster sur la liste jQuery
RSS 2.0
Plan du site
Espace privé