Share
Veți găsi adesea folosindu-vă comutați glisoarele ca o alternativă la modă la casetele de selectare. Astăzi vom crea unul folosind simplă CSS3 și HTML.
Creați un nou document HTML și adăugați un deschidere eticheta cu o clasă de toggle-bg. Aceasta va fi zona de fundal pentru comutare.
Pentru a face schimbarea funcțională, vom folosi unele invizibile intrări radio. Acestea au doar câteva cerințe:
Voi folosi pe și de pe ca valorile mele, cu un nume de comutare, dar puteți schimba acest lucru în funcție de utilizarea dvs. De exemplu, poate veți fi între ele da și Nu.
Adaugă intrare la deschidere ați creat mai devreme. Codul dvs. ar trebui să arate astfel:
Accentsconagua
În funcție de propria utilizare, poate doriți să plasați toate acestea într-un formular.
Cercul mic care va fi comutatorul în sine este pur și simplu a deschidere pe care o vom schimba mai târziu. Dă-i deschidere o clasă de intrerupator și introduceți-l după intrări.
Acesta este ultimul dvs. marcaj HTML:
Pentru a păstra lucrurile simple, vom începe cu minimul necesar pentru ca acest lucru să funcționeze. Adăugați următoarele în documentul dvs. CSS (sau în documentul dvs. CSS) stil dacă utilizați CSS inline.)
.comutare-bg background: # 222; / * Veți dori să vedeți zona întreruptă, dar puteți schimba culoarea * / display: block; / * ... Pentru a putea seta o înălțime și o lățime * / float: left; / * ... Pentru ca aceasta să nu ia întreaga lățime a paginii * / height: 7px; / * Puteți schimba acest lucru mai târziu, dacă doriți * / poziție: relativă; / * Necesar pentru a permite comutatorului să se deplaseze * / width: 26px; / * Acest lucru poate fi schimbat și mai târziu * /
Aceste intrări trebuie să fie absolut poziționate, apoi deplasate ușor pentru a se potrivi corect. Atunci le vom întoarce opacitate până la 0.
.comuta-bg de intrare height: 28px; stânga: 0; marja: 0; / * Resetați margini și umplutură * / opacity: 0; / * Invizibil! * / umplutura: 0; poziția: absolută; top: -10px; / * Schimbare verticală * / lățime: 36px; z-index: 2; / * Vrem ca intrarea să fie peste span.switch, pe care o vom da un z-index de 1 * /
Comutatorul trebuie să fie pătrat, așa încât să îl putem rotunzi într-un cerc perfect folosind mai târziu a border-radius. Ea are nevoie de poziționarea relativă pentru a putea să se deplaseze și din moment ce trebuie să-i dăm înălţime și lăţime, va fi un bloc-element de nivel plutit la stânga.
.comuta background: #ccc; afișare: bloc; plutește la stânga; înălțime: 14px; stânga: -1px; / * Acesta este punctul de plecare. Când adăugăm o rază de margine, este afișat un pic mic de fundal dacă folosim stânga: 0 ;, deci -1px este cel mai bun. * / Poziție: relativă; top: -4px; / * ... Pentru ao menține centrat vertical * / width: 14px; z-index: 1; / * Amintiți-vă, trebuie să fie sub intrările invizibile * /
CSS3 a adăugat noul combinator general de frate, un selector care folosește tilda (~) pentru a selecta elemente care partajează același părinte. Ordinea în care apar în CSS (înainte sau după tilde) reflectă ordinea în care apar în DOM.
De asemenea, avem acces la noua pseudo-clasă verificată. Acest lucru ne va permite să vizăm în mod specific (în prezent invizibil) intrare radio care este verificat ...
Mai întâi, vom folosi acești selectori pentru a reseta poziția de pornire a comutatorului de comutare.
.comuta-bg de intrare: verificat ~ .switch left: -1px; / * poziția inițială a comutatorului * /
Apoi vom spune browserului poziția finală de comutare.
.comuta-bg intrare ~: verificat ~ .switch left: 13px; / * poziția finală a comutatorului final * /
În cele din urmă, vom pune : verificat intrare în spatele necontrolat intrare și comutatorul astfel încât al doilea intrare poate fi făcută clic pe.
.comuta-bg: verificat z-index: 0;
Până acum ar trebui să arate astfel:
Aici este CSS complet, unstled:
.comutare-bg background: # 222; / * Veți dori să vedeți zona întreruptă, dar puteți schimba culoarea * / display: block; / * ... Pentru a putea seta o înălțime și o lățime * / float: left; / * ... Pentru ca aceasta să nu ia întreaga lățime a paginii * / height: 7px; / * Puteți schimba acest lucru mai târziu, dacă doriți * / poziție: relativă; / * Necesar pentru a permite comutatorului să se deplaseze * / width: 26px; / * Aceasta poate fi schimbată mai târziu, de asemenea * / .toggle-bg input height: 28px; stânga: 0; marja: 0; / * Resetați margini și umplutură * / opacity: 0; / * Invizibil! * / umplutura: 0; poziția: absolută; top: -10px; / * Schimbare verticală * / lățime: 36px; z-index: 2; / * Vrem ca intrarea să fie peste span.switch, pe care vom da un z-index de 1 * / .switch background: #ccc; afișare: bloc; plutește la stânga; înălțime: 14px; stânga: -1px; / * Acesta este punctul de plecare. Când adăugăm o rază de margine, este afișat un pic mic de fundal dacă folosim stânga: 0 ;, deci -1px este cel mai bun. * / Poziție: relativă; top: -4px; / * ... Pentru ao menține centrat vertical * / width: 14px; z-index: 1; / * Amintiți-vă, trebuie să fie sub intrările invizibile * / .toggle-bg input: checked ~ .switch left: -1px; / * poziția inițială a comutatorului * / .toggle-bg intrare ~: check ~ .switch left: 13px; / * ultimă poziție relativă a comutării * / .toggle-bg input: checked z-index: 0;
Acum ai un glisor pătrat, așa că hai să rotungem colțurile astea! Vom adăuga o border-radius de 8px la deschidere cu o clasă de toggle-bg și la deschidere cu o clasă de intrerupator.
raza de graniță: 8px;
Notă: ca și în cazul opacitate si tranziție vine în sus, nu folosesc niciun prefix de furnizor aici de dragul tutorialului, dar veți avea nevoie de ele pentru compatibilitate cu unele browsere mai vechi.
tranziţii trebuie adăugat la deschidere cu o clasă de intrerupator. Nu ezitați să reglați setările. Stânga: este singura parte a următoarei tranziții care nu poate fi schimbată.
tranziție: stânga ușoară;
Acum, că toată funcționalitatea este acolo, totul poate fi personalizat după preferințele dvs. Puteți adăuga un gradient de umbră și de fundal la deschidere cu o clasă de toggle-bg sau la comutator. Deoarece este rotund, gradienții radiali vor avea tendința de a arăta mai bine pe întrerupător.
Iată setările mele, dar vă rugăm să le schimbați pentru a se potrivi stilului și proiectului dumneavoastră.
Dă-i corp un fundal alb și o margine astfel încât comutarea să nu fie corectă în colț:
corp fundal: # f6f8f9; margine: 200px;
Adăugați următoarele la stilurile pentru .toggle-bg:
fundal: gradient liniar (până la fund, # f6f8f9 0%, # e5ebee 50%, # d7dee3 51%, # f5f7f9 100%); box-shadow: 0 1px 0 #fff, inset 0 0 2px # d7dee3, inset 0 1px 0 # d7dee3, inset 0 1px 5px # d7dee3;
Adăugați următoarele la stilurile pentru .intrerupator:
fundal: gradient radial (elipsă la centru, #ffffff 0%, # fefefe 50%, # fdfdfd 51%, # ffffff 100%); box-shadow: 0 1px 1px # 65727b, 0 0 1px # b6bdc2;
Pentru comutarea unui stil iOS, în cazul în care comutatorul are aceeași dimensiune ca fundalul, schimbați următorul text în stil pentru .intrerupator:
înălțime: 30px; top: 0; lățime: 30px;
Modificați poziția finală a comutatorului pentru a rămâne la 41 de pixeli:
.comuta-bg intrare ~: verificat ~ .switch left: 41px;
Modificați dimensiunile intrări și eliminați schimbarea verticală schimbând următoarele în stilurile pentru .comuta-bg de intrare:
înălțime: 30px; top: 0; lățime: 70px;
Modificați-vă toate raza de graniță la 30px in loc de 8px.
Bacsis: păstrează border-radius valoare egală cu înălţime a elementului pe care îl modifică.
Și, în sfârșit, schimbați înălţime și lăţime de .toggle-bg pentru a se potrivi elementelor modificate:
înălțime: 30px; lățime: 70px;
Felicitări! Puteți crea acum JavaScript fără comutări cu unele CSS3 cool noi. Veți dori, probabil, să schimbați gradientele de fundal și, din fericire, există un instrument online excelent pentru a ajuta la acest lucru; verificați editorul gradientului gratuit Colorzilla. Există, de asemenea, o aplicație Mac numită Gradient care funcționează similar.
Deoarece această metodă se bazează pe câteva caracteristici CSS3 noi, browserele mai vechi nu sunt acceptate. Suport pentru browser pentru : verificat pseudo-clasa include următoarele:
Iar urmatoarele browsere au suport pentru combinatorul generic:
Am creat trei jsFiddles pentru a putea experimenta pe cont propriu. Primul include CSS minimă, va trebui să aveți un cursor de comutare. Al doilea, mult mai strălucitor, include totul de la primul la care se adauga unele stiluri și tranziții suplimentare. Ultimul este cel pe care îl numesc un "stil de comutare iOS", deoarece, la fel ca pe comutatoarele pe iOS, înălțimea comutatorului este egală cu înălțimea fundalului de comutare.
Deoarece acesta este tot CSS, există câteva variații pe care le puteți crea. Iată câteva pentru a începe:
eticheta în interiorul unui comutator mare..toggle-bg atunci când un copil intrare este bifat. Sau, chiar mai bine, dați seama dacă acest lucru este posibil folosind doar CSS.eticheta Pentru fiecare intrare în cadrul unui stil iOS comutați și afișați selectiv și ascundeți etichete folosind jQuery.Notă: când creați un eticheta pentru comutatorul intrări radio, va trebui să utilizați JavaScript pentru a afișa și ascunde opțiunea inactivă de intrare a lui eticheta dacă doriți să utilizați eticheta ca o modalitate de a debifa intrare. În caz contrar, veți fi în stare numai Verifica (dar nu debifați) intrare apăsând butonul eticheta.
Sper că ați găsit acest tutorial util. Vă mulțumim pentru lectură!
