Home » Web Development » jQuery » Costruire una tab con jQuery

Costruire una tab con jQuery

jquery tabs
Capita spesso di dover costruire un menu a tab e di non sapere come fare. Molti utilizzano dei plugin jQuery per costruire la tab e gestirne i contenuti, altri invece utilizzano la facile e pratica jQuery UI. Personalmente non amo “farcire” le mie pagine di plugin, sia per una questione di “pulizia” e “chiarezza” del codice, sia perchè usando molti plugin creati da terze parti si potrebbe incorrere in problemi di compatibilità sia tra i vari plugin sia con i diversi browser. Per questo motivo, quando è possibile, preferisco scrivere del mio codice javascript personale. Il caso della costruzione della tab è proprio uno di quei casi in cui non è necessario alcun plugin e con poche righe di codice javascript, unito a jQuery, si possono ottenere facilmente ottimi risultati. Vediamo come.

HTML

Per prima cosa dobbiamo fare una distinzione tra due parti dell’html: l’intestazione, con le voci del nostro menu, e il contenuto delle varie tab.
Costruiamo l’intestazione:

1
2
3
4
5
<ul id="intestazione_tab">
    <li id="primo_tab" class="voce_tab aperta">Primo</li>
    <li id="secondo_tab" class="voce_tab">Secondo</li>
    <li id="terzo_tab" class="voce_tab">Terzo</li>
</ul>

Da notare che è stata assegnata la classe comune voce_tab a tutti i li e ad ogniuno è stato dato un id univoco per identificarli. Inoltre è stata assegnata la classe aperta alla voce che volgiamo tenere aperta di default al caricamento della pagina.
Ora che abbiamo un lista con le voci del nostro menu possiamo darle tutti gli stili che desideriamo. Ad esempio, se li vogliamo in verticale o in orizzontale, se vogliamo utilizzare font particolari o colori di sfondo, ecc…
Nel nostro esempio disporremo le voci in orizzontale, come in una classica tab, e le coloreremo tutte di blu spaziandole una dall’altra.

1
2
3
4
5
6
7
8
9
10
11
12
ul#intestazione_tab {
    margin: 0;
    padding: 0;
}
ul#intestazione_tab li.voce_tab {
    background-color: blue;
    color: #FFFFFF;
    cursor: pointer;
    display: inline;
    margin: 5px 5px 0;
    padding: 5px 5px 0;
}

Ora che abbiamo disegnato l’intestazione andiamo a disegnare tanti div quanti sono le voci della nostra tab, in modo da avere ogni voce collegata al suo contenuto:

6
7
8
9
10
11
12
13
14
<div id="primo_contenuto" class="contenuto_tab">
    Questo è il primo contenuto
</div>
<div id="secondo_contenuto" class="contenuto_tab">
    Questo è il secondo contenuto
</div>
<div id="terzo_contenuto" class="contenuto_tab">
    Questo è il terzo contenuto
</div>

Come possiamo notare anche qui è stata data una classe comune ad ogni div contenitore ed è stato assegnato un id univoco per poterli distinguere. Un particoalre molto importante da notare è che per gli id è stato scelto un nome che potesse rincondurre alla voce nell’intestazione, ad esempio se l’intestazione è primo_tab il contenuto sarà primo_contenuto. Questa scelta “pensata” degli id sarà molto importante in seguito, per il funzionamento della tab.

Ora dobbiamo assegnare le regole di stile ai contenitori. Valgono le stesse cose dette per l’intestazione: possiamo scelgiere tutto quello che vogliamo per colorare, posizionare e disegnare la nostra tab, l’importante è che tutti i contenitore siano impostati in display:none;. Mentre metteremo in display:block; solo il contenuto della tab che vogliamo aperta di default.

13
14
15
16
17
18
19
20
21
22
div.contenuto_tab {
    border: 1px solid blue;
    display: none;
    height: 50px;
    padding: 5px;
    width: 300px;
}
div#primo_contenuto {
    display: block;
}

Nell’esempio si è scelto di spaziare il contenuto con un padding e di assegnare un border di 1 px al contenitore con lo stesso colore delle voci della lista. Come già detto, queste regole di css sono puramente d’esempio e sono liberalmente modificabili.

jQuery

Ora che abbiamo l’html pronto e correttamente strutturato non ci resta che scrivere lo script javascript per gestire il passaggio da una voce all’altra della tab.

Soffermiamoci a pensare all’azione e agli eventi che dovremo gestire: Alla pressione su una voce del menu, diversa da quella aperta, vogliamo che il contenuto precedentemente aperto sparisca e venga visualizzato il contenuto desiderato. È chiaro che quindi dovremo gestire un evento click sulle voci del tab, per cui al document ready andremo ad assegnare un handler>/em> ai li.voce_tab.

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
    $('li.voce_tab').click(function() {
        if(!$(this).hasClass("aperta")) {
            var id = $(this).attr("id").replace("_tab", "_contenuto");
            $(".voce_tab.aperta").removeClass("aperta");
            $(this).addClass("aperta");
            $(".contenuto_tab").hide();
            $("#"+id).show();
        }
    });
});

Con queste poche righe di codice abbiamo già una tab di base funzionante che possiamo abbellire e modificare. Ma analizziamo il codice passo passo.

3
if(!$(this).hasClass("aperta")) {

Per prima cosa viene eseguito subito un controllo per vedere se si è cliccato sulla voce del menu già aperta o meno. Infatti noi vogliamo che il nostro script operi solo in caso la voce cliccata non sia quella già aperta.

4
var id = $(this).attr("id").replace("_tab", "_contenuto");

In questo passaggio andiamo a prendere l’id della voce cliccata, usando la funzione jQuery .attr(). Grazie alla nomenclatura che abbiamo assegnato agli id dei nostri elementi HTML possiamo facilmente ricavare l’id del contenuto da aprire, partendo dalla voce cliccata. Infatti basterà sostituire il suffisso “_tab” con “_contenuto” utilizzando la funzione javascript .replace().

5
6
$(".voce_tab.aperta").removeClass("aperta");
$(this).addClass("aperta");

Andiamo a togliere la classe aperta alla voce precedentemente aperta per assegnarla alla voce cliccata. In questo modo sapremo sempre quale è la tab aperta.

7
8
$(".contenuto_tab").hide();
$("#"+id).show();

Non ci resta che nascondere tutti i contenuti con la funzione jQuery .hide(), per poi andare a visualizzare solo il contenuto desiderato, di cui abbiamo già l’id salvato nella variabile id con la funzione .show() sempre di jQuery.

Grazie a queste poche righe di javascript, unito a una buona scelta logica di classi e id abbiamo una semplicissima tab perfettamente funzionante. La “malizia” di questa logica di funzionamento infatti sta tutta nell’utilizzo di id pensati ad hoc per il nostro scopo.

Da qui in poi possiamo implementare moltissime altre funzionalità: Ad esempio un effetto di animazione per la chiusura e l’apertura di una tab con cui potremo sostituire i semplici .hide() e .show(). Oppure una modifica dello stile CSS della voce aperta per distinguerla visivamente da quelle chiuse, magari con un colore differente.

Una volta che abbiamo capito la logica del nostro script l’unico limite che rimane alla personalizzazione è la nostra immaginazione.

Resta sempre aggiornato

Stai tranquillo! Non invio E-mail di Spam e non faccio decine di invi ogni settimana. Ti invierò di tanto in tanto un messaggio per tenerti aggiornato sulle novità e sui nuovi articoli!
Email
Secure and Spam free...