fbpx
Richiedi un preventivo
Il Blog di SEO Cube

Rimani informato sulle ultime novità che ti aiuteranno a realizzare un eccellente sito web lato SEO!

18 Luglio 2013

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 ).

Richiedi un preventivo
X

Vuoi rendere più performante il tuo sito? Cerchi il supporto giusto per posizionare meglio le tue pagine su Google? Hai bisogno di una consulenza SEO?

Entra in contatto con noi e richiedi un preventivo gratuito: studieremo insieme la strategia più adatta alle tue esigenze e alle caratteristiche del tuo sito.

Compila il modulo se vuoi essere ricontattato dal nostro staff aziendale o utilizza gli altri canali per conoscere tutte le soluzioni che proponiamo per il tuo business, per avere informazioni più precise e per iniziare una collaborazione con SEO Cube.

I nostri recapiti
Via dell'Epomeo, 463 - 80126 Napoli - Tel. 081 588 11 68 / Fax 081 194 66 412

    Dati personali
    Inserire il Nome
    Inserire il Cognome
    Inserire il Numero di telefono
    Inserire un indirizzo email corretto
    Tipo di richiesta
    Messaggio