Un plugin jQuery n'est rien de plus qu'un ajout d'une fonction dans la fonction jQuery objet (jQuery.fn
).
Lorsque nous tenons à transformer cette fonction dans un plugin jQuery:
var sayHello = function(elem, name) {
elem.innerHTML = 'Hello ' + name;
}
il va devenir quelque chose comme ceci:
jQuery.fn.sayHello = function(elem, name) {
elem.html('Hello ' + name);
}
Et vous pouvez l'utiliser comme ceci:
$.sayHello($('#helloBox'), 'World');
Mais ce n'est pas très joli, vous voulez quelque chose comme ceci:
$('#helloBox').sayHello('World');
Qui peut être fait en enlevant l' elem
argument de notre plugin et utiliser $(this)
à l'intérieur du plugin pour obtenir les éléments que nous avons sélectionné:
jQuery.fn.sayHello = function(name) {
$(this).html('Hello ' + name);
}
Maintenant, nous pouvons l'utiliser comme ceci:
$('#helloBox').sayHello('World');
Exemple vivant de notre premier plugin: http://jsfiddle.net/Lg9nk/