Share
Aggiungiamo inoltre al nostro arsenale della Fondazione esaminando il plugin Joyride, che aiuta gli utenti a guidare i tuoi siti. Vedremo anche tabelle dei prezzi, tabelle standard e interscambio; un nuovo strumento di immagine reattivo. Copriremo l'implementazione di queste funzionalità con un semplice modello che puoi scaricare e giocare con.
Inizieremo con la più semplice delle funzionalità che tratteremo in questo tutorial.
L'aggiunta di una classe di "pannello" a quasi tutti gli elementi la trasformerà in un blocco leggermente colorato. Non solo qualsiasi tipo di blocco, poiché questi pannelli usano gli stili border-box, quindi il padding è incorporato nella larghezza dell'oggetto. Questo è un approccio molto pratico in quanto offre un controllo molto più intuitivo sulle dimensioni degli elementi.
Disponiamo di una semplice selezione di pacchetti di hosting tra cui scegliere, che funzioneranno in modo fantastico per qualsiasi azienda. Con connessioni di database mySQL ultrarapide, i sistemi di gestione dei contenuti volano davvero. Aggiungi a questo supporto clienti 24 ore su 24, 7 giorni su 7, 99,9% di uptime e hai un ottimo pacchetto di hosting.
Per illustrare questo punto ho creato un layout a due colonne usando un'immagine e il pannello, perfettamente allineati.
Uno dei motivi principali per possedere / costruire un sito Web è per vendere qualcosa. A causa di ciò, le tabelle dei prezzi sono comuni alle interwebs e sono state utilizzate per anni, quindi ovviamente la Fondazione ha coperto questo settore. Ogni tabella è in realtà una lista non ordinata, con voci di elenco e alcune classi ben posizionate.
Il tag ul stesso ha una classe di "pricing table", mentre all'interno di te esiste l'opzione di usare "title", "price", "description", "bullet-item" e "cta-button". L'unica personalizzazione aggiuntiva necessaria è il tuo contenuto. Si consiglia di allineare un gruppo di questi uno accanto all'altro per creare più di una tabella di confronto dei prezzi.
Le tabelle dei prezzi sono grandiose, ma di tanto in tanto è necessaria una tabella html per la visualizzazione dei dati. Impostarli in Foundation è davvero facile perché non c'è nessuna vera configurazione. Basta aggiungere il markup della tabella normalmente e i suoi stili saranno presi in considerazione. L'unica cosa che potresti voler fare è aggiungere le larghezze delle colonne per uniformare le tue colonne.
| Avviare | impresa | Global Corporation |
|---|---|---|
| 1 database | 5 database | 10 database |
| Nessun backup | Backup da 50 GB | Backup da 100 GB |
Sebbene tutte le immagini in Foundation siano fluide per impostazione predefinita, a volte si incontrano problemi: l'intero argomento delle immagini in RWD è in corso.
E lasciatemi aggiungere, penso che sia il cray-cray che chiunque nel nostro settore possa parlare di * solo immagini * per più di un'ora. #RWD
- Dave Rupert (@ davatron5000), 14 maggio 2013
Uno di questi problemi sorge quando hai un testo in un'immagine. Recentemente Zurb ha aggiunto un nuovo plugin chiamato "Interchange"; il suo compito è semplice: sostituire l'immagine di tua scelta con un'altra quando la dimensione dello schermo raggiunge un certo punto. Funziona aggiungendo un attributo speciale, vale a dire "scambio di dati". Questo è usato per alloggiare le opzioni per le modifiche all'origine dell'immagine.
Qui sto facendo uso di molte delle opzioni disponibili nell'attributo. Ci sono alcuni parametri, ad esempio puoi opzionalmente impostare un punto personalizzato per cambiare l'immagine.
Questo non è il plug-in più performante in quanto le modifiche possono richiedere uno o due secondi, si spera che Zurb risolverà questo problema in futuro. Uno dei principali vantaggi di questo plug-in è il tempo di caricamento risparmiato sui dispositivi mobili. Invece di caricare un enorme jpeg su una connessione 3G, puoi caricare una versione ottimizzata più piccola della stessa immagine, liberando la larghezza di banda per caricare il resto della pagina.
In ogni parte di questa serie finora abbiamo coperto un plugin JavaScript disponibile in Foundation, ma in questo caso ne copriremo due.
In alcune situazioni è utile portare i tuoi utenti in un magico tour misterioso dell'interfaccia utente. Ad esempio, Google lo fa quando lancia nuove funzionalità in molte delle loro applicazioni. Guidando i tuoi utenti passo dopo passo puoi spiegare cosa fa ogni parte e dove conduce. Joyride lo copre utilizzando una lista che accoppia ciascuna voce dell'elenco, tenendo fermo il tour, con un elemento sulla pagina. Questa lista può essere sia una lista ordinata, sia una lista non ordinata, ma deve avere sia la classe "joyride-list" che l'attributo "data-joyride".
Iniziamo, qui abbiamo un'introduzione.
Primo stop
Qui usiamo la nuova funzione di interscambio per cambiare le immagini in base alle dimensioni dello schermo.
Seconda tappa
Stiamo utilizzando le tabelle dei prezzi qui per visualizzare un elenco di servizi da una società di hosting.
Terza tappa
Questo è solo un link ma apre una modale con una tabella standard all'interno, eccitante eh?
Fine della linea
Il nostro tour termina qui, per favore ricordati di portare con te tutti i tuoi effetti personali mentre sei in viaggio verso l'uscita.
Ogni elemento della lista ha bisogno del proprio "ID dati" che deve corrispondere all'id dell'elemento a cui è associato. Se la prima tappa del tuo tour è un tag h2, il tuo ID dati potrebbe essere "data-id =" title "". Il tuo h2 avrebbe bisogno di un id di "titolo". Facile.
A parte questa configurazione di base, ti consigliamo di aggiungere un pulsante "successivo" in modo che gli utenti possano navigare facilmente da una fermata all'altra. Questi vengono aggiunti allegando un altro attributo alla voce dell'elenco; "Data = testo". Nell'esempio sopra ho usato "Vai" per iniziare e "avanti" per continuare.
Ci sono poche opzioni giuste per joyride e alcune possono essere aggiunte direttamente a ciascuna voce dell'elenco. Sopra ho usato data-options = "tipLocation: top; tipAnimation: dissolvenza" e come avrai intuito, questo assegna il tour stop alla parte superiore dell'elemento coupled, dissolvendolo. Ci sono molti altri parametri che puoi passare all'inizializzazione di JavaScript. Puoi anche utilizzare il plug-in dei cookie o, se i tuoi utenti hanno effettuato il login, salvare un'opzione per mostrare solo il tour una volta.
Purtroppo, una cosa che Foundation non include (ancora) è un plug-in / funzione di testimonial. Questi possono davvero tornare utili. Quovolver può rimediare a questo con una semplice configurazione e un markup flessibile. Aggiungi lo script nel piè di pagina, inserisci un po 'di markup e sei a posto.
Nella prossima parte del nostro esame della Zurb Foundation parleremo di Magellano, che crea una navigazione appiccicosa. Analizzeremo le classi di visibilità, il supporto da destra a sinistra, le sequenze di tasti, le miniature, i video flessibili e i dettagli di zepto. Spiegherò i casi d'uso di queste funzionalità e il modo migliore per implementarle nei tuoi progetti.
Accentsconagua
