Opprette en JavaScript-Free Radio Toggle i CSS3

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.


Trinn 1: Begynn med markeringen

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.

                    

Trinn 2: Semantikk og funksjonalitet

For å gjøre funksjonen funksjonell, bruker vi litt usynlig radioinnganger. Disse har bare et par krav:

  • De må ha forskjellige verdier
  • De må ha samme navn

Jeg skal bruke 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.


Trinn 3: Vekslebryteren

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:

     

Trinn 4: Stil bakgrunnen

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 * /

Trinn 5: De usynlige inngangene

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 * /

Trinn 6: Vekslebryteren

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 * /

Trinn 7: CSS Hackery!

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:


Trinn 8: Historien så langt

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; 

Trinn 9: Border Radii

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.


Trinn 10: Overganger

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;

Trinn 11: Bakgrunn, Skygger, Gradienter ...

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;

Trinn 12: IOS bytter

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;

Konklusjon

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.


Nettleserstøtte

Fordi denne metoden er avhengig av noen helt nye CSS3-funksjoner, støttes ikke eldre nettlesere. Nettleserstøtte for :sjekket pseudoklassen inneholder følgende:

  • Alle versjoner av Chrome
  • Alle versjoner av Firefox
  • Internet Explorer 9+
  • Opera 9+
  • Safari 3+

Og følgende nettlesere har støtte til den generelle søskenkombinatoren:

  • Alle versjoner av Chrome
  • Alle versjoner av Firefox
  • Internet Explorer 7+
  • Opera 9+
  • Safari 3+

jsFiddle

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.

  • Minimal veksle
  • Stilte veksle
  • iOS-stil veksle

Fordi dette er alt CSS, er det ganske mange variasjoner du kan opprette. Her er noen få for å komme i gang:

  • Lag en vertikal, snarere enn horisontal veksle (kanskje for en equalizer?)
  • Bruk et bilde med en vinkelgradient som bryterens bakgrunn for et mer realistisk metallisk utseende.
  • Legg til en merkelapp til innsiden av en stor veksle.
  • Bruk jQuery til å endre bakgrunnen til .veksle-bg når et barn inngang er sjekket. Eller, enda bedre, finne ut om dette er mulig med ingenting annet enn CSS.
  • Legg til en 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!