Share
Să adăugăm suplimentar la arsenalul Fundației noastre, uitandu-ne la pluginul Joyride, care vă ajută să ghideze utilizatorii prin site-urile dvs. Vom analiza, de asemenea, tabelele de prețuri, tabelele standard și schimbul de date; un instrument inteligent de imagine receptiv. Vom acoperi implementarea acestor funcții cu un șablon simplu pe care îl puteți descărca și juca.
Vom începe cu cele mai clare caracteristici pe care le vom acoperi în acest tutorial.
Adăugarea unei clase de "panou" la aproape orice element îl va transforma într-un bloc slab colorat. Nu numai un tip de bloc, deși aceste panouri utilizează stiluri de box-uri, astfel încât plăcuța este încorporată în lățimea obiectului. Aceasta este o abordare foarte utilă, deoarece vă oferă un control mult mai intuitiv asupra dimensiunilor elementelor.
Avem o selecție simplă de pachete de găzduire pentru tine de a alege, acestea vor funcționa fantastic pentru orice companie. Cu conexiunile ultra-rapide ale bazei de date mySQL, sistemele de management al conținutului acționează cu adevărat. Adăugați la acest suport pentru clienți 24/7 și 99,9% uptime și aveți un pachet de găzduire excelent.
Pentru a ilustra acest punct, am creat un layout în două coloane utilizând o imagine și panoul, aliniat perfect.
Unul dintre motivele principale de a deține / construi un site web este pentru a vinde ceva. Din acest motiv, tabelele de prețuri sunt obișnuite pe intersecții și au fost de ani de zile, deci, desigur, Fundația acoperă acest domeniu. Fiecare tabel este de fapt o listă neordonată, cu elemente de listă și câteva clase bine plasate.
Tag-ul ul în sine are o clasă de "tabel de prețuri", în timp ce înăuntru aveți opțiunea de a utiliza "titlu", "preț", "descriere", "bullet-item" și "buton cta". Singura necesitate de personalizare suplimentară este conținutul dvs. Poate doriți să liniați o grămadă de ele unul lângă altul pentru a crea mai mult un tabel de comparație a prețurilor.
Tabelele de prețuri sunt minunate, însă din când în când veți avea nevoie de o tabelă html reală pentru afișarea datelor. Setarea acestora în cadrul Fundației este foarte ușoară deoarece nu există nicio configurare reală. Doar adăugați marcajul de masă ca normal și stilurile sale vor fi luate în considerare. Singurul lucru pe care ar trebui să-l faceți este să adăugați lățimea coloanelor pentru a elimina coloanele.
| Lansare | Afacere | Global Corporation |
|---|---|---|
| 1 Bază de date | 5 Baza de date | 10 Baza de date |
| Nu există copii de rezervă | Backup-uri de 50 GB | Backup-uri de 100 GB |
Deși toate imaginile din Fundație sunt fluide în mod implicit, uneori veți avea probleme - întregul subiect al imaginilor din RWD este în curs de desfășurare.
Și lasă-mă să adaug, cred că este vorba de cray-cray că oricine din industria noastră poate vorbi despre * numai imagini * timp de peste o oră. #RWD
- Dave Rupert (@ davatron5000) 14 mai 2013
O astfel de problemă apare atunci când aveți text într-o imagine. Recent, Zurb a adăugat un nou plugin numit "Interchange"; sarcina sa este simplă - înlocuiți imaginea dorită cu una diferită atunci când dimensiunea ecranului ajunge la un anumit punct. Funcționează adăugând un atribut special, și anume "schimbul de date". Acesta este folosit pentru a găzdui opțiunile pentru modificările sursei de imagine.
Aici folosesc multe dintre opțiunile disponibile în atribut. Există câțiva parametri, de exemplu, puteți seta opțional un punct personalizat pentru a comuta imaginea.
Acesta nu este cel mai performant plugin, deoarece schimbările pot dura unu sau două secunde, sperăm că Zurb va aborda acest lucru și în viitor. Unul dintre beneficiile majore ale acestui plug-in este timpul de încărcare pe care îl salvează pe dispozitivele mobile. În loc să încărcați un jpeg masiv pe o conexiune 3G, puteți încărca o versiune mai mică optimizată a aceleiași imagini, eliberând lățimea de bandă pentru a încărca restul paginii.
În fiecare parte a acestei serii până acum am acoperit un plugin JavaScript disponibil în cadrul Fundației, dar în acest caz vom acoperi două.
În unele situații, este util să vă luați utilizatorii într-un turneu magic despre interfața cu utilizatorul. Google, de exemplu, face acest lucru atunci când lansează noi caracteristici în multe dintre aplicațiile lor. Prin îndrumarea utilizatorilor de la pas la pas, puteți explica ce face fiecare parte și unde conduce. Joyride acoperă acest lucru utilizând o listă care cuplează fiecare element de listă, ținând oprirea turului, cu un element pe pagină. Această listă poate fi o listă ordonată sau o listă neordonată, dar trebuie să aibă atât clasa "joyride-list", cât și atributul "data-joyride".
Să începem, aici avem un intro.
Prima oprire
Aici folosim noua funcție de schimb pentru a schimba imaginile pe baza dimensiunii ecranului.
A doua oprire
Utilizăm aici tabele de prețuri pentru a afișa o listă de servicii de la o companie de găzduire.
A treia oprire
Acesta este doar un link, dar se deschide un modal cu o masă standard înăuntru, eh incitant?
Sfarsitul liniei
Turul nostru se termină aici, vă rugăm să vă amintiți să vă luați toate bunurile pe drumul spre ieșire.
Fiecare element de listă are nevoie de propriul "id de date", care trebuie să se potrivească elementului id cu care este asociat. Dacă prima oprire din turneu este o etichetă h2 atunci id-ul dvs. de date ar putea fi "data-id =" title "". H2 ar avea nevoie de un id de "titlu". Uşor.
În afară de această setare de bază, veți dori să adăugați un buton "următor", astfel încât utilizatorii să poată naviga cu ușurință de la o stație la alta. Acestea sunt adăugate prin atașarea unui alt atribut la elementul de listă; "Date = text". În exemplul de mai sus, am folosit "Mergeți" pentru a începe și "Următorul" pentru a continua.
Există câteva opțiuni corecte pentru joyride și unele pot fi adăugate direct la fiecare element de listă. Deasupra am folosit date-opțiuni = "tipLocation: top; tipAnimation: decolorare" și după cum probabil ați ghicit acest lucru atribuie oprirea turului la partea superioară a elementului cuplat, estompând-o înăuntru. Există mulți alți parametri pe care îi puteți transmite despre inițializarea JavaScript-ului. De asemenea, puteți utiliza pluginul cookie-urilor sau, dacă utilizatorii dvs. sunt conectați, salvați o opțiune de a afișa turul o singură dată.
Din păcate, un lucru fundație nu include (încă) este un plugin de testare / caracteristică. Acestea pot fi cu adevărat la îndemână. Quovolver poate remedia acest lucru printr-o simplă configurare și marcare flexibilă. Adăugați scriptul în subsolul dvs., aruncați o marcaj și sunteți plecat.
În următoarea parte a examenului nostru de la Fundația Zurb vom vorbi despre Magellan, care creează navigare lipicioasă. Ne vom uita la clasele de vizibilitate, suportul din dreapta-stânga, apăsările de la tastatură, miniaturile, videoclipul flex și intrările și ieșirile zepto. Voi explica cazurile de utilizare a acestor caracteristici și modul cel mai bun de a le pune în aplicare în proiectele dvs..
Accentsconagua
