Share
Seguendo il nostro sguardo ai pulsanti di Zurb's Foundation, diamo ora un'occhiata ai moduli e agli switch personalizzati. Durante questo tutorial lavoreremo su un esercizio; un modulo di contatto che puoi aggiungere ai tuoi progetti o semplicemente divertirti. Una volta costruito, passeremo ad altri elementi del modulo.
Le forme, almeno per me, sono sempre state un po 'dolorose soprattutto quando le ho inserite nei miei progetti eccessivamente ambiziosi. Foundation semplifica l'intero processo includendo un plug-in personalizzato per JavaScript. È molto semplice da configurare e ti dà la possibilità di personalizzare facilmente i tuoi elementi del modulo usando i CSS.
Per far funzionare i moduli personalizzati, devi includere foundation.forms.js. Dovrai anche assicurarti di includere zepto.js e foundation.js sopra il plug-in di moduli.
Il plugin funziona nascondendo ogni elemento del modulo stesso e sputando altri elementi visivamente controllabili come div e tag di ancoraggio. Passa quindi qualsiasi interazione all'elemento nascosto originale, il che significa che la forma continuerà a funzionare come previsto. Diamo un'occhiata a come funziona esattamente.
In termini di siti Web, il tipo di modulo più comune è probabilmente sempre stato il modulo di contatto. In questo esercizio prenderemo gli input standard che potreste aspettarvi di vedere, più uno o due esempi insoliti che potrebbero essere utili per voi nei vostri progetti.
Prendi il tuo standard etichetta. Per avviare il plugin per moduli personalizzati è necessario aggiungere una classe di "personalizzato" in questo modo: , fatto. Ora abbiamo il nostro modulo personalizzato.
Per iniziare avrai bisogno del tag form che contiene una riga a due colonne, come questa:
Ora inizieremo con la colonna di sinistra; nell'esempio ho usato un menu a tendina per selezionare il saluto, seguito da una casella di input per il nome. Questi usano tag standard con una classe "collapse" sulla riga. Seguiamo questo con il campo email e un "come ci hai trovato" a discesa.
Devi assicurarti che il tuo elemento di selezione abbia un ID, ma a parte questo il markup è davvero semplice. Quindi, per unire questo con il codice del modulo che abbiamo esaminato per la prima volta, è necessario inserirlo nel primo div con la classe "large-6".
I prossimi sono gli elementi per la seconda colonna. Questi includono l'area di testo, una casella di controllo "spam me" e un interruttore, seguito infine dal pulsante di invio.
Non abbiamo ancora coperto gli interruttori, quindi facciamolo ora.
Gli interruttori sono un ottimo modo per attivare visivamente gli input. La loro struttura comprende un div con una classe "switch", seguita dalla scelta di una dimensione. Queste dimensioni includono "minuscolo", "piccolo" e "grande". È inoltre possibile impostare l'interruttore da arrotondare con la classe "arrotondata". La struttura stessa ha due ingressi, uno per ogni stato dell'interruttore. Questi hanno le loro rispettive etichette che Foundation usa per il testo all'interno di ogni stato. Gli input hanno bisogno di ID e le etichette hanno bisogno dell'attributo "per" coincidente.
Questo copre praticamente il nostro piccolo modulo di contatto, puoi prenderlo e giocarci o usarlo nel tuo prossimo progetto.
Altri elementi di forma
Cos'altro potresti aver bisogno in un modulo web? Per iniziare abbiamo buone vecchie radio, ognuna delle quali deve avere lo stesso nome e una proprietà "display: none".
Nota: So che questo è uno stile in-linea orribile, ma è consigliabile in questo caso in modo da non ottenere questo sfarfallio quando il foglio di stile inizia a calciare.
Una delle cose più interessanti di questi moduli personalizzati è l'opzione rapida per creare un elemento che abbia o meno un elemento che lo precede o che lo segue. È un ottimo modo per suggerire ciò che è già presente o suggerire quale tipo di interazione dell'utente è necessaria.
Qui sotto puoi vedere che abbiamo un elemento span con la classe "prefisso", seguita da un menu a tendina. Dovrai comunque inserire questi elementi in una struttura a colonne, in quanto le classi "prefisso" e "postfix" impediscono semplicemente di separare gli elementi. Puoi anche fare buon uso della classe "postfix" in un oggetto come una casella di ricerca, per cui hai il tuo input di testo seguito da un pulsante.
http: //webdesign.tutsplus
Messaggio di errore
La maggior parte delle forme ha almeno un campo che è richiesto o il modulo non sarà inviato correttamente. La Fondazione approvvigiona queste situazioni di convalida con la classe "errore". Basta aggiungere questo a qualsiasi input, etichetta, tag piccolo o colonna e guardare come questi elementi assumono uno stile di errore rosso.
Per renderlo efficace, devi prendere il plugin jQuery validate e utilizzare il parametro richiesto per mostrare questi stati quando un utente inserisce erroneamente informazioni.
Attrezzo utile
Quando si tratta delle scelte di colore in Foundation, non è sempre facile ottenere una buona combinazione senza l'aiuto di un designer. Fortunatamente, Colourco.de offre un ottimo modo per trovare combinazioni di colori per il tuo prossimo progetto. Sposta il cursore da sinistra a destra per cambiare la tonalità, e su o giù per modificare la luminosità. Il menu offre opzioni per diversi schemi di colori, tra cui monocromatico, anagogico e complementare.
Conclusione
Le forme sono una parte essenziale di ogni sito Web e Foundation aggiunge alcune caratteristiche interessanti per rendere le tue forme solide. Se ti senti avventuroso, perché non dare un'occhiata ad alcuni degli altri esperimenti di forma di Zurb, incluso il loro uploader di immagini AJAX?
Accentsconagua
