Slik arbeider du med faner i CSS3 - dummies

Mange utviklere bruker tabbedgrensesnitt for å redusere applikasjonskompleksiteten. Hvis du kan fokusere brukerens oppmerksomhet på ett element om gangen, Du reduserer potensialet for feilinngang. I dette CSS3-eksemplet begynner du med en enkel funksjonssamtale. (Du finner fullstendig kode for dette eksemplet i kapittel 06Widgets-mappen i den nedlastbare koden som faner. HTML.)

$ (funksjonen () {$ ("# Konfigurasjon").faner ();});

Trikset for dette eksempelet er i HTML-kodene, akkurat som det var for eksempelet Accordion-widget. Det er noen viktige forskjeller i hvordan du lager de to sidene for å oppnå ønsket utseende, som vist i følgende kode:

Forgrunnsfarge
Bakgrunnsfarge
Valg

Rød 

… Flere innganger og etiketter … Rød 
… Flere innganger og etiketter … Bruk spesielle lyder 
Bruk spesielle effekter

Legg merke til at elementene

er borte i dette tilfellet. I stedet for å bruke overskrifter for å definere separasjonen mellom elementer, gir du en uordnet liste (

) i stedet. Listen må inneholde en href til hver av elementene på siden. Det er ingen forskjell i sidens innhold. Du må også gi noen CSS til å formatere kontrollen som vist her.

#Configuration {width: 90%; text-align: center;} #Configuration div {text-align: left;}

I dette tilfellet definerer #Configuration-stilen den totale størrelsen på det flippede grensesnittet og det faktum at kategoriene har sentrert tekst. #Configuration div endrer innholdsstilling til venstre.



For å gjøre en endring, klikker du kategorien som inneholder informasjonen du vil se. Du gjør endringer som normalt. Hvis du klikker på Endre konfigurasjon-knappen, sendes endringene til serveren. Hvis du tester dette eksemplet ved å bruke samme prosess du gjorde for trekkspillet, får du akkurat de samme resultatene - bare grensesnittets utseende har endret seg.