Hvordan å arbeide med glidebryter i CSS3 - dummies

Slider gir brukeren muligheten til å legge inn en verdi visuelt - som en del av en helhet. I CSS3 sikrer en skyvekontroll at brukeren skriver inn en riktig verdi innenfor en rekke verdier, slik at du ikke trenger å bekymre deg for sikkerhetsproblemer eller feilverdier. Som et resultat gir skyveknappene et verdifullt middel for å tillate variabel inngang.

Følgende eksempel viser hvordan du bruker en glidebryter i søknaden din. Det begynner med HTML som brukes til å definere plasseringen og det grunnleggende utseendet til skyvekontrollen. (Du finner fullstendig kode for dette eksemplet i kapittel 06Widgets-mappen i den nedlastbare koden som Skyvekontroll. HTML.)

Bruke glidebryteren
0 50 Verdi:

Glidebryteren har en minimumsverdi på 0 og en maksimumsverdi på 50. Glidebryteren bruker også følgende CSS for å gi utgangen en mer behagelig utseende og å gjøre det mulig å markere begynnelsen og slutten av skalaen.

#Slider {bredde: 50%; margin: 30px;} #Left {posisjon: absolutt; topp: 15px; venstre: -5px;} #Right {posisjon: absolutt; topp: 15px; venstre: 99%;}

Som du ser, plasserer CSS begynnelsen og slutten av skalaen i en bestemt posisjon slik at den samsvarer med skyvekontrollens størrelse. Så langt brukeren vet, er skalaen og glidebryteren ett stykke, men de er faktisk to deler i koden. Resten av koden er skriptet som vises her.

$ (funksjon () {$ ("# Slider"). Glidebryter ({// Angi maksimal glidebryter verdi max: 50, // Utfør oppgaver når verdien endres. (event, ui) {// Viser gjeldende skyveverdi. $ ("# Verdi"). tekst ($ ("# Slider"). skyveknapp ("verdi"))}});})

I dette tilfellet angir koden den maksimale skyveverdien til 50. Minimumverdien er standard til 0. Du kan imidlertid angi både maksimums- og minimumverdiene til en hvilken som helst posisjon. Selv om eksemplet ikke viser det, kan Slider ha mer enn ett håndtak, så det kan representere et utvalg. Denne fleksibiliteten betyr at du kan be brukeren å legge inn både start og stopppunkt.

En av de mest brukte hendelsene er endring. Eksemplet viser den nye verdien hver gang brukeren fullfører håndtaket. Men måten du bruker utgangen på, avhenger av søknaden din. Vanligvis bruker du utgangen for å gi datainngang eller programkontroll. Det er imidlertid en god idé å vise den faktiske skyveverdien, slik at brukeren vet den faktiske inngangsverdien.