I pulsanti di input vengono utilizzati nei moduli Web in cui un utente deve selezionare un'opzione da una raccolta più grande. Ciò accade spesso con valori unici come iscrizioni alle newsletter, impostazioni del profilo e categorie di invio. Mi sono sempre piaciuti i pulsanti di input in stile Digg vecchia scuola in cui fai clic su un link per scegliere la categoria della storia.
In questo tutorial voglio dimostrare come possiamo costruire un'interfaccia simile usando CSS3 e jQuery. Tutti i pulsanti di opzione sono ancora presenti nel modulo stesso, ma sono nascosti nella pagina. Invece aggiorniamo la scelta selezionata usando JavaScript e abbiamo anche la possibilità di visualizzare questo valore in HTML (o di restituirlo a uno script di back-end). Guarda la mia demo di esempio per avere un'idea di ciò che stiamo costruendo.
Demo dal vivo - Scarica il codice sorgente
Costruire la pagina Web
Per prima cosa è necessario scaricare una copia locale di jQuery e includere un collegamento a un documento CSS esterno denominato styles.css. Il codice JS non è troppo complicato, ma potresti trarne beneficio spostandoli in un file .js separato. Dipende se il tuo sito web richiede uno scripting aggiuntivo che si possa eliminare durante il rendering della pagina.
Ora il corpo della pagina interna contiene un piccolo numero di pezzi importanti. Abbiamo un intervallo che utilizza l'ID #radiovaltxt che è come sto visualizzando l'input selezionato. Ogni volta che un utente fa clic su uno dei link di pagina, questo valore di span viene aggiornato con il valore di input attualmente selezionato. Al di sotto di questo ho creato un nuovo modulo che non carica nulla - è più di un segnaposto per vedere come dovrebbe apparire l'HTML.
Troverete il div #radiobtns contiene un numero di file div che contengono inoltre elenchi di elementi non ordinati. Ogni riga è basata su un argomento di una singola categoria e l'utente può selezionare una delle opzioni per contrassegnare la categoria selezionata. Ho solo copiato su una riga di link, ma sono tutti strutturati in modo molto simile.
Un elemento importante da comprendere è che l'ID link di ancoraggio corrisponde a un valore del pulsante di input corrispondente. In questo modo possiamo determinare quale collegamento è stato cliccato e come questo corrisponde alla selezione radio. Troverete questi ingressi effettivi situati all'interno di un div #fullradios nella parte inferiore del modulo.
Li ho nascosti di default e l'intero scopo è di non mostrarli mai nella pagina. Se gli utenti possono interagire con la nostra interfaccia personalizzata, non c'è mai alcun bisogno per loro di manipolare gli ingressi radio. Certo, potremmo invece costruire gli input collegati a un'etichetta che non richiede jQuery. Ma l'effetto è anche più difficile da realizzare e richiede browser Web conformi a CSS3.
Disegnare i collegamenti di gatto
Il mio foglio di stile predefinito include tutte le reimpostazioni tipiche e la struttura della pagina come ci si aspetterebbe. I campi di input sono nascosti utilizzando display: nessuno puntando l'elemento div genitore. Anche il testo di span è progettato per apparire naturalmente centrato verso la parte superiore della pagina. Probabilmente non lo userai su un sito web live ma invece passerai il valore nel modulo usando un campo nascosto.
Ogni riga ha una singola lista non ordinata e al primo elemento viene assegnata una classe di .genitore. Ecco come ho organizzato l'elenco delle categorie. L'elemento principale di per sé non è un collegamento designato verso qualsiasi input. È possibile modificarlo nel proprio progetto, ma ha più senso utilizzare un tipo di etichetta di categoria padre per definire le scelte. A questo articolo principale viene assegnata una larghezza fissa di 110 px per fornire più spazio tra i collegamenti.
Ho anche scritto una classe notevole di .sel che viene applicato all'elemento del collegamento selezionato. Una volta che un utente fa clic su uno dei valori di collegamento, è necessario che sappiano che è stato selezionato e confermato. Questa classe selezionata verrà rimossa e riapplicata sui nuovi collegamenti mentre l'utente passa da una categoria all'altra.
Selezione input con jQuery
Per selezionare e deselezionare manualmente i pulsanti di opzione devi approfondire leggermente jQuery. Esistono molte domande frequenti su Stack Overflow che affrontano questa idea e le tecniche sono cambiate rispetto alle varie iterazioni della libreria di jQuery. Questo script si trova nella parte inferiore della pagina index.html e lo suddividerò in segmenti per una comprensione più semplice.
Ogni volta che un utente fa clic su uno di questi link, utilizziamo immediatamente event.preventDefault () passando la variabile evento click. Ciò interrompe il caricamento del valore HREF in modo da non ottenere il salto della pagina associato ai collegamenti hash. La variabile catid è una stringa formata nella sintassi di un selettore jQuery.Prende l'ID del collegamento e lo riformatta nel valore ID dell'ingresso radio corrispondente. L'altra variabile checkedinput ottiene il valore della radio attualmente selezionata - se non viene selezionato nulla otteniamo un valore di ritorno non definito.
Così ora possiamo rompere di più nel codice logico verificando prima se non è già selezionato nulla. In questo caso usiamo il metodo .prop () di jQuery per impostare la proprietà checked. Altrimenti miriamo a ogni singola radio usando Ingresso [name = 'categoria'] e rimuovere l'opzione selezionata in modo che ritorni indietro a nessuna selezione. Quindi aggiorniamo in base all'ultimo link radio cliccato.
Successivamente creo un'altra variabile newval che controlla di nuovo il valore radio attualmente selezionato. Se questo valore corrisponde all'ID del link, sappiamo che è stato verificato con successo e mostriamo il nuovo valore in HTML. Questo passaggio probabilmente non sarà utile su nessun sito di produzione live, ma è bello per questa demo vedere come tutto funziona dietro le quinte.
Questo ultimo pezzo di codice riguarda l'aggiornamento del collegamento attualmente selezionato. Se il link attuale ha già un .sel la classe quindi è già stata selezionata e non facciamo nulla. Altrimenti è più facile indirizzare ogni link all'interno #radiobtns e rimuovendo la classe, per aggiornare il nostro link corrente usando $ (This) .addClass ( 'sel').
Ricorda $ (This) è semplicemente un segnaposto per qualsiasi selettore jQuery attualmente attivo, e in questo caso stiamo parlando dell'evento click che viene eseguito su uno qualsiasi dei link di categoria.
Demo dal vivo - Scarica il codice sorgente
Posso solo immaginare la pletora di soluzioni per il motivo per cui gli sviluppatori dovrebbero utilizzare gli input radio. Le moderne tecniche web offrono così tanto in termini di design dell'interfaccia utente, e questo è un modo interessante per personalizzare l'esperienza di un pulsante radio in qualcosa di completamente unico.
Spero che questo tutorial possa fornire alcune idee agli sviluppatori web che lavorano con moduli di grandi dimensioni e campi di input. Inoltre puoi scaricare una copia del codice sorgente del mio tutorial per vedere esattamente come funziona sul tuo computer.