JavaScript  »  Guide  »  Guida jQuery UI 

L'utilizzo delle schede (tab) per gestire blocchi di contenuto molto corposi o di diversa natura è ormai divenuta una soluzione comune nel campo dell'interface design, tanto da essere spesso preso come metro di valutazione dell'aggiornamento di un software.

Se prendiamo ad esempio il campo dei web browser, una delle pecche maggiormente messe in evidenza del vecchio IE6 era la mancanza della navigazione a tab ormai comune in Firefox ed Opera. Peraltro questa soluzione progettuale è diventata così pervasiva da aver invaso anche l'interfaccia di prodotti desktop come Office.

Per quanto riguarda il web, l'uso di tab è indicato nei casi in cui ci sia necessità di suddividere un contenuto in blocchi ben distinti, dando così più rilievo alle singole parti via via visualizzate dall'utente.

È invece buona norma evitare le tab (e altre strutture come gli accordion) nel caso in cui il contenuto sia sostanzialmente omogeneo o comunque presenti rimandi interni, in modo da evitare che l'utente debba saltare continuamente da una scheda all'altra.

Nella sua configurazione di default, il widget tab è richiamato con il seguente codice:

$('#tabs').tabs();

e crea una struttura di navigazione a schede a partire da una struttura HTML come la seguente (esempio live):

<div id="tabs">
    <ul>
    	<li><a href="#fragment-1"><span>Uno</span></a></li>
    	<li><a href="#fragment-2"><span>Due</span></a></li>
    	<li><a href="#fragment-3"><span>Tre</span></a></li>
    </ul>
    <div id="fragment-1">
    	<p>Testo 1</p>
    	<pre><code>$('#tabs').tabs();</code></pre>
    </div>
    <div id="fragment-2">
   	 Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
    </div>
    <div id="fragment-3">
    	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
    </div>
</div>

Sebbene questa struttura possa essere realizzata con una semantica più corretta, essa rimane comunque leggibile e navigabile anche quando CSS e JavaScript sono disabilitati, garantendo anche un elevato grado di accessibilità.

Come vedremo più avanti il widget non si limita ad applicare una serie di interazioni ed effetti grafici al contenuto preesistente, ma permette anche di caricare dinamicamente il contenuto delle schede, di aggiungere e cancellare schede on demand.

Opzioni

Come per altri widget complessi, è possibile adeguare in profondità l'aspetto e le funzionalità delle tab secondo le proprie necessità progettuali. Ecco le principali:

• ajaxOptions: (oggetto)
  un oggetto JavaScript contenente le opzioni per la gestione del caricamento di contenuti nelle tab via AJAX (vedere $.ajax per le proprietà disponibili).
• cache: (booleano - false)
  se impostato su true il contenuto delle schede caricato con AJAX sarà salvato nella cache. Per evitare che anche le richieste AJAX siano salvate nella cache del brower dovrete aggiungere l'opzione cache : false in ajaxOptions.
• collapsible: (booleano - false)
  permette di rendere collassabili tutte le schede, lasciando visibili solo le etichette.
• cookie: (oggetto - null)
  salva l'ultima scheda selezionata in un cookie, per essere riutilizzata come scheda di default quando l'utente ritorna sulla pagina. Richiede l'utilizzo del plugin cookie. L'oggetto passato come valore dell'opzione dev'essere formattato secondo quanto previsto dal plugin cookie, ad esempio: { expires: 7, path: '/', domain: 'jquery.com', secure: true }.
• event: (stringa - 'click')
  l'evento che permette di visualizzare il contenuto di una scheda. In alcuni casi potrebbe essere preferibile associare l'apertura di una scheda all'evento mouseover, tuttavia bisogna tener conto dei problemi legati al movimento involontario del mouse da parte dell'utente.
• panelTemplate / tabTemplate: (stringa)
  indicano un modello al quale applicare il contenuto di tab caricate in remoto (AJAX) rispettivamente per la scheda (default '<div></div>') e l'etichetta (default '<li><a href="#{href}"><span>#{label}</span></a></li>').
• selected: (intero : 0)
  indica l'indice (a partire da 0) della scheda di default al momento dell'inizializzazione del widget. Per non impostare alcuna tab passate il valore -1. Se richiamata dal metodo 'option', questa opzione restituirà l'indice della scheda attiva corrente sotto forma di intero.

L'elenco completo delle opzioni disponibili è in questo documento.

Altri articoli

Altre guide

Altre newsletter