Creare un plugin jQuery, per molti, potrebbe sembrare come scalare una montagna. Nulla di più sbagliato.
Premessa
Partiamo da alcuni concetti. Riscrivere codice già utilizzato altrove risulta non solo una perdita di tempo, ma anche un rischio di commettere errori da non trascurare. Come in molte altre occasioni, poter trovare una soluzione per rendere facilmente riusabile il codice é un vantaggio enorme per ovvii motivi.
In jQuery, questo significa, dopo aver creato e testato una funzionalità, realizzare un plugin apposito riutilizzabile nel migliore dei modi. Vediamo come partendo dal presupposto che dovete avere, logicamente, ben in mente la tipologia di funzioni che volete inglobare nel plugin e lo scopo principale di quest’ultimo.
L’ esempio sottostante provvederà a fornirvi le istruzioni principali per riuscire ad evidenziare, al passaggio del mouse, un elemento opaco. Ma cercate, soprattutto, di focalizzare l’attenzione sui vari passaggi che sono gli stessi in ogni processo di creazione di un plugin jQuery.
Il Nome
Come tutte le cose, anche un plugin jQuery avrà il suo nome che sarà del tipo :
jquery.nomeplugin.js
Logicamente il nomeplugin dovrà essere il più ‘parlante’ possibile al fine di rendere tutto più comprensibile soprattutto per chi dovrà utilizzarlo in futuro
In tal caso, ad esempio, potremmo chiamarlo : jquery.highlightscontent.js
La pagina Html e il CSS
Partiamo dalla parte più semplice ovvero l’html di base della pagina e il css associato. Nel nostro caso tutto é decisamente semplice :
……….
<body>
<div class=”stile”>
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
…..
con una classe stile che servirà solo a rendere un minimo accattivante l’esempio da un punto di vista grafico :
.stile{
width: 300px;
border: 1px;
background-color: #AAD4FF;
}
Dichiarazione del plugin
Entriamo nel vivo e presentiamo la dichiarazione di un plugin jquery che deve necessariamente seguire uno standard preciso :
(function($){
$.fn.highlight = function() {
return this.each(function() {
// codice da eseguire
});
};
})(jQuery);
Entriamo nel dettaglio del core del plugin.
La prima riga diviene basilare perché indica che vogliamo estendere jQuery. In seguito passiamo a dichiarare il nuovo metodo con la sintassi :
$.fn.nomemetodo = function()
Anche in tal caso il nomemetodo dovrà essere abbastanza esplicativo per ovvii motivi. E’ logico che, sebbene il nostro sia un esempio davvero minimale, in un plugin sarà possibile creare anche più metodi.
Passiamo alla sezione principale del nostro plugin. Abbiamo utilizzato un return del tipo each(function() semplicemente perché la nostra funzione dovrà essere applicata su ognuno degli elementi con le caratteristiche specifiche.
Se, nel nostro caso, scriveremo : $(“.stile”).highlight(), significa che la funzione sarà applicata ad ogni elemento con classe “stile”.
Vediamo qual è, pertanto, il codice da eseguire :
……….
return this.each(function() {
$(this).fadeTo(0,0.3);
$(this).mouseover(function(){
$(this).fadeTo(1000,1);
});
$(this).mouseout(function(){
$(this).fadeTo(300,0.3);
});
……….
Partiamo fornendo all’elemento un’opacità 0,3 in 0 secondi. All’evento mouseover, portiamo l’opacità al 100% in 1 secondo (1000 millisecondi), mentre, all’evento mouseout ritorniamo ad un’opacita o,3 in tre decimi di secondo.
Fatto questo siamo finalmente abili e arruolati per salvare il nostro plugin come jquery.highlightscontent.js.
Includere il plugin
Supponiamo, ora, di voler includere ed utilizzare il nostro plugin jQuery. L’inclusione é abbastanza facile e classica :
<script type=”text/javascript” src=”jquery-1.3.2.js”></script>
<script type=”text/javascript” src=”highlightscontent.js”></script>
mentre per utilizzarlo possiamo avere una cosa del tipo :
<script type=”text/javascript”>
$(document).ready(function(){
$(“.stile”).highlight();
});
</script>
Aggiungere opzioni
Il nostro plugin, nudo e crudo, é stato creato. Ma ora, come tutti i plugin che vogliono avere un minimo di successo e risultare davvero utili, occorre poter configurare i parametri.
Tra le tante opzioni a disposizione, noi proviamo a configurare solo l’opacità di partenza, la velocità con cui l’elemento sarà evidenziato e anche la velocità con cui l’elemento stesso torna allo stato iniziale.
Cosa cambia rispetto al codice visto prima?
In primis, la dichiarazione sarà del tipo :
$.fn.highlight = function(opzioni)
e poi passiamo a stabilire i parametri di default :
var defaults = {
start_opacity:0.3,
in_speed:1000,
out_speed:300
};
Quindi passiamo a legare i valori di default con le opzioni collegate alla funzione :
var opzioni = $.extend(defaults, opzioni);
Sarà ora, quindi, facile utilizzare opzioni con i valori di default in modo simile al seguente :
return this.each(function() {
$(this).fadeTo(0,opzioni.start_opacity);
$(this).mouseover(function(){
$(this).fadeTo(opzioni.in_speed,1);
});
$(this).mouseout(function(){
$(this).fadeTo(opzioni.out_speed,opzioni.start_opacity);
});
});
Ma i valori di default non sono modificabili in corso? Certamente si…e potete operare come segue :
<script type=”text/javascript”>
$(document).ready(function(){
$(“.stile”).highlight({
start_opacity:0.4,
in_speed:400
});
});
</script>
In tal caso, i nuovi valori dichiarati saranno utilizzati dalla funzione.
Come avrete notato, leggendo attentamente questa miniguida, creare un plugin jQuery non é assolutamente complesso, ma, certamente, occorre essere attenti nel seguire alcune regole e applicarle in modo preciso.
