Share
Una delle maggiori sfide per i web designer è trovare modi per inserire molte informazioni su una pagina senza perdere l'usabilità. Il contenuto a schede è un ottimo modo per gestire questo problema ed è stato ampiamente utilizzato sui blog di recente. Oggi costruiremo una semplice casella informativa con schede in HTML, quindi renderla funzionante usando alcuni semplici Javascript, e alla fine otterremo la stessa cosa usando la libreria jQuery.
Per prima cosa, abbiamo bisogno di qualcosa che sembri fantastico. Quindi, un breve viaggio a Photoshop e voilà abbiamo un bel mockup di come dovrebbe essere il nostro componente a schede. È abbastanza semplice con alcune sfumature extra per renderlo fantastico. Puoi prendere il file PSD di Photoshop per questa immagine se vuoi dare un'occhiata più da vicino, ma è piuttosto semplice e possiamo realizzarlo dal JPG piatto in realtà.
La prima cosa da fare quando si costruisce, naturalmente, è avere un'idea approssimativa di come lo si farà. Questo diventa più facile più cose hai sviluppato. Guardando questa immagine direi che la cosa migliore da fare è:
Quindi, per riassumere, sarà qualcosa del genere:
Non preoccuparti se guardare quell'immagine non ti fa immediatamente pensare a quella struttura. A volte devi solo fare le cose per tentativi ed errori. Nel mio caso ho fatto queste piccole cose a schede un paio di volte e so che questo è un modo molto semplice per crearle.
Inoltre, è bello pensare a una struttura come questa prima di avere un sacco di nomi di classi, id e contenuti perché può diventare difficile vedere la foresta dagli alberi in seguito. Soprattutto quando aggiungi il contenuto per tutte le diverse schede.
Quindi ora che abbiamo un'idea di come costruire la nostra struttura, affrontiamola!
Ora, se hai seguito i miei tutorial su PSDTUTS, saprai che adoro un buon background sfumato. Quindi, prima ancora di iniziare con la struttura a schede, facciamo un bel background!
Apri Photoshop, crea un documento 1000 x 1000 pixel e disegna un gradiente radiale piacevole (sottile) come quello mostrato di seguito. Nota che ho estratto dal centro / alto e ho fatto in modo che il gradiente fosse finito prima che raggiungessi il bordo del documento. Ciò significa che posso impostare il colore di sfondo in HTML per essere il colore più scuro e se qualcuno allunga la finestra del browser, sarà senza cuciture.
Quindi crea una nuova directory per il progetto, quindi crea una seconda directory al suo interno chiamata immagini e salva quell'immagine dentro come background.jpg. Quando si salva l'uso File> Salva per Web e dispositivi e seleziona JPG con un'impostazione di qualità di circa 70. Ciò risulta in una dimensione del file di 16kb che non è male. C'era un tempo in cui dovevi davvero scroccare e salvare, ma ora vuoi solo assicurarti di non essere stupidamente dispendioso con le dimensioni dei tuoi file.
Ora creiamo un documento HTML e scriviamo in qualche codice:
Struttura a schede - normale
Questa sarà la base del nostro HTML. Ora creeremo il style.css documentare e scrivere nel modo seguente:
body background-image: url (images / background.jpg); background-repeat: no-repeat; posizione di sfondo: centro in alto; background-color: # 657.077; margin: 40px;
Un paio di cose da notare qui:
Puoi vedere il documento HTML risultante qui. Tieni presente che se ridimensioni la finestra è un gradevole sfondo senza gradazioni. Wunderbar!
Successivamente aggiungiamo la nostra struttura alla pagina in modo che possiamo iniziare a modellarla.
Struttura a schede - normale
Quindi, come puoi vedere, ho utilizzato fondamentalmente la stessa struttura di cui ho parlato nel passaggio 2. Ne ho aggiunti alcuni ids e classi e alcuni contenuti reali. Ecco il ragionamento dietro ciò che ho fatto:
Accentsconagua
.tabbed_area ul ma questo potrebbe confondersi con il futuro OK così senza stili non sembra molto ... ancora!
Ora con gli elementi di stile, penso che sia meglio lavorare dall'elemento esterno in. Quindi inizieremo con questo elemento -
#tabbed_box margin: 0px auto 0px auto; larghezza: 300px;
Ora faremo l'area della direzione. Possiamo modellare l'intestazione in questo modo:
.tabbed_box h4 font-family: Arial, Helvetica, sans-serif; font-size: 23px; color: #FFFFFF; letter-spacing: -1px; margin-bottom: 10px; .tabbed_box h4 small color: # e3e9ec; font-weight: normale; font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; text-transform: uppercase; position: relative; top: -4px; a sinistra: 6px; letter-spacing: 0px;
Alcune cose da notare qui:
Avanti daremo il nostro interiore
.tabbed_area border: 1px solid # 494e52; background-color: # 636d76; padding: 8px;
Questo dà solo un po 'di definizione e distanzia gli elementi interni dai lati. Puoi vedere dove siamo nell'immagine qui sotto.
Lavorando dall'esterno, abbiamo dato un po 'di forma al nostro elemento ed è molto più facile vedere come andrà a finire. Inoltre spesso si avranno dei vincoli dall'esterno, per esempio la scatola potrebbe dover essere inserita in una colonna di certa larghezza. Infine, è anche una buona idea andare fuori, perché qualsiasi eredità di stile è chiara. Per esempio, se sei andato dall'altra parte e hai fatto gli elementi interni per primi, gli stili successivi potrebbero influenzare quegli elementi interni e avresti bisogno di tornare indietro e riadattare comunque.
Ora arriviamo alle cose buone: le schede! Se aggiungiamo questo piccolo pezzo di CSS, faremo molto per rendere le schede più simili a schede:
ul.tabs margin: 0px; padding: 0px; ul.tabs li list-style: none; display: inline;
Questo codice dice che il
Ci sono in realtà altri valori di visualizzazione che puoi leggere su Quirksmode.
Ovviamente le nostre 'schede' sembrano ancora piuttosto schifose, quindi diamo loro uno stile. Abbiamo usato il
ul.tabs li a background-color: # 464c54; color: # ffebb5; imbottitura: 8px 14px 8px 14px; text-decoration: none; font-size: 9px; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; border: 1px solid # 464c54; ul.tabs li a: hover background-color: # 2f343a; border-color: # 2f343a; ul.tabs li a.active background-color: #ffffff; color: # 282e32; border: 1px solid # 464c54; border-bottom: 1px solid #ffffff;
Quindi quello che abbiamo fatto qui è:
Ci sono due cose che dobbiamo fare per far funzionare le aree di contenuto. La prima è che dovremmo far sparire le seconde due aree e la seconda è farle apparire in modo appropriato.
.contenuto background-color: #ffffff; padding: 10px; border: 1px solid # 464c54; # content_2, # content_3 display: none;
Vedrai che la prima parte del CSS dice al browser con cui tutti gli elementi class = "content" dovrebbe essere bianco con imbottitura e un bordo (lo stesso colore delle schede). La seconda parte dice che gli elementi con id = "content_2" e id = "content_3" dovrebbe avere un display: nessuno, o in altre parole dovrebbe essere invisibile.
In seguito, quando aggiungiamo alcuni Javascript, possiamo usare lo script per alternare display: none e display: block per renderli visibili e nascosti.
Ecco come stanno le nostre schede, puoi anche vedere una versione HTML di dove ci troviamo. Come puoi vedere ora sembra piuttosto vicino, ma dobbiamo correggere la spaziatura e aggiungere del contenuto reale.
Risolvere il problema della spaziatura è in realtà semplicemente una questione di aggiungere margini al
ul.tabs margin: 0px; padding: 0px; margin-top: 5px; margin-bottom: 6px;
Per essere onesti, non sono sicuro del motivo per cui si è verificato questo problema di spaziatura. A volte l'HTML mi confonde, ma aggiusto solo le impostazioni fino a quando le cose non cambiano da sole. A volte nel processo capisco qual è stata la causa, a volte no. Immagino che quello che sto dicendo sia che, a meno che tu non abbia intenzione di entrare davvero nei dettagli nitidi delle specifiche w3, prima o poi ti imbatterai in alcuni problemi che non puoi spiegare. Non lasciarti abbattere, basta regolare fino a trovare una correzione o una soluzione.
Ora aggiungeremo del contenuto nell'area del contenuto. L'ho evitato prima perché volevo mantenere l'HTML semplice. Ecco alcuni:
Sfoglia il sito Seleziona una scheda
Quindi qui ho appena aggiunto un po 'di liste non ordinate alle tre aree di contenuto. Per inciso sto prendendo in giro questo come se dovesse essere utilizzato su un blog WordPress. Ma potresti davvero usarlo per tutti i tipi di cose. La nuova homepage di FlashDen su cui ho lavorato alcuni giorni fa utilizza le aree a schede per mostrare diversi tipi di file recenti.
Ora aggiungeremo alcuni stili per renderli un po 'più belli:
.contenuto ul margin: 0px; imbottitura: 0px 20px 0px 20px; .content ul li list-style: none; border-bottom: 1px solid # d6dde0; padding-top: 15px; padding-bottom: 15px; font-size: 13px; .content ul li a text-decoration: none; color: # 3e4346; .content ul li a small color: # 8b959c; font-size: 9px; text-transform: uppercase; font-family: Verdana, Arial, Helvetica, sans-serif; position: relative; a sinistra: 4px; top: 0px;
Ancora una volta stiamo stilando le nostre liste. Questa volta invece di dare il
Altre cose da notare:
Ecco come appare la nostra pagina:
Nel complesso è abbastanza buono, tranne che abbiamo uno troppi confini. Ma va bene, possiamo aggiustarlo con uno pseudo-selettore magico chiamato 'ultimo bambino' come questo:
.content ul li: last-child border-bottom: none;
Questo stile si applica solo all'ultimo elemento del suo genere - vale a dire quest'ultimo
Ora c'è solo un ulteriore passaggio per completare il nostro HTML, e cioè alcune belle immagini di sfondo ai nostri elementi. Come ricorderai alcuni degli elementi nel mio file PSD originale avevano sfumature sottili. Quindi ora è il momento di aggiungerli. Ci sono tre bit graduati: (a) nella scheda attiva (b) nelle schede inattive e (c) nella parte inferiore dell'area del contenuto. Ecco le tre immagini di cui avremo bisogno:
Sono un po 'difficili da vedere, ma fondamentalmente sono piccole fette di gradiente che imposteremo come immagini di sfondo ripetute. Ecco un primo piano di quello per la scheda (nota che ho aggiunto un bordo sottile attorno ad esso in modo che sia un po 'più chiaro. Nota che c'è una linea bianca da 1px in alto..
Quindi abbiamo bisogno di apportare alcune modifiche al codice CSS per aggiungere immagini di sfondo, come questo:
ul.tabs li a background-image: url (images / tab_off.jpg); background-repeat: repeat-x; background-position: bottom; ul.tabs li a.active background-image: url (images / tab_on.jpg); background-repeat: repeat-x; background-position: top; .content background-image: url (images / content_bottom.jpg); background-repeat: repeat-x; background-position: bottom;
Si noti che in realtà ho inserito questi bit aggiuntivi con il resto delle loro definizioni di classe, ma per brevità ho appena copiato in estratti. Come puoi vedere in tutti e tre i casi, stiamo ripetendo un'immagine di sfondo solo lungo l'asse x. Nel caso di due (la scheda off e l'area del contenuto) lo stiamo facendo lungo il fondo, e nell'altro è lungo la parte superiore.
E con questo abbiamo ufficialmente completato la parte HTML / CSS di questo tutorial. Puoi vedere la pagina con lo stile finito qui.
La prossima cosa che dobbiamo fare è aggiungere alcuni Javascript per fare in modo che le nostre schede facciano qualcosa. Per prima cosa lo faremo a mano e poi ti mostrerò come usare una libreria Javascript per realizzare la stessa cosa. Ora dovrei sottolineare che non sono un esperto di JS, e spero di coinvolgere alcuni veri maestri programmatici per scrivere tutorial qui, quindi se ti accorgi di fare qualcosa che è un po 'discutibile, sentiti libero di lasciare un commento e Ritornerò il tutorial e renderò un po 'più buone pratiche!
Quindi per prima cosa descriviamo cosa vogliamo fare quando qualcuno fa clic su una scheda. Vogliamo disattivare la nostra scheda attuale, accendere quella nuova, nascondere l'area del contenuto corrente e mostrarne la nuova.
Ora potremmo avere qualcosa di intelligente che elabori la scheda attualmente attiva e la disattiva, ma è più facile passarle e spegnerle tutte e quindi accendere quella che vogliamo. Allo stesso modo per le aree di contenuto, possiamo nasconderne tutte e tre e quindi mostrare quello che vogliamo. Questo ci evita di dover elaborare lo stato attuale delle cose.
Gli elementi con cui stiamo lavorando sono simili a questo:
Ora in Javascript possiamo trovare un elemento semplicemente usando il suo id e il metodo document.getElementById (). Quindi document.getElementById ('content_1') ci darebbe la prima area di contenuto. Possiamo quindi impostare lo stile di visualizzazione su none utilizzando questa linea:
document.getElementById ('content_1'). style.display = 'none';
Allo stesso modo per vedere una classe che usiamo:
document.getElementById ('tab_1'). className = 'active';
Quindi a veramente approccio semplice sarebbe scrivere:
function tabSwitch (new_tab, new_content) document.getElementById ('content_1'). style.display = 'none'; document.getElementById ('content_2'). style.display = 'none'; document.getElementById ('content_3'). style.display = 'none'; document.getElementById (new_content) .style.display = 'block'; document.getElementById ('tab_1'). className = "; document.getElementById ('tab_2'). className ="; document.getElementById ('tab_3'). className = "; document.getElementById (new_tab) .className = 'active'; Questo sarebbe inserito in un file, chiamiamolo functions.js. Chiameremo quindi questo script modificando i nostri collegamenti alle schede su:
E abbastanza sicuro, ecco un esempio del nostro esempio javascript super semplice. Funziona!
Ora ci sono alcuni problemi molto ovvi con questo script. Non ultimo dei quali è che se aggiungi un'altra scheda dovrai cambiare la tua funzione. E se avessi più di una serie di schede su una pagina avrai bisogno di due funzioni! Quindi rinforziamola un po ':
function tabSwitch_2 (attivo, numero, tab_prefix, content_prefix) per (var i = 1; i < number+1; i++) document.getElementById(content_prefix+i).style.display = 'none'; document.getElementById(tab_prefix+i).className ="; document.getElementById(content_prefix+active).style.display = 'block'; document.getElementById(tab_prefix+active).className = 'active';
La nostra seconda versione della funzione di commutazione delle schede richiede un paio di argomenti, ma è un po 'più intelligente. Presuppone che abbiamo una serie di schede e un insieme di aree di contenuto e hanno id che hanno un prefisso e una serie di numeri incrementali. Cioè tab_1, tab_2 ... e content_1, content_2 ...
Il primo argomento che la nostra funzione assume, 'attivo', è la scheda numero / contenuto che vogliamo. Il secondo argomento, 'numero', è il numero di schede utilizzate. Il terzo e il quarto argomento sono i prefissi usati negli id dei nostri elementi.
La funzione ha quindi un ciclo for che passa da 1 al numero di tab e li spegne tutti, quindi cambia i due che vogliamo nuovamente alla fine. In altre parole, è la stessa sceneggiatura di prima, ma l'abbiamo resa un po 'più intelligente.
Quindi nel nostro esempio per chiamare la funzione avremmo questo codice:
Ciò significa che in seguito, se avessimo un secondo set di schede, potremmo dare loro prefissi di id diversi e usare sempre la stessa funzione.
Visualizza il secondo esempio di javascript.
Ultimamente sono apparse molte librerie Javascript, e in effetti ce ne sono (almeno) due appositamente create per ottenere questo effetto tab: MooTabs e DomTab. Non ho nemmeno usato, ma da una breve occhiata sembravano abbastanza usabili.
Tuttavia, poiché ho sentito molto sulla libreria jQuery, ho deciso di provare lo stesso cambio di tabulazione usando jQuery. Ho la sensazione che la mia soluzione potrebbe usare un po 'di lavoro, ma è comunque interessante da esaminare.
Quindi, prima vai sul sito jQuery e scarica l'ultima versione della loro libreria di script.
jQuery offre un sacco di funzioni che ti permettono di selezionare gruppi di cose. Ad esempio se si desidera selezionare ogni elemento della pagina che è un collegamento (ad es. elementi) e poi farli svanire, metteresti questo nella tua la zona:
La prima riga aggiunge la libreria di script jQuery. L'area principale dello script è all'interno di un pezzo di codice simile a questo: $ (Document) .ready (function () ); Questo in pratica dice al tuo browser di eseguire tutto dentro quando colpisce la pagina. Quindi nel nostro caso gli stiamo dando il comando:
$ ( "A") slideUp ().;
Questo dice trova tutto ciò che è un ed esegui slideUp () su di esso. O in altre parole: trova tutti i link e falli svanire con un effetto di scorrimento. Prova ad aggiungere lo script a una pagina e caricalo e vedrai sparire tutti i tuoi link. Piuttosto pulito eh?
In ogni caso ci sono un sacco di modi per selezionare le cose, e puoi leggere su di esse nell'API e nella documentazione. Puoi fare cose come trovare ogni elemento con una certa classe, un determinato id e così via. Ad un certo punto scriverò una corretta introduzione al tutorial di jQuery qui, ma per il momento, quel piccolo intro farà - oltre ad avere solo un'ora di esperienza con jQuery sospetto che sarebbe stata una specie di travestimento per me scrivere un intro ad esso!
Così dopo una piccola sperimentazione ho trovato un modo per usare jQuery per far entrare e uscire le mie schede. Per prima cosa ho modificato i miei collegamenti per non avere javascript, ma piuttosto per avere un titolo attributo e un extra class = "tab". Si noti che è possibile assegnare un elemento a due classi in questo modo: class = "scheda attiva".
Ora usando questi due elementi, in pratica posso ottenere tutti i collegamenti con la 'scheda' della classe e posso anche trovare qualsiasi elemento il cui id sia uguale all'attributo title del link appena cliccato. Ecco la sceneggiatura (collocata nel file
) che spiega questo un po 'meglio:Quindi ho aggiunto commenti per aiutare a spiegare. Fondamentalmente quando si fa clic su qualsiasi collegamento con la 'scheda' della classe, facciamo tutto all'interno di quella funzione.
E per vedere l'ultimo esempio di lavoro con jQuery, clicca qui!
OK così pochi minuti dopo aver fatto il mio esempio di jQuery, ho scoperto che in jQuery c'è in effetti un controllo visivo speciale 'tabs'. Dovrò giocare domani con questo, perché senza dubbio renderà la vita molto più semplice!
Nel frattempo spero che ti sia piaciuto il tutorial e ne hai ricavato qualcosa.
