Hvordan du lager et valgbart grensesnitt i CSS3 - dummies

Gjør det mulig å velge fra en liste over elementer i CSS3 redusert sjansen for at brukeren vil legge inn feil informasjon. Heldigvis kommer HTML5 med en rekke utvalgskontroller, men det kan du oppleve at disse kontrollene til tider ikke tilfredsstiller dine behov.

I dette tilfellet kan en tilpasset utvalgsteknikk implementert med jQuery UI kanskje svare på behovet. En utvalgssekvens kan bestå av a og en serie av

-kodene, som vist her. (Du finner fullstendig kode for dette eksemplet i mappen Kapittel 06Interactions av den nedlastbare koden som SelectContent. HTML.)

Rød
Grønn
Blå
Lilla

Legg merke til at de fungerer som en beholder og

-kodene fungerer som elementer i containeren. (Eksemplet inkluderer CSS-stiler for å formatere hver av selektorene, for eksempel å bruke en rød bakgrunn for det røde elementet - en #Selections-stil definerer bredden på selektorer, sammen med marginen og polstringene som brukes til å vise dem.)

Uansett hvordan du implementerer din egendefinerte liste (og det behøver ikke å være arrangementet vist), må det ha en container / elementarrangement som den som vises her. Når du har ordningen på plass, kan du opprette en valg- og sporingsmekanisme som den som vises i følgende kode:

// Opprett en matrise for å spore valgene. Var Valg = Ny Array (); // Behandle valgene og deaktiverer. $ (funksjon () {$ ("# Valg"). valgbar ({valgt: funksjon (hendelse, ui) {// Bekreft at varen ikke allerede er // blitt lagt til. id) == -1) // Legg til id av det valgte elementet // til gruppen. Valg. Trykk (ui valgt. id);}, ikke valgt: funksjon (hendelse, ui) {// Finn plasseringen av det valgte ikke-elementet i gruppen. Var Indeks = Valg. IndexOf (Ui. Uvalgt ID); // Fjern elementet. Valg. Splitt (Index, 1);}});}) // Vis resultatene. funksjon ShowResults () {alert ("Du har valgt:" + Valg);}

Array, Selections, holder oversikt over gjeldende valgliste. For å gjøre valgene, valgbare, kan du bruke metoden (selectable). Dette eksemplet bruker to hendelser, valgt og ikke valgt, for å holde oversikt over gjeldende valg. Når brukeren velger et nytt element, kontrollerer den valgte hendelseshandleren at elementet ikke allerede vises i Valg, og deretter skyver det nye elementet på Valg.

Den uvalgte hendelsesbehandleren må utføre to oppgaver. Først må den finne det ikke valgte elementet ved hjelp av indexOf () -metoden. For det andre må det brukes splice () for å fjerne det elementet fra Valg.

Dette eksemplet gir ingen fancy produksjon, men du kan se selv hvor godt valgmetoden fungerer. Klikk på Vis valg for å vise listen over valgte elementer. ShowResults () hendelseshåndterer viser en liste over valgene for deg. I et produksjonsprogram kan du like enkelt behandle hvert av de valgte elementene.

Et siste stykke til denne spesielle applikasjonen er behovet for å definere en spesiell stil. Du må gi et middel til displayet for å registrere den valgte tilstanden til et bestemt element, som betyr å gi verdier for #Selections. ui-valgt stil, som vist her:

#Selections. ui-valgt {bakgrunn: svart; farge: hvit;}

Når en bruker velger et element, blir bakgrunnen svart med hvit tekst, slik at brukeren kan se en visuell endring. Du kan også endre teksten som et annet middel for å hjelpe brukeren til å se valget.