Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Un'interfaccia a tab con Javascript

Breve tutorial all'uso della libreria Javascript Tabifier
Breve tutorial all'uso della libreria Javascript Tabifier
Link copiato negli appunti

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.


Ti consigliamo anche