Le tab sono diventate di recente uno degli elementi più diffusi e adottati nelle interfacce web. Specialmente alla realizzazione di menu a tab con i CSS e Javascript sono stati dedicate decine di tutorial. In questo articolo ci occuperemo di una cosa diversa. Realizzeremo infatti un'interfaccia a tab per la visualizzazione di contenuti. Ecco subito l'esempio completo. Quando adottare una soluzione del genere lo lasciamo alla vostra fantasia e alla valutazione delle vostre esigenze. Un tipo di contenuto che si presta molto, ad esempio, sono proprio i tutorial passo per passo, magari per la spiagazione del funzionamento di un software o di un servizio web.
Useremo per lo scopo un ottimo script di Patrick Fitzgerald: JavaScript Tabifier. Per prima cosa, sarà meglio scaricare sin da ora il pacchetto zip che contiene tutti i file necessari allo svolgimento del tutorial.
Preparare la struttura
La base della nostra interfaccia a tab è costituita da una struttura HTML così concepita:
<div class="tabber">
<div class="tabbertab">
<h2>Tab 1</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>
<div class="tabbertab">
<h2>Tab 2</h2>
<p>Duis justo lectus...</p>
</div>
<div class="tabbertab">
<h2>Tab 3</h2>
<p>Aliquam porta. Cras dui est...</p>
</div>
</div>
Si inizia con un div a cui va assegnata la classe tabber. Come si vede, il div racchiude al suo interno tutti gli altri elementi.
Un'interfaccia a tab come quella che vogliamo realizzare è poi costituita da uno o più pannelli (tab) all'interno dei quali troverà posto il contenuto. Per ciascun pannello dovremo definire un div con classe tabbertab, un'intestazione (nell'esempio abbiamo scelto h2) e una parte che ospita il contenuto vero e proprio (nell'esempio è un paragrafo con solo testo, ma può andarci dentro di tutto).
Ecco come si presenta, definita questa struttura, il nostro esempio.
Inserire il Javascript
A questo punto passiamo ad inserire nella nostra pagina il riferimento al Javascript che si occupa di creare automaticamente l'interfaccia a tab a partire dalla struttura appena definita. Lo facciamo nel modo consueto (il nome del file, presente nello zip allegato, è tabber.js):
<script type="text/javascript" src="tabber.js"></script>
Come si vede dall'anteprima di questo secondo passo, apparentemente ben poco è cambiato. Notiamo solo la presenza di una lista che ha come item (sotto forma di link) le intestazioni (h2) del nostro pannello a tab.
In realtà, il Javascript è intervenuto pesantemente sulla struttura definita in precedenza, trasformandola in qualcosa di simile a questa:
<div class="tabberlive">
<ul class="tabbernav">
<li class="active">
<a href="javascript:void(null)" onclick="">
Tab 1</a>
</li>
<li>
<a href="javascript:void(null)" onclick="">
Tab 2</a>
</li>
</ul>
<div class="tabbertab">
<h3>Section One</h3>
Section one content.
</div>
<div class="tabbertab">
Section two content.
</div>
</div>
La bellezza dello script, così come è concepito, è che a noi non interessa nulla o quasi! Anche senza essere esperti possiamo ottenere il risultato voluto senza dover conscere dettagli di implementazione. I più avvezzi alla scrittura di codice JS o i più curiosi potranno ovviamente studiarsi per bene lo script e approfondirne il funzionamento, ma chi ha la sola necessità di crearsi da solo la sua intefraccia a tab può accontentarsi e passare subito al terzo passo.
Inserire il CSS
Siamo al terzo e ultimo passo, quello in cui daremo forma, tramite i CSS, alla struttura HTML creata dinamicamente dallo script. Agiremo quindi, più che altro, su liste, item di lista e link per definirne l'aspetto. Inseriamo allora il CSS example.css:
<link rel="stylesheet" href="example.css" type="text/css" media="screen" /></link>
Ecco cosa otteniamo.
La sintesi di tutto è questa: definiamo per bene la struttura come mostrato all'inizio, inseriamo il Javascript, personalizziamo l'aspetto (colori e altro) dell'interfaccia agendo unicamente sul foglio di stile. Quest'ultimo è stato commentato in italiano per facilitare l'opera di personalizzazione.
Una volta imparato il meccanismo di base, si potrà approfondire l'argomento andando a studiarsi le caratteristiche avanzate dello script.
