Konverter HTML-kryssboksen til iOS 7-bryteren med Switchery.js

Avkrysningsruten er veldig nyttig for å gi brukerne input. Når brukerne skriver inn ekte verdi, vises en innsjekk i den lille firkantboksen. Tilpasse utseendet i avkrysningsboksen kan enkelt gjøres via CSS. Likevel påvirker tilpasningen bare boksen og sjekk stilen . Å tilpasse avkrysningsruten med en virkelig annen design krever ganske mye koding.

Ved hjelp av Switchery skjønt, er kryssboks tilpasning et stykke kake. Den kan automatisk konvertere avkrysningselementet til en vakker iOS7-lignende bryterknapp. Bryterne kan også tilpasses for å passe perfekt til ditt design. La oss sjekke det ut.

Komme i gang med bytte

Switchery er et gratis frittstående javascriptbibliotek. For å installere det, trenger du bare å ta med javascript og stilfilen Switching til webområdet ditt. Du kan få begge filene fra GitHub.

For å konvertere din gammeldags boks, bare ta med avkryssningselementet ditt med en klasse som blir referert til Switchery.

Å gi boksens innledende tilstand er også veldig enkelt. Du kan gjøre det ved å inkludere den checked attributtet i HTML for kontrollert tilstand når du laster inn. For eksempel vil vi legge til en demo i en avkrysningsboks med merket tilstand slik som:

For øyeblikket endrer ikke avkrysningsboksen ennå. Vi må fortsatt legge til følgende javascript-kode i HTML-koden. Det er her vi legger den definerte avmerkingsboksen, og gir noen alternativer (hvis nødvendig).

Det er det!

Tilpass bryteren

For å gi noe alternativ, kan det gjøres innenfor javascript. Dette alternativet kan endre utseendet på standardbryteren. Følgende er alle tilgjengelige alternativer:

• color : å endre farge på bryterelementet, arbeid med HEX eller RGB-verdi
• secondaryColor : å endre "av" tilstandsfarge på bryterskyggen og grensen
• className : tilpasse className til bryterelementet stilet i switchery.css
• disabled : for å aktivere eller deaktivere bryteren på klikkhendelser, fylt med boolsk (sann eller falsk)
• disabledOpacity : å bytte bryterens uvirksomhet når disabled er sant, alt fra 0 til 1
• speed : endre overgangstidslengde, f.eks. '0, 1s', '0, 5s', '2, 2s'

For eksempel, med vår tidligere bryter, la oss endre sin første og sekundære farge. I init variabelen, etter elem attributtet, bare sett inn alternativet i elem slik:

Og her er resultatet:

I stedet for å tilpasse bare state design, er det fortsatt mange tilgjengelige alternativer som å vise flere brytere eller koble bryteren med andre elementer og få sin nåværende tilstand. Dokumentasjonssiden er som alltid et nyttig sted å besøke.

Konklusjon

Med et verktøy som Switchery, blir tilpasning av alle typer design fra en hvilken som helst enhet, stadig lettere. Enda mer, det har blitt testet og støttes på mange moderne nettlesere som Chrome, Firefox, Opera, Safari og IE8 +. Hvis du vil tilpasse en annen iOS 7-stil UI-widgets-design, vil du kanskje sjekke ut Powerange for rekkeviddekontroll.

Slik leser du Slett Reddit kommentarer

Mens du surfer gjennom Reddit, må du ha sett slettede eller fjernede kommentarer som kan ha vekket nysgjerrigheten din. Men vet du at du kan gjenopprette de fleste av disse slettede kommentarene ved hjelp av verktøy fra tredjepart?I dagens innlegg vil jeg vise deg fire verktøy som kan hjelpe deg med å se slettede Reddit-kommentarer på en eller annen måte . Diss

(Tekniske og design tips)

Niantic ruller ut nye sikkerhetstiltak for Pokémon Go; Svindler opp i armer

Fusk og tapping i Pokémon Go er ganske vanlig, med mange avhengige av tredjeparts programvare for å spoofe sine steder og automatisere spillet for å få nivåer. Niantic 's reaksjon mot bedrageri har vært relativt tam så langt, men det har endret seg på fredag ​​da cheaters oppdaget at Niantic har stille oppdatert sikkerhetsfunksjonene på Pokémon Go serverne.Selv om natur

(Tekniske og design tips)