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.

50 + Nettsteder for å laste ned gratis lydeffekter for nesten alt

Tenk deg en film eller video uten lydeffekter. Selv en fantastisk film som Titanic ville ikke se noe mer enn en vits hvis det ikke er noen "Wham", "Bam" og "Smash" høres ut i det. Bakgrunnsmusikk og lydeffekter er viktige for å lage en video (eller til og med en lydproduksjon) engasjerende og i sin helhet.D

(Tekniske og design tips)

16 Moderne Ord med de mest Uncanny Origins

Har du noen gang lurt på opprinnelsen til noen moderne ord som du leser på Internett eller ofte bruker deg selv? Jeg vet jeg gjør det. Nå nå, ring meg et "ordnerd", men det er slik jeg vet om mange kule ting, som det faktum at mange ord vi bruker i dag, og tenker på dem som det tjueførste århundre, var faktisk opprinnelig for en stund siden i de mest uhyggelige steder .I utgan

(Tekniske og design tips)