Yariok.com

La semplicità di utilizzo di jQuery e la sue potenzialità, fanno di questo framework un indispensabile strumento per ogni Frontend Developer.  Utilizzando questa libreria mi è spesso capitato di avere una spiacevole sensazione di  deja vue, quando nel bel mezzo di una giornata ricca di consegne, mi sono ritrovato ad implementare funzionalità che differivano di poco da qualcosa che avevo già creato… ma che per forza di cose avevano bisogno di qualche ritocchino per funzionare come richiesto dal fantasioso ArtDirector (che quel giorno lasciato dalla ragazza e dall’indiscussa necessità di … va bhe… questa è un’altra storia … ).

Come ogni buono sviluppatore devastato dalla nevrosi ho capito che sarebbe stato il caso di affidarmi alla creazione di qualcosa di facilmente riutilizzabile, ma allo stesso tempo flessibile… Qui entrano in gioco i plugin.

Senza dubbio se conoscete jQuery vi sarà capitato di utilizzare un plugin, magari sfogliando la repository presente nel sito di jQuery… o semplicemente cercando su Google.  E’ tremendamente comodo, quanto facile e soddisfacente,  installare e utilizzare questo insieme di funzionalità che possono veramente salvarci dalla scrittura di decine di righe di codice.

Cosa costruiremo:

Lo scopo di questo post,  (oltre che farmi passare la voglia di bere e dimenticare quanto sia triste la nazionale) è la creazione di un semplice plugin per gestire un Toggle. Mi spiego meglio: creeremo una funzionalità che permetta allo sviluppatore di associare  al click di un elemento del DOM (bottone) lo switch  “visibile” <-> “non visibile” di un secondo elemento (contenuto). Tramite il plugin sarà possibile decidere quale cursore associare al bottone, a che velocità nascondere/visualizzare il contenuto e definire se il contenuto deve essere automaticamente nascosto al caricamento della pagina.
Per spiegarmi ancora meglio, vi allego direttamente qui l’esempio finale ottenuto tramite l’utilizzo del plugin e quindi riutilizzabile in mille altre situazione:

Come estendere jQuery:

Abbiamo due possibilità per  poter aggiungere funzionalità al Framework:

1) Estendere l’oggetto jQuery aggiungendo Funzioni
Funzioni che non dipendono da elementi del DOM e vengono richiamate direttamente tramite la sintassi :

$.myFunc();

2) Estendere l’oggetto jQuery.fn aggiungedo Metodi
Possiamo creare dei metodi direttamente legati a elementi del DOM, che vengono quindi richiamate a partire da una selezione. I plugin che scarichiamo dalla rete sono nella maggior parte dei casi strutturati in questo modo, ecco un esempio di chiamata :

$("div.black").myMethod();

In questo Post mi concentrerò sul secondo metodo, dato che è quello che più si addice, a mio parere, alle necessità che vi porteranno a creare il vostro plugin.

Pronti…. via

Estendere jQuery tramite jQuery.fn significa estendere il prototype dell’oggetto jQuery, fn è a tutti gli effetti una scorciatoia per il prototype di jQuery. Detto questo vediamo cosa scrivere nel nostro plugin, tenendo presente che il file nel quale scriveremo il codice deve seguire questa regola per il suo naming :  jquery.[nome_plugin].js (quindi nel nostro caso :jquery.toggler.js).

jQuery.fn.toggler = function() {
    alert("plugin toggler")
    return this;
};

Importando il file jquery.toggler.js nell’html e richiamando il metodo tramite la chiamata:

$(document).ready(function(){
   $().toggler();
});

Apparirà l’alert “plugin toggler” . Ok fino a qui niente di utile… ma potete iniziare a capire come viene semplicemente esteso il prototipo di jQuery e come possiamo richiamare il metodo appena creato.

Opzioni

Dato che il nostro plugin deve essere assolutamente flessibile, dobbiamo fare in modo che chi lo utilizzerà sia in grado di modificare facilmente alcuni parametri che renderemo volutamente accessibili modificando in questo modo il codice :

jQuery.fn.toggler = function(settings) {
    var config = {testo:"ciao"};

    if (settings) jQuery.extend(config, settings);

    alert("plugin toggler dice:\n"+ config.testo);
    return this;
};

Dovreste notare le seguenti differenze :

• La funzione ora accetta un parametro “settings”
• Abbiamo aggiunto la variabile config che rappresenta la nostra configurazione di default
• Tramite la funzione extend andiamo a miscelare config  con quanto eventualmente presente nella variabile settings
• Richiamiamo il valore di “testo” tramite config.testo

Ora se ricaricate la pagina html che ospita il vostro codice, dovreste notare che si è aggiunta la scritta “ciao” al testo precedentemente stampato nell’alert.

Il nostro obbiettivo però è fare in modo che il plugin sia configurabile…. quindi vediamo in che modo le modifiche fatte renderanno il plugin flessibile e adattabile alle scelte dello sviluppatore che lo utilizzerà.
In questa chiamata andiamo a specificare il parametro “testo”:

$(document).ready(function(){
  $().toggler({testo:"Sono un plugin!!"});
});

E nell’alert apparirà in più quanto scritto nel parametro.

Potete immaginare l’immensa capacità di personalizzazione che possiamo aggiungere ai metodi che crearemo.

Lanciare il metodo su tutti gli elementi selezionati

In questi due esempi non abbiamo selezionato degli elementi del DOM, è abbiamo lanciato direttamente il metodo senza alcun riferimento (per questi scopi avremmo potuto estendere jQuery tramite  il  metodo 1) che vi ho raccontato poco fa).
Ora ipotizziamo di voler lanciare l’alert per ogni elemento P della pagina, modifichiamo quindi la chiamata nel seguente modo :

$(document).ready(function(){
  $("p").toggler({testo:"Sono un plugin!!"});
});

Utilizzando quindi il selettore $(“p”) e modifichiamo il plugin in:

jQuery.fn.toggler = function(settings) {
    var config = {testo:"ciao"};

    if (settings) jQuery.extend(config, settings);
    this.each(function() {
        alert("plugin toggler dice:\n"+ config.testo);
    });
    return this;
};

la funzione this.each farà si che l’alert venga richiamato per ogni elemento identificato tramite il selettore $(“p”), modificate il vostro html aggiungendo dei P e noterete che per ogni P apparirà un message box.

Queste sono le basi da conoscere per poter creare un plugin, ora vi presenterò il codice che come promesso vi permetterà di creare uno slideToggle di un contenuto tramite il click di un elemento.

jquery.toggler.js

jQuery.fn.toggler = function(tog,settings) {
    var config = {
        speed: 'fast',
        cursor: 'pointer',
        hidden: true
    };

    //Modifica le configurazioni di default scelte per il plugin
    if (settings) jQuery.extend(config, settings);

    //Scorre tutti gli elementi presenti nel selettore tramite il quale è stato
    //richiamato il plugin.
    this.each(function() {
        //Modifica il cursore del item selezionato
        jQuery(this).css("cursor",config.cursor);

        //Nasconde o meno il contenuto dell'elemento "tog"
        if(config.hidden){
            jQuery(tog).css("display","none");
        }

        //Intercetta l'evento "click" sul item selezionato
        jQuery(this).click(function(){
            jQuery(tog).slideToggle(config.speed);
        });
    });

    return this;

};

Dovrebbe essere facilmente comprensibile, dato che è composto unicamente da quanto abbiamo visto poco fa. L’unica differenza sostanziale è dalla dal fatto che la funzione toggler accetta due parametri:
Il parametro tog, rappresenta il selettore per l’elemento che dovrà essere “nascosto/visualizzato” mentre settings identifica gli eventuali parametri decisi dall’utente. Di seguito è mostrata la chiamata e la porzione di html interessante per l’esempio:

<script type="text/javascript">
  $(document).ready(function(){
    $("#btn").toggler("#toggle");
  });
</script>

<p id="btn">Click Me</p>
<div id="toggle">Questo contenuto viene nascosto e visualizzato cliccando sulla voce ClickMe</div>

Viene chiamato il metodo toggler per l’elemento con ID #btn, il quale evento “click” verrà intercettato e gestito definendo l’apertura o chisura dell’elemento con ID #toggle.

Ecco il risultato, provate a cliccare su “click me”:

A questo punto, potete provare a modificare la chiamata html aggiungendo dei settings personalizzati per vedere come si comporta il metodo :

$(".btn").toggler(".toggle",{speed:"slow",cursor:"move"});

Grazie per essere arrivati fino a qui

Alla prossima!