Le interfacce delle app mobili hanno utilizzato per un certo tempo gli interruttori a scorrimento on / off. Questi sono più comunemente presenti nella pagina delle impostazioni in cui gli utenti possono aggiornare le preferenze per il proprio account. Ma i web designer hanno preso nota e hanno costruito molte piattaforme aperte per generare i propri cursori di interruttore on / off.
In questo tutorial voglio dare un'occhiata specifica al plugin jQuery Toggles sviluppato da Simon Tabor. Viene fornito con 5 temi dell'interfaccia utente pre-progettati che è possibile aggiornare facilmente. Inoltre, hai la possibilità di attivare eventi click o slide, che possono anche essere collegati in una casella di controllo del modulo sulla pagina. Chiunque stia utilizzando un browser abilitato per JavaScript moderno dovrebbe essere in grado di provare l'effetto completo. Dai un'occhiata alla mia demo dal vivo per dare un'occhiata a quello che stiamo costruendo.
Demo dal vivo - Scarica il codice sorgente
Iniziare
Il primo passo è scaricare una copia del plugin jQuery Toggles. Puoi prendere questo dal repository Github che contiene anche un piccolo esempio live. Ho già scaricato una copia locale di jQuery in una cartella relativa / js. Sposta il file toggles.min.js anche in questa cartella.
Ora per il CSS dovrai copiare toggles.css insieme all'intera temi / directory. Questo includerà i fogli di stile principali che vengono forniti insieme al plugin. Nota che il tuo file toggles.css dovrebbe trovarsi nella stessa directory della cartella temi / cartella per far funzionare tutto correttamente.
Notare anche che sto facendo riferimento a un altro file di temi con il nome alterna-soft.css. Questo mi permette di applicare una classe CSS morbida su un contenitore che avrà quindi effetto su tutti i miei elementi di commutazione interni (come target di jQuery in seguito). Altre scelte di temi includono luce, buio, iPhone o moderno, e puoi vedere come appaiono nella home page del plugin.
Ora la forma stessa non ha molto fuori dall'ordinario, tranne che per un cursore a scorrimento. Quando si preme invio, il modulo attiverà una funzione jQuery che interrompe il tipico aggiornamento della pagina. Al contrario, i valori diretti dei campi vengono visualizzati sotto il modulo per verificare come gestire le risposte nella propria applicazione Web.
Creazione del modulo
All'interno del contenuto del mio corpo ho creato un elemento modulo con l'ID #basicform. Questo può essere scelto come target usando jQuery per gestire al meglio le funzionalità di invio. Inoltre ho aggiunto il corso .toggle-soft quale è la mia scelta predefinita di temi quando si progetta questo layout.
Se saltiamo verso il basso del modulo, noterai un div con l'ID #emailupdates. Il cursore di attivazione / disattivazione nel mio esempio determinerà se un nuovo utente deve essere aggiunto alla lista di iscritti alla newsletter. La classe aggiuntiva .toggle è il modo in cui targetiamo tutti gli elementi tramite jQuery. .floatright sono solo regole di posizionamento aggiuntive per far sì che lo switch si adatti perfettamente al modulo.
Notare anche l'elemento checkbox sotto usando l'ID #emailupdatescheck. Ho disabilitato questo uso e nascosto sulla pagina usando display: none; in modo che gli utenti non siano confusi. Fortunatamente possiamo ancora aggiornare la casella di controllo in jQuery impostandola come parametro di opzione.
Generazione dello switch
Tieni presente che ci sono molti parametri aggiuntivi che puoi impostare su questa funzione per personalizzare il display. Controlla i codici di esempio su Github per un elenco completo. Nel mio esempio possiamo aggiornare una buona parte delle opzioni utili che possono influire sull'esperienza utente.
Troverai questo codice JS nella parte inferiore della pagina subito prima della chiusura etichetta. La classe dei selettori .toggle funziona per qualsiasi altro elemento di commutazione aggiunto in questa pagina. Ti permette di generare interruttori on / off praticamente infiniti con meno problemi, anche se dovrai creare una nuova checkbox per ogni slider. La funzione toggles () viene chiamata con parametri interni contenuti all'interno di parentesi graffe.
trascinare e clic sono due opzioni che ti permettono di specificare quale tipo di interazione cambierà il valore del cursore. Il mio esempio imposta il trascinamento sul significato falso che è sufficiente fare clic sul cursore per modificare i valori. Il testo dovrebbe essere auto-esplicativo su come aggiornare il contenuto del display interno. Ricorda di incapsulare questi valori all'interno di un'altra serie di parentesi graffe altrimenti non funzionerà.
Il parametro checkbox è molto utile in modo che possiamo passare un elemento di forma reale da collegare a questo cursore. Ci vorrà un selettore di oggetti jQuery e, in questo caso, sto prendendo di mira la nostra casella di controllo nascosta. Entrambi i valori vengono inizialmente caricati nella posizione OFF e possiamo vedere come questo valore si aggiorna visualizzando un testo di output.
Form Output Values
Una volta premuto il pulsante di invio, potresti notare un nuovo blocco di codice visualizzato sotto. Questo mostrerà il valore corrente del testo dei campi username e password, insieme a un valore per la casella di controllo del cursore. Diamo un'occhiata al blocco finale del codice jQuery:
Ogni volta che un utente invia il modulo, eseguiamo e.preventDefault () per interrompere l'invio.Quindi determiniamo se la casella di controllo nascosta è attualmente selezionata o meno. Se sì, allora il valore del cursore è impostato su? On? (altrimenti è impostato su? spento?). Potresti teoricamente rendere questi valori qualcosa che ti piace finché ha senso. Inoltre ci sono altre due variabili che contengono il nome utente e i valori di input dell'email.
Finalmente ho messo insieme un insieme concatenato di variabili stringa che costituisce il mio esempio HTML. Questo viene aggiunto alla pagina in un div con l'ID #codeoutput. All'inizio non visualizzerà nulla, ma una volta che ci sarà del codice HTML interno, apparirà come un codice monospaced. Questo è solo un metodo per determinare il valore di un cursore, ma funziona benissimo e ti permette persino di passarlo a uno script di back-end usando Ajax.
Demo dal vivo - Scarica il codice sorgente
Pensieri finali
Non tutti i moduli richiedono una casella di controllo o un elemento di commutazione. Le pagine delle impostazioni del profilo utente sono un luogo comune in cui utilizzare questi cursori. Altri luoghi possono includere forum online o social network in cui gli utenti possono passare tra la condivisione e le opzioni di visualizzazione.
In definitiva questo plugin è una scelta fantastica per implementare cursori di input dell'interfaccia utente rapidi e semplici. Sentiti libero di scaricare una copia del mio codice sorgente e prova a creare il tuo design di moduli simile.