Du vil ofte finne deg selv ved hjelp av toggle-skyveknapper som et trendy alternativ til boksene. I dag skal vi lage en ved hjelp av vanlig CSS3 og HTML.
Opprett et nytt HTML-dokument og legg til en span
tag med en klasse av veksle-bg
. Dette vil være bakgrunnsområdet for byttet.
For å gjøre funksjonen funksjonell, bruker vi litt usynlig radioinnganger
. Disse har bare et par krav:
Jeg skal bruke på
og av
som mine verdier, med et navn på veksle
, men du kan endre dette avhengig av bruken din. For eksempel vil du kanskje bytte mellom ja
og Nei
.
Legg til inngang
til span
du opprettet tidligere. Koden din skal se slik ut:
Avhengig av din egen bruk, kan du også sette alt dette i et skjema.
Den lille sirkelen som vil være bryteren, er bare en span
at vi skal style senere. Gi span
en klasse av bytte om
og sett den inn etter innganger
.
Dette er ditt endelige HTML-oppslag:
For å holde det enkelt, begynner vi med det minste minimumet som kreves for å få dette til å virke. Legg til følgende i CSS-dokumentet ditt (eller til din stil
element hvis du bruker inline CSS.)
.toggle-bg bakgrunn: # 222; / * Du vil se at området blir byttet, men vær så snill å endre fargen * / display: block; / * ... Så at vi kan sette en høyde og bredde * / float: left; / * ... Så at den ikke tar opp hele bredden på siden * / høyde: 7px; / * Du kan endre dette senere hvis du vil * / posisjon: relativ; / * Kreves for å la bryteren bevege seg rundt * / bredde: 26px; / * Dette kan også endres senere * /
Disse innganger
må være helt posisjonert, deretter skiftet litt for å passe riktig. Vi vil da slå dem opasitet
ned til 0
.
.toggle-bg inngang høyde: 28px; venstre: 0; margin: 0; / * Tilbakestill margene og polstring * / opacity: 0; / * Usynlig! * / polstring: 0; posisjon: absolutt; topp: -10px; / * Skift vertikalt * / bredde: 36px; z-indeks: 2; / * Vi vil at inngangen skal være over span.switch, som vi gir en z-indeks på 1 * /
Bryteren skal være firkantet, slik at vi kan omgjøre den til en perfekt sirkel senere ved å bruke a border-radius
. Det trenger relativ posisjonering for å kunne bevege seg, og siden vi trenger å gi det en høyde
og bredde
, det blir en blokkere
-nivå element fløt
til venstre
.
.bytt bakgrunn: #ccc; skjerm: blokk; flyte: venstre; høyde: 14px; venstre: -1px; / * Dette er utgangspunktet. Når du legger til en grenseradio, vises en liten bit av bakgrunnen hvis vi bruker venstre: 0 ;, så -1px er best. * / Posisjon: relativ; toppen: -4px; / * ... For å holde det sentrert vertikalt * / Bredde: 14px; z-indeks: 1; / * Husk, det må være under de usynlige inngangene * /
CSS3 la til den nye generelle søskenkombinatoren, en velger som bruker tilde (~)
for å velge elementer som deler samme forelder. Ordren der de vises i CSS (før eller etter tilde) speiler rekkefølgen der de vises i DOM.
Vi har også tilgang til den nye: kontrollerte pseudoklassen. Dette vil tillate oss å spesifikt målrette mot (for øyeblikket usynlige) radioinngang
det er sjekket ...
Først vil vi bruke disse valgene til å tilbakestille startposisjonen til bryteren.
.toggle-bg input: sjekket ~. switchen left: -1px; / * startbryterposisjon * /
Deretter forteller vi nettleseren den endelige bryterposisjonen.
.toggle-bg input ~: sjekket ~. switchen left: 13px; / * endelig relativ svingposisjon * /
Til slutt legger vi :sjekket
inngang
bak den ukontrollerte inngang
og bryteren slik at den andre inngang
kan klikkes.
.toggle-bg input: kontrollert z-indeks: 0;
Nå skal det se slik ut:
Her er den komplette, ustylte CSS:
.toggle-bg bakgrunn: # 222; / * Du vil se at området blir byttet, men vær så snill å endre fargen * / display: block; / * ... Så at vi kan sette en høyde og bredde * / float: left; / * ... Så at den ikke tar opp hele bredden på siden * / høyde: 7px; / * Du kan endre dette senere hvis du vil * / posisjon: relativ; / * Kreves for å la bryteren bevege seg rundt * / bredde: 26px; / * Dette kan også endres senere * / .toggle-bg inngang høyde: 28px; venstre: 0; margin: 0; / * Tilbakestill margene og polstring * / opacity: 0; / * Usynlig! * / polstring: 0; posisjon: absolutt; topp: -10px; / * Skift vertikalt * / bredde: 36px; z-indeks: 2; / * Vi vil at inngangen skal ligge over span.switch, som vi gir en z-indeks på 1 * /. Switchen background: #ccc; skjerm: blokk; flyte: venstre; høyde: 14px; venstre: -1px; / * Dette er utgangspunktet. Når du legger til en grenseradio, vises en liten bit av bakgrunnen hvis vi bruker venstre: 0 ;, så -1px er best. * / Posisjon: relativ; toppen: -4px; / * ... For å holde det sentrert vertikalt * / Bredde: 14px; z-indeks: 1; / * Husk, det må være under de usynlige inngangene * / .toggle-bg-inngangen: sjekket ~ .witch left: -1px; / * start veksle posisjon * / .toggle-bg input ~: sjekket ~ .witch left: 13px; / * endelig relativ bryterposisjon * / .toggle-bg input: kontrollert z-indeks: 0;
Du har nå en goofy-serig firkant glider, så la oss runde ut disse hjørnene! Vi legger til en border-radius
av 8 piksler
til span
med en klasse av veksle-bg
og til span
med en klasse av bytte om
.
border-radius: 8px;
Merk: Som med opasitet
og overgang
Kommer opp, jeg bruker ikke noen leverandørprefikser her for tutorialets skyld, men du trenger dem for kompatibilitet med noen eldre nettlesere.
overganger
skal legges til span
med en klasse av bytte om
. Du er velkommen til å justere innstillingene. Venstre:
er den eneste delen av følgende overgang som ikke kan endres.
overgang: venstre .2s enkelhet;
Nå som all funksjonalitet er der, kan alt tilpasses etter eget ønske. Du kan legge til en bokseskygge og bakgrunnsgradient til span
med en klasse av veksle-bg
eller til bryteren. Fordi det er rundt, vil radiale gradienter ha en tendens til å se bedre ut på bryteren.
Her er mine innstillinger, men vennligst endre dem for å passe din stil og ditt prosjekt.
Gi kropp
en off-white bakgrunn og en margin slik at vekselen ikke er riktig i hjørnet:
kropp bakgrunn: # f6f8f9; margin: 200px;
Legg til følgende i stilene for .veksle-bg
:
bakgrunn: lineær gradient (til bunn, # f6f8f9 0%, # e5ebee 50%, # d7dee3 51%, # f5f7f9 100%); boksskygge: 0 1px 0 #fff, innsett 0 0 2px # d7dee3, innsett 0 1px 0 # d7dee3, innstikk 0 1px 5px # d7dee3;
Legg til følgende i stilene for .bytte om
:
bakgrunn: radial-gradient (ellipse ved senter, #ffffff 0%, # fefefe 50%, # fdfdfd 51%, # ffffff 100%); boks-skygge: 0 1px 1px # 65727b, 0 0 1px # b6bdc2;
For en iOS-stil veksle, hvor bryteren er i samme størrelse som bakgrunnen, endrer du følgende i stilen for .bytte om
:
høyde: 30px; topp: 0; bredde: 30px;
Endre den endelige bryterposisjonen som skal overlates 41 piksler:
.toggle-bg input ~: sjekket ~ .witch left: 41px;
Endre størrelsene på innganger
og fjern vertikal skifting ved å endre følgende i stilene for .toggle-bg-inngang
:
høyde: 30px; topp: 0; bredde: 70px;
Endre alt ditt border radii
til 30px
i stedet for 8 piksler
.
Tips: hold border-radius
verdi lik den høyde
av elementet det endrer.
Og til slutt, endre høyde
og bredde
av .veksle-bg
å passe de endrede elementene:
høyde: 30px; bredde: 70px;
Gratulerer! Du kan nå lage JavaScript-frie skifter med noe kult nytt CSS3. Du vil sannsynligvis ønske å endre bakgrunnsgradienter, og heldigvis er det et flott online verktøy for å hjelpe med dette; sjekk ut Colorzillas gratis gradientredigerer. Det er også en Mac-app som heter Gradient som fungerer på samme måte.
Fordi denne metoden er avhengig av noen helt nye CSS3-funksjoner, støttes ikke eldre nettlesere. Nettleserstøtte for :sjekket
pseudoklassen inneholder følgende:
Og følgende nettlesere har støtte til den generelle søskenkombinatoren:
Jeg har laget tre jsFiddles for at du skal eksperimentere med deg selv. Den første inkluderer det bare minimale CSS, du må ha en fungerende svingbar glidebryter. Den andre, mye shinier, inneholder alt fra den første i tillegg til noen ekstra stiler og overganger. Den siste er den jeg kaller en "iOS style switch" siden, som vekslingene på iOS, er bryterens høyde lik den vekslebakgrunns høyde.
Fordi dette er alt CSS, er det ganske mange variasjoner du kan opprette. Her er noen få for å komme i gang:
merkelapp
til innsiden av en stor veksle..veksle-bg
når et barn inngang
er sjekket. Eller, enda bedre, finne ut om dette er mulig med ingenting annet enn CSS.merkelapp
til hver inngang
i en iOS-stil veksle og selektivt vise og skjule etiketter
bruker jQuery.Merk: når du oppretter en merkelapp
for byttens radioinnganger
, du må bruke JavaScript for å vise og skjule det inaktive inngangs
merkelapp
hvis du ønsker å kunne bruke merkelapp
som en måte å fjerne merkingen av inngang
. Ellers vil du bare kunne kryss av (men ikke fjernkontrollen) inngang
ved å trykke på merkelapp
.
Jeg håper du fant denne opplæringen nyttig. Takk for at du leste!