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

Un'interfaccia a tab con il plugin jQuery.tabs

Mini-guida all'uso di uno dei più utili plugin per la libreria jQuery
Mini-guida all'uso di uno dei più utili plugin per la libreria jQuery
Link copiato negli appunti

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-nav necessarie 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 stile jquery.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.js
    - o critptata e compressa - jquery.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 caricato jquery.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:

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 linguette
3 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
usa per gestire le animazioni e che sono descritti alla pagina:
http://docs.jquery.com/Effects

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.

Ti consigliamo anche