Share
Aggiungiamo al set di competenze della nostra Fondazione imparando a utilizzare le barre di avanzamento, gli avvisi, i suggerimenti e il mega drop che Zurb utilizza nel loro sito, ma che in realtà non è in Foundation. Vedremo l'aggiunta di tutti questi componenti nel modulo di contatto dell'esercitazione precedente, utilizzando un tocco di jQuery personalizzato per farti un'idea di come questi elementi potrebbero funzionare nei tuoi progetti. Iniziamo.
Prima di tutto aggiungeremo un suggerimento alla casella "Inviami spam", dicendo agli utenti un po 'di più sullo spam che invieremo loro se controllano la casella.
Come in ogni snippet di codice precedente, l'aggiunta di funzionalità come un suggerimento a un elemento si basa su una classe per dare il via a qualcosa, in questo caso è "has-tip".
Potresti anche aver notato che abbiamo avvolto il testo all'interno dell'etichetta in un tag span. Questo tag span ha bisogno di uno degli attributi degli elementi personalizzati di Foundation, 'data-tooltip'. Questo ti darà un tooltip funzionante, ma ti servirà del testo nel suggerimento e forse per impostare la larghezza. Entrambi possono essere raggiunti con ancora più attributi, "titolo" e "larghezza dati". Senza la larghezza dei dati, la punta riempirà semplicemente lo spazio del contenitore principale dell'elemento.
Aggiungendo la classe 'has-tip' e avvolgendo l'elemento scelto nello span con questi attributi, puoi facilmente attaccare un suggerimento a qualsiasi elemento.
Nel tutorial precedente abbiamo creato un semplice modulo di contatto reattivo, che ha dimostrato come gli elementi del modulo di Foundation potevano essere utilizzati. Ora implementiamo altri elementi per aggiungere un nuovo livello al modulo. Lo faremo aggiungendo fasi al pulsante di invio; prenderemo il clic standard del pulsante Invia messaggio, aggiungiamo un indicatore di avanzamento, un messaggio di successo e cancelleremo gli input una volta inviata l'email.
Dato che sto semplicemente mostrando le funzionalità di Foundation, questo non è un modulo funzionale, anche se potresti aggiungere uno script di invio basato su php e usare ajax per rendere il modulo post senza allontanarti dalla pagina. Dai un'occhiata a Submit A Form Without Page Refresh usando jQuery per ulteriori istruzioni.
Direttamente sotto il nostro elemento di input di invio possiamo aggiungere la nostra barra di avanzamento. Questo utilizzerà le stesse classi dei pulsanti, stavolta usando la classe arrotondata.
Usare un div con la classe "progress" imposta le cose e agisce come il contenitore, mentre la span all'interno (facendo uso della classe "meter") agisce come il colore che riempie progressivamente il contenitore.
Nota: Lo span usa un tag di stile con la larghezza iniziale della barra di avanzamento. Useremo jQuery per animarlo più tardi.
Aggiungiamo un messaggio di successo in modo che gli utenti sappiano che il messaggio è stato inviato. In questo esempio ci concentreremo solo su un avviso di successo, ma in uno scenario reale è anche necessario un avviso di errore. È possibile implementarlo utilizzando il gestore di invio e il plugin di convalida jQuery.
Successo! Il vostro messaggio è stato inviato. ×
Prendi un div e aggiungi l'attributo "data-alert" insieme a un paio di classi, vale a dire "alert-box" e "success". Se aggiungiamo anche un pulsante di chiusura, gli utenti possono chiudere il messaggio di successo dopo averlo letto. Se guardi a ciò che abbiamo messo insieme fino ad ora sembrerà un po 'disordinato, ma va bene aggiungendo un po' di jQuery ora per creare gli strati di interazione di cui abbiamo bisogno.
Accentsconagua
var submitButton = $ ('# submitme'); // Variabile in cache elemento button var progressBar = $ ('# progress'); // Variabile per memorizzare l'elemento della barra di avanzamento var progressBarMeter = $ ('# progress .meter'); // Variabile nell'elemento di cache meter var alertBox = $ ('. Alert-box'); // Variabile per misurare l'elemento del contatore var closeButton = $ ('. Close'); // Variabile per memorizzare l'elemento del pulsante di chiusura $ (submitButton) .click (function () // Inizia l'interazione di invio $ (this) .fadeOut (500); // Fade out pulsante di invio quando fa clic su setTimeout (function () // Ritarda l'effetto successivo $ (progressBar) .fadeIn (500); // Fade nella barra di avanzamento $ (progressBarMeter) .animate (width: '100%', 2000); // Animazione della barra di avanzamento setTimeout ( function () // Ritarda l'effetto successivo $ (progressBar) .fadeOut (500); // Dissolve la barra di avanzamento quando l'animazione completa setTimeout (function () // Ritarda l'effetto successivo $ (alertBox) .fadeIn (500) ; // Fades in success alert, 500);, 2500);, 500);); Per spiegare meglio questo codice ho commentato ogni riga. È una semplice coda di effetti che crea l'interazione desiderata. Anche se questo è puramente visivo ma potrebbe essere facilmente regolato per aggiungere feedback e convalida reali. Sarebbe anche utile per noi aggiungere una funzione di avviso di chiusura che ripristina il modulo per uso futuro.
Nota: Abbiamo memorizzato nella cache tutti gli elementi utilizzati all'interno della funzione memorizzandoli in variabili. Puoi leggere di più sul motivo per cui lo facciamo leggendo il suggerimento rapido - jQuery Newbs: Stop Jumping in the Pool
$ (closeButton) .click (function () // Avvia la funzione di reset $ (alertBox) .fadeOut (500); // Fade out messaggio di successo $ (progressBarMeter) .css (width: '0%'); // Reimposta la barra di avanzamento setTimeout (function () // Ritarda l'effetto successivo $ ('input, textarea'). Not ('input [type = submit]'). Val ("); // Reimposta i campi di input $ (submitButton) .fadeIn (500); // Fade indietro nel pulsante di invio, 500); restituisce false; // Questo interrompe l'avviso di successo dalla rimozione poiché vogliamo solo nasconderlo); Di nuovo qui ho commentato ogni riga per spiegare cosa sta facendo ogni linea. Questo copre praticamente il nostro aggiornamento al modulo di contatto. Queste funzionalità sono molto flessibili e possono essere utilizzate ovunque nei tuoi progetti, la personalizzazione è semplicissima grazie ai CSS.
Ho trascorso molto tempo nel gruppo Google della Fondazione e molte persone mi chiedono della funzione Mega Drop sui siti Web di Zurb. Ho pensato che avrei coperto questo aspetto, perché sembra che nessuno copra davvero quello che è un po 'in avanti di jQuery.
Prendi un tag di sezione e riempilo con il contenuto che desideri all'interno del drop, aggiungi un attributo di stile usando "display: none" e quindi il seguente codice jQuery:
var megaDrop = $ ('# megaDrop'); // Variabile per memorizzare in cache l'elemento megaDrop var megaContainer = $ ('# megaContainer'); // Variabile per memorizzare l'elemento megaContainer $ (megaDrop) .click (function () $ (megaContainer) .slideToggle (300, function () if ($ (this) .is (": hidden")) $ (megaDrop) .html ("+"); else $ (megaDrop) .html ("×"););); Tutto ciò che Mega Drop è, è un effetto slideToggle che mostra e nasconde un contenitore con un'animazione scorrevole. Ci sono molti usi pratici per il Mega Drop, che si tratti di una navigazione estesa o di una galleria nascosta, o forse anche di un video promozionale.
Un sacco di progetti, in particolare le interfacce dashboard, richiedono grafici e chartjs.org è un ottimo modo per aggiungerli ai progetti basati sulla Fondazione. Perché non provarlo, visualizzare i tuoi dati in modi diversi, animarli e personalizzarli? Questi grafici sono perfetti nel framework Foundation, anche su display retina.
Chartjs utilizza l'elemento canvas HTML5, supportato da tutti i browser moderni, e polyfills fornisce supporto per IE7 / 8. Il plugin è privo di dipendenze, leggero e offre un sacco di opzioni di personalizzazione.
Nel prossimo tutorial tratteremo il plugin Joyride (che offre agli utenti un tour del tuo sito), pannelli, tabelle dei prezzi, tabelle e scambi regolari; che ti dà la possibilità di impostare immagini diverse per dimensioni dello schermo diverse. Molto ancora da coprire!
