Mobila appgränssnitt har använt på / av-glidbrytare ett tag. Dessa finns oftast på inställningssidan där användarna kan uppdatera inställningar för sitt konto. Men webbdesigners har lagt märke till och har byggt många öppna plattformar för att skapa egna på / av-brytare.
I denna handledning vill jag titta specifikt på jQuery Toggles plugin utvecklad av Simon Tabor. Den levereras med 5 förkonstruerade användargränssnitt som du enkelt kan uppdatera. Dessutom har du möjlighet att utlösa klick- eller bildhändelser, vilket också kan kopplas till en formkryssruta på sidan. Alla som kör en modern JavaScript-aktiverad webbläsare ska kunna uppleva full effekt. Ta en titt på min levande demo för att få en glimt av vad vi bygger.
Live Demo - Hämta källkod
Komma igång
Det första steget är att ladda ner en kopia av plugin för jQuery Toggles. Du kan ta tag i detta från Github repo som också innehåller ett litet liveexempel. Jag har redan laddat ner en lokal kopia av jQuery till en relativ / js-mapp. Flytta filen toggles.min.js i den här mappen också.
Nu för CSS måste du kopiera toggles.css tillsammans med hela teman / katalogen. Detta kommer att inkludera de huvudsakliga stylesheetsna som följer med plugin. Observera att din toggles.css-fil ska placeras i samma katalog som teman / mappen för att få allt som fungerar korrekt.
Observera också att jag hänvisar till en annan temafil genom namnet växlar-soft.css. Detta gör det möjligt för mig att applicera en mjuk CSS-klass på en behållare som sedan påverkar alla mina interna växelelement (enligt jQuery senare). Andra temaalternativ inkluderar ljus, mörk, iPhone eller modern, och du kan se hur de ser ut på pluginens hemsida.
Nu har själva formuläret inte mycket vanligt med undantag för en växelreglage. När vi trycker in skickar formuläret en jQuery-funktion som stannar den typiska siduppdateringen. Istället utmatar vi direkta värden i fälten under formuläret för att kontrollera hur du kan hantera svar i din egen webbapplikation.
Skapa formuläret
Inom mitt kroppsinnehåll har jag skapat ett formulärelement med ID #basicform. Detta kan riktas mot jQuery för att bättre hantera inlämningsfunktionalitet. Jag har också bifogat klassen .toggle-mjuk vilket är mitt standardval av teman vid utformningen av denna layout.
Om vi hoppar ner mot botten av formuläret märker du en div med ID #emailupdates. På / av-reglaget i mitt exempel kommer att avgöra om en ny användare ska läggas till på abonnentlistan för nyhetsbrevet. Tilläggsklassen .toggle är hur vi riktar alla element via jQuery. .floatright är bara ytterligare positioneringsregler för att få omkopplaren monterad snyggt i formuläret.
Observera också kryssrutan elementet nedan med hjälp av ID #emailupdatescheck. Jag har denna inaktiverad från användning och dold på sidan med display: none; så att användarna inte är förvirrade. Tack och lov kan vi fortfarande uppdatera kryssrutan dynamiskt i jQuery genom att ange det som en alternativparameter.
Generera strömbrytaren
Tänk på att det finns ett stort antal ytterligare parametrar som du kan ställa in denna funktion för att anpassa displayen. Kolla exempelkoderna på Github för en fullständig lista. I mitt exempel kan vi uppdatera en bra del av de användbara alternativen som kan påverka användarupplevelsen.
Du hittar denna JS-kod längst ner på sidan strax före stängningen märka. Väljarklassen .toggle fungerar för något annat växelelement som läggs till på den här sidan. Det låter dig generera praktiskt taget oändliga på / av-omkopplare med mindre krångel - även om du måste skapa en ny kryssruta för varje skjutreglage också. Funktionen toggles () kallas med interna parametrar som finns inuti lockiga hängslen.
drag och klick är två alternativ som låter dig ange vilken typ av interaktion som ska ändra värdet på reglaget. Mitt exempel anger dra till falskt vilket betyder att du bara behöver klicka på reglaget för att ändra värden. Texten ska vara självklarande om hur man uppdaterar innehållet på den inre skärmen. Kom ihåg att inkapsla dessa värden inuti en annan uppsättning av lockiga axlar, annars fungerar det inte.
Parametern för kryssrutan är väldigt användbar så att vi kan skicka ett riktigt formulärelement som ska fästas på den här reglaget. Det tar en jQuery-objektväljare och i det här fallet riktar jag mig mot vår dolda kryssruta. Båda värdena laddas initialt i OFF-läge och vi kan se hur det här värdet uppdateras genom att visa lite utmatningstext.
Form Utgångsvärden
När du slår på Submit-knappen kanske du märker att ett nytt kodblock visas nedan. Detta visar nuvarande textvärde för användarnamnet och lösenordsfälten, tillsammans med ett värde för kryssrutan för skjutreglaget. Låt oss ta en titt på det sista blocket av jQuery-koden:
När en användare skickar formuläret kör vi e.preventDefault () för att stoppa inlämningen.Då avgör vi om den dolda kryssrutan för närvarande är kontrollerad eller inte. Om ja, är glidreglaget inställt på? På? (annars är den inställd på? av?). Du kan teoretiskt göra dessa värden allt du vill så länge det är vettigt. Det finns också två andra variabler som innehåller användarnamnet och inmatningsvärdena för e-post.
Slutligen har jag sammanställt en sammanfogad uppsättning strängvariabler som utgör mitt exempel HTML. Detta läggs till på sidan i en div med ID #codeoutput. Det kommer inte visa någonting först men när det finns någon intern HTML visas det som monospaced-kod. Detta är bara en metod för att bestämma en skjutreglers värde men det fungerar bra och till och med kan du skicka det till ett backend-skript med Ajax.
Live Demo - Hämta källkod
Slutgiltiga tankar
Inte alla former kräver en kryssruta eller byta element. Inställningssidor för användarprofil är en vanlig plats att använda dessa reglage. Andra platser kan innehålla onlineforum eller sociala nätverk där användarna kan byta mellan delning och visningsalternativ.
I slutändan är detta plugin ett fantastiskt val för att implementera snabb och enkel UI-ingångsreglage. Känn dig fri att ladda ner en kopia av min källkod och försök skapa din egen liknande formdesign.