Come creare un Plugin in jQuery
Un plugin di jQuery non è altro che una classe che opera su uno o più elementi del DOM al quale si possono applica una metodo che andrà ad eseguire diverse operazioni sugli elementi selezionati. Scrivere un plugin ci aiuterà a rendere portabile la nostra funzione ovunque sia presente il framework jQuery. Prima di scrivere il nostro plugin di base voglio fare una piccola puntualizzazione sulla sintassi di jQuery e del suo significato es:
[javascript]
$( "div" ).css( "border", "1px solid red" );
[/javascript]
Questo semplice codice jQuery nasconde in realtà 3 operazioni:
1. Saranno selezionati tutti i div presenti nella pagina tramite la funzione $ di jQuery
2. Tutti gli elementi che rappresentano gli oggetti fn, erediteranno dalla funzione $ tutti i metodi di jQuery come ad esempio: .click, .live, .css ecc., in pratica saranno instanziati come oggetti jQuery
3. Tramite il metodo .css ereditato sarà applicato ad essi un bordo di 1px rosso e di tipo solid.
Ora che conosciamo cosa avviene sotto il cofano di jQuery possiamo passare a definire un plugin di base partendo dalla nostra funzione di prova:
[javascript]
//definiamo il nostro plugin addBorder
(function ( $ ) { //si utilizza una funzione che wrappa il codice per evirare conflitto con altri framework che utilizzano $ come funzione contenitore
$.fn.addBorder= function() {
this.css( "border", "1px solid red" );
return this; //questa riga di codice è utile per concatenare metodi ovvero rende la nostra funzione chainable
}
}( jQuery ));
//utilizziamo il plugin concatenando la funzione addClass
$( "div" ).addBorder().addClass( "chain" );
[/javascript]
Come si può notare nella dichiarazione del plugin, l’oggetto fn rappresenta un generico selettore al quale applicheremo il nostro metodo addBorder (che si aggiungerà agli altri metodi presenti nell’oggetto jQuery $) che verrà instanziato sugli elementi del nostro selettore.
Ora proveremo a rendere configurabile il tipo di border da applicare tramite la definizione delle options:
[javascript]
(function ( $ ) {
$.fn.addBorder= function( options ) {
var settings = $.extend({ //questa funzione fa il merge di un oggetto con quelli successivi, nel notro caso settings con options
// Configurazione di defaults.
"border-color": "red",
"border-style": "solid",
"border-size" : "1px"
}, options );
return this.css( "border", settings.border-size+" "+settings.border-style+" "+settings.border-color );
}
}( jQuery ));
//utilizziamo il plugin aggiungendo dei prametri diversi da quelli di defaults
$( "div" ).addBorder({border-color: "blue", border-style: "dotted", border-size : "2px"}).addClass( "chain" );
[/javascript]
Ecco la nostra funzione completa e configurabile e senza dover riscriverla per modificare le caratteristiche dell’attributo border.
Non vi resta che immergervi nella creazione di plugin e vi raccomando di procedere in modo incrementale e di non dimenticare di includere jQuery prima del vostro codice; per tutto il resto affidatevi a firebug ( cos’é firebug?? leggete qui ).
