Abbiamo visto nell'articolo Tab
semplici e accessibili con JQuery come costruire una interfaccia a tab seguendo una procedura passo per passo. Lo script da me proposto, pur
essendo semplice da utilizzare ed efficace, non è così sofisticato e articolato
come il plugin jquery.tabs.js -
descritto sul sito Stilbüro e creato da
Klaus Hartl.
Rimando all'articolo Tab
semplici e accessibili con JQuery, così come anche gli altri articoli richiamati
nello stesso per la necessarie conoscenze propedeutiche sull'interfaccia a tab.
Inoltre, per un'introduzione di carattere generale segnalo l'articolo (in inglese)
Tabbed
document interface, presente in Wikipedia.
Per comprendere come utilizzare al meglio questo plugin di jQuery, affronteremo
i seguenti argomenti:
- la struttura degli oggetti del DOM da utilizzare, che in genere è abbastanza
rigida - le regole e i metodi CSS necessari o opzionali
- la sintassi del plugin stesso, i suoi parametri e le opzioni;
Cosa ci serve ?
Per prima cosa suggerirei di vedere cosa fa il plugin stesso andando alla
pagina demo del suo
autore. Nella stessa pagina troviamo il link al
package della demo
stessa, cioè un file zippato contenente sia la stessa demo sia tutti i file necessari,
inclusa l'ultima versione del plugin.
Ma cerchiamo di andare per gradi. Nella package troviamo:
- una pagina html -
index.html -in cui sarà visualizzata l'interfaccia
a tab - un foglio stile -
jquery.tabs.css- in cui troviamo le regole
CSS che ci occorrono per la sola interfaccia a tab; in esso sono inserite le
classi.tabs-navnecessarie per creare l'interfaccia a tab a partire
da una semplice lista; in genere possiamo personalizzare a piacere queste classi,
usando la grafica che vogliamo, inclusi alcuni elementi grafici definiti in
file immagine (nella demo ètab.png). Il foglio stilejquery.tabs-ie.css,
definisce delle classi applicate solo per IE, e occorre solo per il particolare
stile grafico scelto dall'autore. - la libreria
jquery.js; nel package è presente la versione compressa
jquery-1.1.2.pack.js; - il plugin
jquery.tabs.js, o le sue versioni ridotta -
jquery.tabs.min.jsjquery.tabs.pack.js. - il plugin
jquery.history_remote.pack.js, realizzato dallo
stesso autore e descritto in
questa pagina; questo
plugin è utile per compensare il fatto che i click sull'interfaccia a tab non
vengono memorizzati nella cronologia del browser; questo plugin non è indispensabile
per fa funzionare l'interfaccia a tab, tuttavia se viene caricatojquery.tabs.js
lo riconosce e lo usa automaticamente.
Vediamo ora le istruzioni passo-passo per costruire la nostra interfaccia.
PASSO 1 - IMPOSTIAMO LE LINGUETTE E I CONTENUTI
Immaginiamo di volere visualizzare solo contenuti statici (non richiamati in
remoto via Ajax): quando clicchiamo su una linguetta visualizzeremo un contenuto
che si trova nella stessa pagina e non posto su pagine remote.
All'interno del body della pagina HTML
il plugin jquery.tabs.js richiede che si utilizzi una struttura
come questa:
<div id="Container">
<ul>
<li><a href="#Sezione-1">Tab 1</a></li>
<li><a href="#Sezione-2">Tab 2</a></li>
<li><a href="#Sezione-3">Tab 3</a></li>
</ul>
<div id="Sezione-1">
Testo da visualizzare cliccando su Tab1
</div>
<div id="Sezione-2">
Testo da visualizzare cliccando su Tab2
</div>
<div id="Sezione-3">
Testo da visualizzare in cliccando su Tab3
</div>
</div>
Abbiamo un elemento <div> con id=Container,
al cui interno troviamo un elenco non ordinato <ul>, seguita da alcune
sezioni <div>. Gli elementi
della lista sono link che puntano direttamente ad una di queste sezioni <div>
(ovvero, più precisamente, l'URI
dell'attributo href del link rimanda direttamente all'attributo
id della sezione). Le sezioni <div> contengono il testo da visualizzare.
Gli id delle sezioni <div> possono essere
tutti rinominati a proprio piacere. Se volessimo visualizzare delle icone sulle
linguette, i relativi tag <img> queste vanno posti dentro i tag
<a>.
PASSO 2 - SCEGLIAMO L'ASPETTO DELLA PAGINA
Fin qui non abbiamo realizzato altro che un elenco e delle aree div. Per mostrare
ciascun elemento della lista come tab dobbiamo realizzare ed applicare
un modello CSS, che potremo mettere nella stessa pagina - in un tag <style>
nella sezione <head> o, meglio, in un file esterno.
La cosa più facile è quella di scegliere da esempi già pronti, come quelli presenti
alle seguenti pagine:
-
Top 71 CSS Menus Navigation Tabs - Dynamic Drive's CSS Library:
Horizontal CSS Menus - SmashingMagazine.com:
14 Tab-Based Interface Techniques
Per esemplificare le operazioni non ho utilizzato il foglio stile presente nella
demo originale di jquery.tabs.js, ma ho adattato un esempio,
esattamente
basic-css-tabs-menu
su Dynamic Drive's.
Per adattare un qualunque menu-tab alle nostre esigenze dobbiamo considerare
che:
1. normalmente jquery.tabs.js opera sulle classi e non sugli identificatori,
pertanto se troviamo nel foglio stile dei metodi come questi:
#tabmenu{...}
#tabmenu ul{...}
......
dobbiamo trasformarli in
.tabmenu{...}
.tabmenu ul{...}
......
2. Il nome delle classi che jquery.tabs.js usa per default è
tabs-nav, mentre per la linguetta attiva sarà necessario
definire un metodo .tabs-nav li.tabs-selected a. Pertanto,
nel foglio stile scelto come esempio si dovrà sostituire il nome di classe
basictab con tabs-nav ed inotre il nome di classe
selected con tabs-selected
3. Si dovrà poi aggingere una classe per nascondere i contenuti non desiderati:
.tabs-hide { display: none;}
4. Devo far notare che molti modelli di interfacce a tab, reperibili agli indirizzi
indicati, necessitano una loro struttura html-css troppo diversa da quella vista
al "Passo 1", e pertanto adattarli alle nostre esegenze può essere molto complicato.
L'esempio 1 esemplifica i passaggi effettuati.
Se non vogliamo modificare nulla del foglio stile che abbiamo scelto per l'interfaccia
a tab, possiamo richiamare jquery.tabs.js con i parametri opzionali
navClass - selectedClass - disabledClass
- containerClass. Tali parametri indicheranno al plugin di usare i
nomi delle classi specificate al posto dei nomi di default.
L'esempio 2 esemplifica questa
seconda tecnica.
PASSO 3 - ATTIVIAMO L'INTERFACCIA A TAB
Includiamo nel modo consueto all'interno della sezione <head> i
due principali componenti Javascript che ci necessitano: la libreria jQuery e il
plugin jquery.tabs.js:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.pack.js"></script>
Ovviamente scriveremo:
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.tabs.js" type="text/javascript"></script>
se i due script sono stati messi nella sottocartella js/ della pagina
HTML. è possibile anche collegare le versioni
packed cioè compresse delle due librerie Javascript.
Subito dopo, per mostrare e inizializzare l'interfaccia tab, aggiungeremo una
sola riga di codice javascript:
<script type="text/javascript">
$(document).ready(function(){ $('#Container').tabs(); });
</script>
Analizziamo il codice. Al verificarsi dell'evento ready, cioè quando
tutti gli elementi del DOM sono stati inizializzati, ma prima di essere visualizzati,
viene eseguita una funzione contenente un'unica istruzione e cioè: $('#Container').tabs().
La funzione tabs() agisce sull'oggetto $('#Container'),
che è l'oggetto del DOM associato al div con id="Container",
che ricordiamo è il div che contiene tutta l'interfaccia a tab.
Per comprendere come opera la funzione tabs() del plugin, esaminiamo
le trasformazioni agli oggetti DOM che abbiamo ricavato per l'esempio
1 usando l'estensione Firebug
di Firefox. Di seguito mostriamo come è stata trasformata la pagina nel browser
subito dopo che la pagina è stata caricata e il codice jQuery è stato eseguito:
<div id="Container">
<ul class="tabs-nav">
<li class="tabs-selected"><a href="#Istruzioni">Modificazioni al foglio stile</a></li>
<li class=""><a href="#tabs-dd-htm">Mostra tabs-dd.htm</a></li>
<li class=""><a href="#tabs-dd-css">Mostra tabs-dd.css</a></li>
...
</ul>
<div id="Istruzioni" class="tabs-container" style="display: block;">...
</div>
<div id="tabs-dd-htm" class="tabs-container tabs-hide"> ....
</div>
.....
</div>
In colore rosso sono evidenziate le modificazioni apportate dinamicamente al
DOM dalla funzione tabs(): sono state attribuite delle classi all'elenco
e ai suoi elementi. Al primo elemento dell'elenco è stato attribuita la classe "tabs-selected".
Al div da visualizzare è attribuita la classe "tabs-container"
e lo stile "display: block;", mentre
ai div associati alle linguette non attive, e quindi da nascondere,
le classi "tabs-container tabs-hide".
PASSO 4 - USIAMO LE OPZIONI E I COMANDI AVANZATI
Le opzioni avanzate non le troviamo descritte all'interno del sito
http://stilbuero.de/jquery/tabs/,
ma direttamente all'interno del codice dello stesso plugin.
Vediamo, anzitutto degli esempi dei comando di creazione delle interfacce
tab-based:
| Codice da inserire | Descrizione |
| $('#container').tabs(); | Crea l'interfaccia tab con l'id container, con la linguetta di default (la prima) nello stato attivo |
| $('#container').tabs(2); | Crea l'interfaccia tab con l'id container con la seconda linguetta nello stato attivo |
| $('#container').tabs({fxSlide: true}); | Crea l'interfaccia tab con l'id container e usa l'effetto di animazione slide quando viene mostrato il contenuto associato alle linguette |
| $('#container').tabs({ listaparametri }); |
Crea l'interfaccia tab con l'id container con i parametri listaparametri |
I parametri sono delle coppie chiave: valore separate da virgole
e che consentono di fornire al plugin delle impostazioni opzionali:
| Chiave : valore | Descrizione |
| disabled : Array | La chiave disabled consente di creare una interfaccia tab con le linguette disabilitate indicate nell' Array. Ad esempio,il comando: $('#Container').tabs({disabled: [3, 4]});Crea l'interfaccia tab con l'id Container e disabilita le linguette3 e 4. Si intende che gli elementi dell'array sono numeri che possono partire da uno fino al numero di linguette presenti. Il valore di default è null (cioè nessuna linguetta è disabilitata) Una linguetta può essere anche disabilitata anche attribuendole la classe "tabs-disabled", |
| remote : boolean | La chiave remote, di tipo booleano specifica se il contenuto delle linguette, associato all'attributo href dei link delle linguette, è locale o remoto, e quindi richiamato con Ajax. Il plugin non consente di avere situazioni miste, ma solo linguette o tutte locali o tutte remote. Se si vuole gestire una situazione mista bisogna usare il parametro remote: false, e poi impostare il parametro onClick per gestire i link remoti. |
| fxFade : Boolean, fxSlide : Boolean fxSpeed : String|Number fxShow : Object fxHide : Object fxShowSpeed : String|Number fxHideSpeed : String|Number |
Parametri che consentono di specificare il modo in cui avvengono le animazioni durante la visualizzazione del contenuto associato a ciascuna linguetta. Per i dettagli delle chiave e dei valori dei parametri rimandiamo al testo del plugin. Si tratta comunque degli stessi valori che jQuery |
| fxAutoHeight : Boolean | La chiave fxAutoHeight indica al plugin che l'altezza del contenitore tab deve essere costante per tutti i contenuti delle linguette e corrispondente all'altezza del contenuto della linguetta più alto. Il valore di default è false. |
| Function onClick | E' una funzione che può essere invocata subito dopo che una linguetta è stata cliccata. La funzione passa 3 argomenti: il primo è la linguetta cliccata, il secondo l'elemento div del DOM che contiene la linguetta cliccata, il terzo è la linguetta che prima era attiva. Se la funzione ritorna false l'evento di click viene cancellato. Questo può essere utile ad esempio per una validazione di una form o quando bisogna gestire il caricamento di dati remoti |
| Function onHide | Simile alla funzione onClick, ma viene attivata subito dopo che quando una linguetta viene nascosta. |
| Function onShow | Simile alla funzione onClick, ma viene attivata subito dopo che la completa attivazione della linguetta. |
PASSO 5 - COMANDARE L'INTERFACCIA
L'interfaccia a tab può essere "comandata" attraverso del codice javascript,
ad esempio cliccando su un bottone di una form. Potete verificare il funzionamento attraverso questa demo.
PASSO 6 - Migliorare l'usabilità con il plugin jquery.history_remote.js
Se utilizziamo un'interfaccia a tab per mostrare i contenuti del nostro sito,
il browser non gestisce la cronologia delle tab, e perciò diminuisce l'accessibilità
e l'usabilità del sito. Il plugin jquery.history_remote.js invece consente
di aggiungere un bookmark all'URL attuale del browser, e così consente di usare
i bottoni "avanti" e "indietro" del browser.
Non c'è altro da fare che aggiungere nella sezione <head> della nostra pagina
l'istruzione per richiamare il plugin:
<script type="text/javascript" src="js/jquery.history_remote.pack.js"></script>
Il plugin jquery.tabs.js riconosce automaticamente la presenza del
jquery.history_remote.js durante l'inizializzazione della tab e non
bisogna fare altro.
Per ora è tutto. Tutti i file relativi agli esempi sono come al solito disponibili per il download. In un prossimo appuntamento andremo ad analizzare l'uso di jQuery e del plugin per richiamare contenuti remoti tramite richieste Ajax.
