Share
Să adăugăm setul de competențe al Fundației, învățând cum să folosească barele de progres, alertele, tooltipurile și mega drop-urile pe care le utilizează Zurb pe site-ul lor, dar nu sunt de fapt în cadrul Fundației. Vom analiza adăugarea tuturor acestor componente în formularul de contact din tutorialul anterior, folosind o atingere de jQuery personalizată, pentru a obține o idee despre modul în care aceste elemente ar putea funcționa în propriile proiecte. Să începem.
Mai întâi vom adăuga un semn de întrebare la caseta de validare "Trimiteți-mi spam", spunând utilizatorilor un pic mai mult despre spamul pe care îl vom trimite dacă verifică caseta.
La fel ca în orice fragment de cod anterior care adaugă funcționalitate, cum ar fi o sugestie pentru un element, se bazează pe o clasă pentru a da naștere lucrurilor, în acest caz este "has-tip".
S-ar putea să fi observat că am înfășurat textul în etichetă într-o etichetă de span. Această etichetă de acoperire are nevoie de unul dintre atributele elementului personalizat al Fundației, "data-tooltip". Acest lucru vă va oferi un instrument de lucru, dar veți dori ceva text în vârful și, probabil, pentru a seta lățimea. Ambele pot fi atinse cu încă atribute, "titlu" și "lățime de date". Fără lățimea de date vârful va umple doar spațiul recipientului părinte al elementului.
Adăugarea clasei "has-tip" și împachetarea elementului de alegere în intervalul de timp cu aceste atribute înseamnă că puteți lipi cu ușurință un sfat de instrucțiuni la orice element.
În tutorialul anterior am construit un simplu formular de contact receptiv, care a demonstrat modul în care ar putea fi utilizate elementele de formă ale Fundației. Acum, să implementăm mai multe elemente pentru a adăuga un nou layer la formular. Vom face acest lucru prin adăugarea de etape către butonul de trimitere; vom lua clicul standard al butonului de trimitere a mesajului, vom adăuga un indicator de progres, un mesaj de succes și vom șterge intrările odată ce e-mailul va fi trimis.
Pe măsură ce prezint caracteristica Fundației, aceasta nu este o formă funcțională, deși ați putea adăuga un script de trimitere bazat pe PHP și utilizați ajax pentru a face postul de formular fără a vă deplasa departe de pagină. Uitați-vă la Trimiteți un formular fără refresh de pagină utilizând jQuery pentru instrucțiuni suplimentare.
Imediat sub elementul de intrare oferit, putem adăuga bara de progres. Acest lucru va face uz de aceleași clase ca butoanele, folosind clasa rotunjită de această dată.
Folosind un div cu clasa "progress", lucrurile se stabilesc și acționează ca și container, în timp ce spanul interior (folosind clasa "metru") acționează ca culoarea care umple progresiv containerul.
Notă: Spanul utilizează o etichetă de stil cu lățimea de pornire a barei de progres. Vom folosi jQuery pentru a anima acest lucru mai târziu.
Să adăugăm un mesaj de succes, astfel încât utilizatorii să știe că mesajul a fost trimis. În acest exemplu, ne vom concentra doar pe o alertă de succes, dar într-un scenariu real, probabil că veți avea nevoie și de o alertă de eroare. Ați putea implementa acest lucru utilizând funcția de transferare a mesajelor și pluginul validare jQuery.
Succes! Mesajul tau a fost trimis. ×
Luați div și adăugați atributul "date-alert" împreună cu câteva clase, și anume "alertă-box" și "succes". Dacă adăugăm și un buton de închidere, utilizatorii pot închide mesajul de succes după ce l-au citit. Dacă vă uitați la ceea ce am creat până acum, aceasta va părea un pic dezordonată, dar este bine că vom adăuga niște jQuery acum pentru a crea straturile de interacțiune de care avem nevoie.
Accentsconagua
var submitButton = $ ('trimiteți'); // element de buton cache variabil var varBar = $ ('# progress'); // variabilă la cache element de bara de progres var progressBarMeter = $ ('# progress .metru'); // variabilă la elementul de măsură al cache-ului var alertBox = $ ('. Alert-box'); // variabilă la elementul cache meter var closeButton = $ ('. Close'); // variabila pentru a cache-ul elementului butonului de inchidere $ (submitButton) .click (function () // Incepe interactiunea de trimitere $ (this) .fadeOut (500); // Fadeaza butonul de trimitere atunci cand se face click setTimeout (function // Amesteaza urmatorul efect $ (progressBar) .fadeIn (500); // Se estompeaza in bara de progres $ (progressBarMeter) .animate (width: '100%', 2000) () // Întârzie efectul următor $ (progressBar) .fadeOut (500); // Fadează bara de progres atunci când animația completează setTimeout (funcția () // Întârzie următorul efect $ (alertBox) .fadeIn (500) ; // Fades in alert de succes, 500);, 2500);, 500);); Pentru a explica mai bine acest cod, am comentat fiecare linie. Este o coadă de efecte care creează interacțiunea dorită. Deși acest lucru este pur vizual, dar poate fi ușor ajustat pentru a adăuga feedback real și validare. De asemenea, ar fi util să adăugăm o funcție de alertă apropiată care resetează formularul pentru utilizare ulterioară.
Notă: Am memorat toate elementele utilizate în cadrul funcției, stocându-le în variabile. Puteți citi mai multe despre motivul pentru care facem acest lucru prin citirea Quick Tip - jQuery Newbs: Opriți jumping în piscină
$ (closeButton) .click (function () // Inițiază funcția de resetare $ (alertBox) .fadeOut (500); // Fadează mesajul de succes $ (progressBarMeter) .css (width: '0%'); // Reinițializează bara de progres setTimeout (funcția () // Întârzie următorul efect $ ('input, textarea') nu ('input [type = submit]') (submitButton) .fadeIn (500); // Fade înapoi în butonul de trimitere, 500); return false; // Aceasta oprește eliminarea alertei de succes pe măsură ce vrem să o ascundem); Din nou aici am comentat fiecare linie pentru a explica ceea ce face fiecare linie. Aceasta acoperă destul de mult actualizarea noastră la formularul de contact. Aceste caracteristici sunt foarte flexibile și pot fi utilizate oriunde în proiectele dvs., personalizarea este o apăsare pe CSS.
Am petrecut mult timp pe grupul Google al Fundației și mulți oameni întreabă despre caracteristica Mega Drop pe site-urile web ale lui Zurb. M-am gândit să acoperim acest lucru aici, deoarece se pare că nimeni nu acoperă cu adevărat ceea ce este un pic de jQuery.
Luați o etichetă secțiune și completați-o cu conținutul dorit în interiorul drop-ului, adăugați un atribut stil folosind "display: none" și apoi următorul cod jQuery:
var megaDrop = $ ('# megaDrop'); // variabilă pentru a cache elementul megaDrop var megaContainer = $ ('# megaContainer'); // variază la cache elementul megaContainer $ (megaDrop) .click (funcția () $ (megaContainer) .slideToggle (300, funcția () if ($) .html ("+"); altceva $ (megaDrop) .html ("×"););); Toate Mega Drop este într-adevăr, este un efect slideToggle care arată și ascunde un container cu o animație culisantă. Există o mulțime de utilizări practice pentru Mega Drop, fie că este vorba de navigație extinsă, fie de o galerie ascunsă sau poate chiar de un videoclip promoțional.
Multe proiecte, în special interfețele de tablouri de bord, necesită diagrame și Chartjs.org este o modalitate excelentă de a le adăuga în proiectele bazate pe Fundație. De ce să nu încercați, vizualizați datele în moduri diferite, animați și personalizați? Aceste diagrame arată excelent în cadrul Fundației, chiar și pe ecranele retinei.
Chartjs utilizează elementul canvas HTML5, susținut de toate browserele moderne, iar polyfills oferă suport pentru IE7 / 8. Pluginul este gratuit, ușor și oferă o mulțime de opțiuni de personalizare.
În următorul tutorial vom acoperi pluginul Joyride (care oferă utilizatorilor un tur al site-ului dvs.), panouri, tabele de prețuri, tabele regulate și schimburi de date; care vă oferă posibilitatea de a seta diferite imagini pentru diferite dimensiuni ale ecranului. Destul de mult să se acopere!
