Hvordan man arbeider med Accordion i CSS3 - dummies

Du bruker trekkspillet i CSS3 for å skjule et sideelement fra visning. Når en bruker velger en kategori, blir elementene i den kategorien synlig, og elementene fra alle andre kategorier er skjult. Effekten er å fokusere brukerens oppmerksomhet og gjøre brukeren mer effektiv når det gjelder å utføre bestemte oppgaver. Følgende kode er alt du trenger for å gjøre denne funksjonen brukbar.

$ (funksjon () {$ ("# Konfigurasjon"). Trekkraft ();});

Koden er kortfattet, men hemmeligheten i dette tilfellet er måten du lager koder for siden din på. Legg merke til at Accordion-widgeten skjuler, se visningene som brukeren ikke fokuserer på. Når brukeren klikker Bakgrunnsfarge, er alternativene Forgrunnsfarge skjult fra visning. På samme måte klikker Alternativer på valgkontrollene.

Kontrollene i hvert område spiller ingen rolle for Accordion-widgeten, men HTML5-formatering gjør det. Dette skjemaet inneholder også en sende-knapp. Hvis du ikke konfigurerer kontrollene på riktig måte, blir innsendingsknappen en del av trekkspesjonseffekten, og du klikker ikke lenger på skjemaet. Her er en kondensert visning av HTML5 for dette eksempelet:

Forgrunnsfarge
Rød 

… Flere innganger og etiketter …

Bakgrunnsfarge
Rød 

… Flere innganger og etiketter …

Valg
Bruk Spesielle lyder 

Bruk spesielle effekter

Legg merke til at du må plassere overskriftskontrollgruppene innenfor et eget og merk det som du vil bruke til trekkraften. En separat huser de enkelte kontrollene for en bestemt gruppe. Send-knappen er en del av skjemaet, men det er utenfor konfigurasjonen.

Når du klikker på Endre konfigurasjon, ser du at skjemaet fungerer som det skal - ved å undersøke adressefeltinnholdet. Ved å bruke standardinnstillingene inneholder den resulterende nettadressen Accordion. html? Forgrunn = Rød og bakgrunn = Rød når du klikker på Endre konfigurasjon.