jQuery: come costruire un’estensione Plugin

Come tutte le librerie di questo tipo anche jQuery permette di estendere le sue funzionalità base tramite dei veri e propri plugin. Rispettando le regole del suo funzionamento, cioè restituiendo sempre un puntatore all’elemento selezionato o a jQuery stessa, è possibile scrivere un plugin con poche righe di codice. Prendiamo come esempio il codice proposto in jQuery contro tutti: un benchmark con 5 browser che era (dopo la correzione segnalata da Luca):

1
2
3
4
5
$('h2.dropdown').css('cursor','pointer').click(
    function() {
        if( $(this).next().is(':hidden') ) $(this).next().slideDown(); else $(this).next().slideUp();
    }
);

Ipotizionamo di voler trasfromare questa “funzionalità” in un metodo richiamabile direttamente da jQuery. Chiameremo il nostro metodo simpleAccordion(). Prima di tutto creiamo un file con la sintassi:

[nomeplugin].jquery.js

1
jquery.[nomeplugin].js

Quindi nel nostro caso:

simpleaccordion.jquery.js

1
jquery.simpleaccordion.js

All’interno di questo file scriviamo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
 * @author Utente
 */

/**
 * simpleAccordion Plugin demo
 *
 */

(function($){
    $.fn.extend( {
        simpleAccordion: function(options){
       
            var defaults = {
                        speed: 'normal'
            };
            var options = $.extend(defaults, options);
           
            return this.each(function(){
                var __e = $(this);
                $(__e).css('cursor', 'pointer').click(function(){
                    if ($(this).next().is(':hidden'))
                        $(this).next().show( options.speed );
                    else
                        $(this).next().hide( options.speed );
                });
            });
        }    
    });
})(jQuery);

Questo file va caricato dopo la libreria jQuery, utilizzando la consueta forma di inclusione:

<script type="text/javascript" src="simpleaccordion.jquery.js"></script>

1
<script type="text/javascript" src="jquery.simpleaccordion.js"></script>

La nostra “estensione” è ora disponibile e possiamo provarla con il seguente codice:

1
2
3
$('h2.dropdown').simpleAccordion().click( function() { $(this).css('color','red')} );
// oppure, modificando i parametri di default
$('h2.dropdown').simpleAccordion( { speed: 'slow' } ).click( function() { $(this).css('color','red')} );

Nell’esempio qui sopra viene modificato il colore dell’elemento (h2) per verificare che la nostra estensione rispetti lo standard jQuery, ritornando il puntantore all’elemento selezionato (in questo caso h2.dropdown). Un possibile scheletro è quindi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 * sketch jQuery Plugin
 *
 */

(function($){
    $.fn.extend( {
        mymethod: function(options){
       
            var defaults = {};
            var options = $.extend(defaults, options);
           
            return this.each(function(){
                var __e = $(this);
                // todo
                // default options in "options"
            });
        }    
    });
})(jQuery);
  • http://lab.smashup.it/flip Luca

    Ciao,
    finalmente qualcuno che scrive in italiano come si costruisce un plugin con jquery!

    Ti faccio ancora una precisazione, posso? :)
    Solitamente viene usato il pattern jquery.[nomeplugin].js mentre tu hai invertito in [nomeplugin].jquery.js
    Tutto qua :)

    PS: Quando torni a parlare di Actionscript3? :)

  • http://www.undolog.com Giovambattista Fazioli

    @Luca: finalmente qualcuno attento! Mi piace questa precisazione… in effetti nella documentazione ufficiale di jQuery viene mostrata la sintassi che indichi anche tu, ovvero: jquery.[insert name of plugin].js.
    Errore mio… anche se, devo dire, non sarebbe male nemmeno [insert name of plugin].jquery.js, quasi ad indicarne una “estensione”. Comunque ricordo agli altri lettori che, ai fine dell’esempio, il tutto funziona anche con il filename “sbagliato”.
    Tornerò presto a parlare di Actionscript 3, addirittura – spero – in ambiente Flash CS4; appena rilasciato :)

  • Pingback: Simone D’Amico » Blog Archive » Creare un plugin per jQuery