JavaScript  »  Articoli  »  Effetti e controlli Javascript 

Come molti di voi sanno, jQuery è una libreria Javascript nata per semplificare l'accesso agli oggetti del DOM dal lato del client e per realizzare delle chiamate Ajax. Tra i suoi punti di forza annovera la possibilità di estendere le funzioni di base con dei plugin esterni.

L'obiettivo di questo tutorial è di creare un'interfaccia a tab con l'uso di  JavaScript, di modelli CSS e di chiamate Ajax, in maniera semplice, impiegando una sola riga di codice Javascript nelle pagine HTML e sfruttando le potenzialità di jQuery. Per più complesse necessità segnalo che si può contare anche su un ottimo plugin come jQuery.tabs.js

Premessa

I menu a "schede", o a "linguette", in inglese tab, consentono di "nascondere" parti di testo di una pagina HTML, consentendo di snellire la quantità di informazioni presentate: in un "box dei contenuti" (di solito un container creato con la sintassi <div></div>) si vedrà un contenuto diverso a seconda della linguetta attiva. Inoltre, vi sarà una sola linguetta attiva per volta, linguetta che avrà un aspetto diverso dalle altre per identificare il suo stato.

Figura 1 - Esempio di pannello con tab

L'interfaccia a tab richiede dunque che, dopo che l'utente ha cliccato su una linguetta, uno script lato client - collegato all'evento onclick - esegua le seguenti attività:

1. modificare l'aspetto della linguetta attualmente attiva, rendendola come non attiva;
2. modificare l'aspetto della linguetta cliccata, mostrandola come attiva;
3. sostituire nel "box dei contenuti" il contenuto corrente con il contenuto associato alla linguetta attiva (oppure, a seconda della logica seguita viene nascosto il "box dei contenuti" attuale e mostrato il box associato alla linguetta attivata).

Normalmente i contenuti  delle varie parti sono inseriti all'interno della stessa pagina web in cui è presente la tab; con jQuery, si possono richiamare contenuti di file esterni in modalità Ajax.

Relativamente alla parte CSS, un articolo che descrive queste tecniche è Un menu a tabs con i CSS di Alessandro Fulciniti, o il più sofisticato Menu con tab grafiche dello stesso autore. Una raccolta di interfacce "tab-based" la troviamo nell'articolo 14 Tab-Based Interface Techniques.

Altri articoli

Altre guide

Altre newsletter