Come creare un'interfaccia a schede in AJAX per la programmazione HTML5 e CSS3 - manichini

Una tecnica importante nello sviluppo web HTML5 e CSS3 è l'uso di un'interfaccia a schede in AJAX. Ciò consente all'utente di modificare il contenuto di un segmento selezionando una delle serie di schede.

In un'interfaccia a schede, è visibile solo un elemento alla volta, ma le schede sono tutte visibili. L'interfaccia a schede è un po 'più prevedibile della fisarmonica perché le schede (a differenza delle intestazioni della fisarmonica) rimangono nello stesso posto.

Le schede cambiano i colori per indicare quale scheda è attualmente evidenziata, e cambiano anche lo stato (normalmente cambiando colore) per indicare che sono state posizionate al passaggio del mouse. Quando fai clic su un'altra scheda, l'area del contenuto principale del widget viene sostituita con il contenuto corrispondente.

Questo è ciò che accade quando l'utente fa clic sulla scheda.

Come la fisarmonica, l'effetto tab è incredibilmente facile da ottenere. Guarda il codice:

$ (init); function init () {$ ("# tabs"). schede ();} schede. html

Scheda Demo

Libro 1
Libro 2
Libro 3


Libro I - Creazione HTML Foundation







Fondamenti HTML audio
È tutta una convalida
Scelta degli strumenti
Gestione delle informazioni con elenchi e tabelle
Creazione di collegamenti con collegamenti
Aggiunta di immagini
Creazione forme


Libro II - Stile con CSS

Colorare il mondo
Stile testo
Selettori, Classe e Stile
Bordi e sfondi
Livelli di CSS


Libro III - Uso posizionale CSS per Layout

Divertimento con Fabulous Float
Creazione di layout di pagina mobili
Elenchi e menu stili
Utilizzo di Posizionamento alternativo

Il meccanismo per creare un'interfaccia basata su schede è molto simile a quello per fisarmoniche:

1. Aggiungi tutti i file appropriati.

   Come la maggior parte degli effetti dell'interfaccia utente di jQuery, hai bisogno di jQuery, dell'interfaccia utente jQuery e di un file CSS tema. È inoltre necessario accedere alla directory delle immagini per la grafica di sfondo del tema.

2. Costruisci HTML come di consueto.

   Se stai costruendo comunque una pagina web ben organizzata, sei già abbastanza vicino.

3. Costruisci un div che contiene tutti i dati a schede.

   Questo è l'elemento su cui farai la magia di jQuery.

4. Posiziona le aree di contenuto principale nelle div di nome.

   Ogni pezzo di contenuto che verrà visualizzato come pagina deve essere inserito in un div con un ID descrittivo. Ognuna di queste div deve essere posizionata nella scheda div.

5. Aggiungi un elenco di collegamenti locali al contenuto.

   Crea un menu di collegamenti. Posiziona questo nella parte superiore del div tabbed. Ogni link dovrebbe essere un collegamento locale a una delle div. Ad esempio, l'indice ha il seguente aspetto:

   
   Libro 1
   Libro 2
   Libro 3
   
   

6. Costruisce una funzione init () come al solito.

   Usa le normali tecniche jQuery.

7. Chiama il metodo tabs () sul div principale.

   Incredibilmente, una riga di codice jQuery fa tutto il lavoro.