Le schede sono un modo efficace di creare diapositive con contenuto, navigazione dinamica o widget del risparmio di spazio per le pagine Web. Modelli di tabbable sono una soluzione efficace per gli sviluppatori che desiderano ottimizzare il loro processo, o progettisti che desiderano per creare un tema blog o e-commerce. Mentre le schede possono essere create utilizzando CSS e HTML esclusivamente, l'attuazione più efficace utilizza la funzione di schede jQuery UI per prestazione regolare che rimane coerente in tutti i browser. Quando combinato con le proprietà avanzate di HTML5, il risultato è una soluzione moderna e graziosa per organizzazione dei contenuti.

Istruzioni

1

Scarica HTML5 Boilerplate (Vedi il link nella sezione risorse), che servirà come base per il modello e risparmiare una grande quantità di lavoro. Decomprimere il file in località scelta e aprire il file "index. html" in un editor HTML o testo. Posizionare il cursore sulla riga vuota dopo "< div id ="main"ruolo ="main">" e premere "Invio" una volta.

2

Creare una lista non ordinata utilizzando il tag "ul" per tenere ogni nome della scheda e assegnargli una classe di "schede". Questa classe definisce come ogni scheda apparirà e aiuta a costruzione la struttura della barra di navigazione.

< ul classe = "schede" >

<li>Home</li>

<li>Portfolio</li>

<li>Bio</li>

<li>Contact</li>

</UL >

3

Collegare ogni nome della scheda nell'elenco utilizzando il tag "a" e utilizzare il nome della scheda per il valore di "href", preceduto da cancelletto (#). Il simbolo "#" agisce come un punto di ancoraggio, quali jQuery utilizzerà per mostrare il contenuto di ogni scheda quando un utente fa clic sulla scheda. Per esempio:

< ul classe = "schede" >

<li><a href="#home">Home</a></li>

<li><a href="#portfolio">Portfolio</a></li>

<li><a href="#bio">Bio</a></li>

<li><a href="#contact">Contact</a></li>

</UL >

4

Inserire un DIV con una classe di "tab_wrapper" sotto l'elenco. Questo contenitore conterrà il contenuto della pagina di ogni scheda.

< div class = "tab_wrapper" >

< / div >

Aggiungere DIVs per ogni pagina di contenuto all'interno del wrapper di scheda, dando a ciascuno la classe di "contenuto". Questa classe definisce il layout generale del contenuto della pagina, come imbottitura, margini e qualsiasi stili speciali solo per applicare le pagine scheda. Utilizzare il valore di "href" da ogni collegamento della scheda nell'elenco come il valore di "id" DIV:

< div class = "tab_wrapper" >

<div id="home" class="content">

<!--Content-->

</div>

<div id="portfolio" class="content">

<!--Content-->

</div>

<div id="bio" class="content">

<!--Content-->

</div>

<div id="contact" class="content">

<!--Content-->

</div>

< / div >

5

Sostituire "<! - contenuto-- >" con il markup per ogni scheda. Poiché si tratta di un modello, inserire solo una struttura di base, piuttosto che il contenuto specifico. Se si sta creando un modello per una piattaforma di blogging come WordPress o Tumblr, questo sarebbe un posto adatto per i tag di modello di contenuto. Sarebbe un esempio di come si potrebbe impostare una sezione di contenuto:

< div id = "casa" class = "contenuto" >

Titolo < h2 > < / h2 >

< articolo >

< sezione >

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

< / sezione >

< / articolo >

< / div >

6

Aprire il documento "Style. css" nella cartella "css" del modello. Scorri fino alla sezione "Stili primari" e aggiungere una definizione di stile per la classe di "schede". È necessario definire i parametri del primario sono un elenco-stile, l'altezza e la larghezza. Uno stile di elenco di "none" consente le schede di linea fino orizzontalmente nella parte superiore della scheda contenuto:

UL.Tabs () {

margin: 0;

padding: 0;

float: left;

list-style: none;

height: 32px;

border-bottom: 1px solid #999;

border-left: 1px solid #999;

width: 100%;

}

Aggiungere uno stile sotto questa definizione per il tuo link sulla scheda. Per creare l'aspetto delle "schede", è necessario utilizzare un tipo di visualizzazione di "blocco" e dare ogni link alcuni imbottitura. Altri parametri che è possibile aggiungere includono colore, stili di carattere e un bordo. Inoltre creare stili per il "hover" e stato "attivo" di ogni collegamento per aggiungere variazione di colore o il comportamento.

UL.Tabs li a {

display: block;

padding: 0 20px;

}

7

Creare stili per le lezioni di "tab_container" e "contenuto". Definire un overflow di "nascosto" e dare il vostro contenitore la stessa larghezza come le schede. Anche aggiungere un "chiaro: entrambi" parametro per mantenere il contenuto da saltare accanto la navigazione della scheda:

.tab_container () {

overflow: hidden;

clear: both;

width: 100%;

}

8

Aprire il documento "js", che si trova nella cartella "js" del modello. Aggiungere il codice riportato di seguito appena sotto la "* /" linea:

Web {

$(".tab_content").hide(); //Hide all content

$("ul.tabs li:first").addClass("active").show(); //Activate first tab

$(".tab_content:first").show(); //Show first tab content

//On Click Event

$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("active"); //Remove any "active" class

$(this).addClass("active"); //Add "active" class to selected tab

$(".tab_content").hide(); //Hide all tab content

var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content

$(activeTab).fadeIn(); //Fade in the active ID content

return false;

});

});

Salvare tutti i tre file. Ora avete un modello tabbable, che è possibile utilizzare per creare qualsiasi numero di temi e layout di sito Web.