JavaScript  »  Articoli  »  JQuery 

Tabs Plugin

Il primo plugin analizzato permetterà di trasformare un semplice frammento HTML in una struttura molto di moda in questo periodo: quella basata su tab.

Il codice HTML deve includere una struttura di questo tipo:

<div id="tab-container-1">
  <ul>
    <li><a href="#tab-1-1"><span>One</span></a></li>
    <li><a href="#tab-1-2"><span>Two</span></a></li>
    <li><a href="#tab-1-3"><span>Three</span></a></li>
  </ul>
  <div id="tab-1-1">Io sono il primo tab</div>
  <div id="tab-1-2">Io sono il secondo tab</div>
  <div id="tab-1-3">Io sono il terzo tab</div>
</div>

Non si tratta che di un div (con id="tab-container-1") container per un elenco non ordinato (ul) e un numero di div pari al numero di tab. Da notare la semplice associazione tra l'attributo href degli elementi a e l'id dei div sottostanti.

Una volta realizzata questa struttura, basterà invocare il metodo tabs() sull'oggetto JQuery che rappresenta la lista ul:

$(document).ready(function(){
  $("#tab-container-1 > ul").tabs();
});

Ovviamente l'invocazione del metodo deve essere effettuata dopo che il documento è stato caricato.

Le funzionalità del plugin non finiscono qua. Sono infatti moltissime le personalizzazioni che si possono fare. Innanzitutto è possibile forzare l'apertura di una tab diversa dalla prima passando il suo indice al metodo tabs:

$("#tab-container-1 > ul").tabs(2); //apre in automatico la seconda tab

oppure abilitare o disabilitare, tramite metodi appositi, determinate tab, rendendole non solo non cliccabili ma anche leggermente trasparenti:

$('#container').tabsDisable(4); //disabilita la quarta tab
$('#container').tabsEnable(3);  //abilita la terza tab

Ecco un primo esempio di quanto visto fino a questo punto.

Una delle caratteristiche più innovative di questo plugin, però, è la possibilità di caricare i contenuti dal server tramite una richiesta asincrona con l'oggetto XmlHttpRequest.

Per caricare un documento esterno basterà modificare l'attributo href degli elementi a facendo riferimento ad una pagina o ad un url remoto; sarà il plugin a gestire tutto il resto:

<div id="tab-container-2">
<ul> 
<li><a href="ajax/tab1.html"><span>One</span></a></li>
<li><a href="ajax/tab2.html"><span>Two</span></a></li>
<li><a href="ajax/tab3.html"><span>Three</span></a></li>
</ul>
</div>

In questo esempio vengono caricate le pagine contenute nella cartella ajax in maniera totalmente automatica.

Il plugin prevede anche ulteriori funzionalità come per esempio l'utilizzo di animazioni (prime di tutte il fade e lo slide) per il cambiamento di tab:

$('#container').tabs({ fxSlide: true }); //apre le tab con un effetto di slide

e la possibilità di impostare particolari callback per i principali eventi scatenabili:

$('#container').tabs({
  click: function() {
    alert('Hai cliccato su un tab');
  }
}

Riguardo invece all'aspetto grafico, il plugin include anche un file CSS per creare in tempi rapidissimi un layout a tab. Ovviamente è possibile modificare questi stili per realizzare una interfaccia personalizzata. Per ulteriori customizzazioni rimando alla documentazione ufficiale raggiungibile a questo indirizzo: http://docs.jquery.com/UI/Tabs

Altri articoli

Altre guide

Altre newsletter