I plugin di jQuery non sono altro che estensioni aggiunte alla libreria stessa. I plugin vanno ad operare sugli elementi del DOM e sugli oggetti di un set jQuery esattamente come qualsiasi altro metodo nativo di jQuery (come addClass() ad esempio). La particolarità dei plugin è che funzionano proprio come i metodi nativi di jQuery. Essi operano all'interno del namespace jQuery e ogni plugin va a creare un suo namespace particolare all'interno del namespace globale della libreria. Possono funzionare sia su elementi HTML particolari che su più elementi. In questo post vedremo come creare un plugin da zero. Scopo del nostro plugin sarà quello di aggiungere alcuni widget di Facebook agli elementi della pagina.
Creazione del namespace
Per creare il namespace per il nostro plugin è sufficiente il seguente codice:
(function($) {
// codice del plugin
})(jQuery)
Come si può notare, si tratta di una funzione di tipo self-executing (che si esegue senza bisogno di essere invocata) avente come parametri l'oggetto jQuery stesso. Quindi il codice del nostro plugin opererà proprio all'interno di jQuery, ossia ne costituirà un'estensione.
Uso dell'oggetto fn
Ciascun oggetto JavaScript ha un oggetto prototype che viene creato con l'oggetto stesso. Tale oggetto serve per gestire l'ereditarietà e per estendere l'oggetto base con nuovi metodi e proprietà. jQuery non fa eccezione: l'oggetto fn è un alias dell'oggetto prototype della libreria. Tramite tale oggetto, possiamo estendere jQuery con il nostro plugin definendo una semplice funzione, ossia aggiungendo un metodo a jQuery che funzionerà esattamente come i suoi metodi nativi:
(function($) {
$.fn.FacebookSocial = function(options) {
// codice del plugin
};
})(jQuery);
Quindi se ora abbiamo un elemento con ID uguale a #test possiamo scrivere:
$('#test').FacebookSocial(options);
Infatti il nostro plugin ora può funzionare su tutti gli elementi HTML selezionabili da jQuery. Il parametro options (che può anche essere chiamato settings o in modo simile) andrà a contenere i valori di default delle opzioni del nostro plugin, ossia quei valori che il plugin userà se non ne vengono specificati altri all'atto del suo uso. Vedremo il suo funzionamento di seguito.
Opzioni predefinite
Le opzioni predefinite per un plugin si rivelano fondamentali nel caso si decidesse di usarlo senza opzioni, ovvero invocandolo in questo modo:
$('#test').FacebookSocial();
Senza dei valori predefiniti, il plugin non funzionerebbe. Quindi andremo a definire un nuovo oggetto letterale contenente i valori di default e quindi estenderemo (usando $.extend()) options con questo oggetto letterale. Il risultato finale sarà che options diverrà un oggetto letterale contenente i nostri valori predefiniti:
(function($) {
$.fn.FacebookSocial = function(options) {
var defaults = {
url: location.href,
klass: 'fb-social',
wrapper: '<div id="fb-social-wrapper"/>',
type: 'sharer',
text: 'Facebook',
header: false,
colorscheme: 'light',
recommendations: false,
transparency: false
};
options = $.extend(defaults, options);
// codice del plugin
};
})(jQuery);
L'oggetto this
All'interno di un plugin jQuery, this fa sempre riferimento all'oggetto jQuery (o all'elemento del DOM) su cui si sta operando. Quindi se abbiamo:
$('#test').FacebookSocial();
this fa riferimento all'elemento con ID uguale a #test. Tutti i plugin di jQuery devono restituire this tramite un'istruzione return in modo da consentire il normale proseguimento della catena di jQuery e della cascata, ossia per avere:
$('#test').FacebookSocial().
addClass('test').hide();
Per migliorare la performance, possiamo memorizzare this in una variabile e usarla in seguito:
(function($) {
$.fn.FacebookSocial = function(options) {
var defaults = {
url: location.href,
klass: 'fb-social',
wrapper: '<div id="fb-social-wrapper"/>',
type: 'sharer',
text: 'Facebook',
header: false,
colorscheme: 'light',
recommendations: false,
transparency: false
};
options = $.extend(defaults, options);
var that = this;
return that.each(function() {
// codice del plugin
});
};
})(jQuery);
Il metodo each() viene usato in questo contesto per permettere un'azione distribuita su un set composto da più elementi (per esempio aventi una determinata classe CSS).
Interagire con le opzioni
Abbiamo detto che l'oggetto letterale options ora contiene i valori di default delle opzioni del nostro plugin. Essendo un oggetto, possiamo accedere alle sue proprietà tramite la notazione oggetto.proprietà e quindi usarle per far compiere al nostro plugin determinate azioni:
(function($) {
$.fn.FacebookSocial = function(options) {
var defaults = {
url: location.href,
klass: 'fb-social',
wrapper: '<div id="fb-social-wrapper"/>',
type: 'sharer',
text: 'Facebook',
header: false,
colorscheme: 'light',
recommendations: false,
transparency: false
};
options = $.extend(defaults, options);
var that = this;
return that.each(function() {
switch(options.type) {
case 'like':
var iframe = '<iframe src="http://www.facebook.com/widgets/like.php?href=' + options.url +
'" class="' + options.klass + '" scrolling="no" frameborder="0" border="0" width="450" height="80" />';
$(options.wrapper).html(iframe).appendTo(that);
break;
case 'sharer':
var link = '<a href="http://www.facebook.com/sharer.php?u=' + options.url +
'" class="' + options.klass + '" title="Add to Facebook">' + options.text + '</a>';
$(options.wrapper).html(link).appendTo(that);
break;
case 'activity':
var activframe = '<iframe src="http://www.facebook.com/plugins/activity.php?site=' + options.url +
'&width=300&height=300&header=' + options.header + '&colorscheme=' + options.colorscheme + '&recommendations=' + options.recommendations + '" class="' + options.klass + '" scrolling="no" frameborder="0" allowTransparency="' +
options.transparency + '" />';
$(options.wrapper).html(activframe).appendTo(that);
break;
default:
break;
}
});
};
})(jQuery);
Il plugin finito
Potete vedere il plugin in azione qui e scaricarlo a questo indirizzo.