Uno stile di interfaccia utente comune per Apple e WordPress è stato il campo di ricerca in espansione. Ogni volta che un utente fa clic per mettere a fuoco, il campo si espande, quindi si contrae quando l'utente si disattiva. Questa tecnica è diventata popolare perché salva spazio sulla pagina quando la ricerca non viene utilizzata. Ma evidenzia anche il campo di ricerca quando lo fa è in uso, che attira l'attenzione dell'utente e fa sapere loro che il sito sta rispondendo.
In questo tutorial voglio dimostrare due diversi metodi per costruire un campo di ricerca in espansione. Il primo utilizza le transizioni CSS3 di base che sono supportate solo nei nuovi browser Web. Funziona alla grande per progetti semplici, ma non c'è modo di verificare se l'utente ha inserito i dati rigorosamente via CSS. Nel secondo campo useremo JavaScript per espandere, e poi si restringerà solo se l'utente non ha inserito alcun testo. È una piccola ma affascinante interfaccia utente che può integrarsi perfettamente in qualsiasi progetto di sito web.
Demo dal vivo - Scarica il codice sorgente
Costruire un modulo semplice
Non voglio che i moduli demo presentino effettivamente qualcosa, quindi sto usando JavaScript per fermare l'evento di invio. Ma il semplice codice HTML del documento è ancora normale e abbastanza semplice. Sentiti libero di scaricare una copia della mia demo se vuoi lavorare su una copia locale del tutorial.
Questo snippet contiene tutti i codici di intestazione di cui abbiamo bisogno nella pagina HTML. Ho incluso una copia della libreria jQuery per uno scripting più veloce. Il mio JavaScript personalizzato viene salvato in un file esterno chiamato jsinput.js. Non contiene nulla di troppo complesso, ma varrebbe la pena capire come completiamo i diversi effetti tramite CSS e JS. Ecco le due aree di immissione dei moduli con i loro codici HTML esatti:
I campi di ricerca sono nominati #S e # s2 rispettivamente. Ho mantenuto una convenzione di denominazione simile con gli elementi del modulo e i pulsanti di invio. Leggere il documento CSS dovrebbe essere molto più semplice dato che i campi sono divisi per nomi ID univoci. Ma prima possiamo guardare le transizioni CSS e poi passare al campo dinamico JavaScript.
Espansione con transizioni CSS
Il mio file CSS demo contiene una serie di ripristini insieme a stili di base per la creazione della struttura del layout. Non c'è nulla fuori dall'ordinario se si ha familiarità con i CSS. Tuttavia, un blocco che penso valga la pena menzionare effettivamente il testo segnaposto per vari elementi di input. Questi selettori non sono supportati in tutti i browser, ma possiamo ottenere la maggior parte dei motori più recenti con questi codici:
Sembra molto più bello fondere il tipico testo di input con il resto del tuo design. Le proprietà CSS per ogni campo di ricerca riproducono un tono simile. Ho una classe wrapper esterna chiamata .fieldcontainer che incapsula il modulo al 100% della larghezza. Questo significa che il modulo non si espanderà mai oltre il contenitore della pagina, quindi possiamo usare il 100% come massimo e qualsiasi altra cosa sarà relativa.
Le proprietà di transizione possono essere trovate nella parte inferiore del .searchfield classe. La comune proprietà CSS3 e il prefisso del venditore dovrebbero coprire la maggior parte dei browser web. Ma se hai bisogno di supporto per la retrocompatibilità, utilizzare un metodo JavaScript rigoroso potrebbe dare risultati migliori. Anche se, ammettiamolo, questo codice è molto più pulito e facile da organizzare.
Un ultimo bit per l'area di input della ricerca correggerà il posizionamento per la nostra icona di ricerca. Questo deve essere posizionato alla fine del campo di input che include anche un po 'di padding sul lato destro. In questo modo l'utente non può mai inserire il testo che scrive sopra l'icona del pulsante di ricerca. La fonte originale di questo grafico è da Icon Finder progettata da Brightmix. Il set di icone piatte è perfetto per un input di base del campo di ricerca.
Il problema più grande con l'animazione solo CSS sta gestendo selezioni utente dinamiche. Quando un visitatore immette del testo nel campo espanso, può premere Invio, oppure può andare a fare clic sulla lente d'ingrandimento. Se fanno clic per effettuare una ricerca, rimuoverà l'attenzione dall'input e si ridurrà al 45%, compromettendo anche l'evento click. Puoi scegliere di modificare le proprietà di transizione e correggerle su :messa a fuoco stato. Ma poi non ci sarà alcuna animazione quando ridimensionamento indietro, quindi l'effetto è ancora peggio.
Gestione dell'input dinamico tramite jQuery
Nella mia demo di esempio il secondo campo di input è l'unico oggetto di jQuery. In cima a jsinput.js Ho creato due variabili che selezionano il secondo campo di input e il pulsante di ricerca. È possibile cambiare queste posizioni se preferisci puntare al primo campo. Ma potrebbe anche valere la pena rimuovere le transizioni CSS3 e usarle solo come metodo di fallback quando JS è disabilitato nel browser.
Ho suddiviso il file in due grandi blocchi di codice. Questo primo semestre contiene le variabili iniziali insieme al gestore di eventi focus. Ogni volta che l'utente si concentra sul secondo campo di input, è necessario espandere la larghezza del 100%. Inoltre, dobbiamo spostare l'icona di ricerca dalla sua posizione predefinita fino alla parte destra. I due metodi jQuery.animate () dovrebbero essere eseguiti allo stesso tempo, producendo un effetto di animazione molto simile a quello delle transizioni CSS3.
Quindi quest'ultimo blocco ha altri due eventi per il binding. Il primo avviene dopo che l'utente ha offuscato il secondo campo di input. Lo script metterà alla prova search2.val () e determinare se l'utente ha inserito dati. Se il campo è vuoto, torniamo alla larghezza del 45% e l'icona viene riposizionata. Altrimenti l'utente ha inserito alcuni termini di ricerca e lo lasciamo al 100% della larghezza.
Il secondo piccolo blocco di codici si innesca quando si tenta di inviare dati per uno dei moduli. Cattura automaticamente l'invio e impedisce che accada con event.preventDefault (). Nel complesso, non dovrebbe essere uno script complesso, ma gli sviluppatori che non hanno familiarità con jQuery potrebbero aver bisogno di ricercare un paio di funzioni. I codici sono eccezionalmente piccoli e dovrebbero funzionare in tutti i browser Web abilitati a JS.
Demo dal vivo - Scarica il codice sorgente
Conclusione
Questa interfaccia non richiede un sacco di pianificazione o codice extra nella progettazione. E anche se si mantiene lo stesso stile di progettazione per i campi di input del proprio sito Web, questa tecnica può essere eseguita utilizzando alcune transizioni CSS3 e un contenitore esterno.
Sarebbe anche possibile includerlo in qualsiasi numero di moduli simili come campi di contatto o pagine di impostazioni del profilo. Scarica una copia del mio codice sorgente demo e sentiti libero di implementare questa funzione in qualsiasi numero di progetti!