JavaScript » Articoli » JQuery
Un'interfaccia a tab con il plugin jQuery.tabs
di: Giuseppe Celsi 02 Luglio 2007
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: |
| 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.
Ultimi articoli JavaScript
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida jQuery UICreare siti ricchi e dinamici con jQuery UI, il progetto ufficiale... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |