JavaScript  »  Articoli  »  JQuery 

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.

Altri articoli

Altre guide

Altre newsletter