Share
În această parte a examenului nostru asupra Fundației Zurb vom vorbi despre Magellan, care creează navigație lipicioasă. Ne vom uita la clasele de vizibilitate, sprijinul din dreapta la stânga, apăsările de la tastatură, miniaturile, videoclipul flexibil ș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..
În această sesiune am acoperit o mare parte din cadrul Fundației și există încă un mod corect de urmat. Să analizăm câteva caracteristici pe care le puteți implementa rapid pe site-urile dvs. Vom începe cu un plugin JavaScript de data aceasta, se numește Magellan și vă permite să adăugați navigație lipicioasă la proiectele dvs..
Nu este neobișnuit ca un client să solicite navigarea care rămâne fixată pe pagină atunci când utilizatorul se îndepărtează de navigația standard, cum ar fi derularea paginii. Magellan vine la salvare, adăugând o navigare fixă la pagină odată ce utilizatorul scroll peste un anumit punct.
Cu marcarea simplă este ușor să începeți.
- a lua legatura
- Despre
Adăpostite într-o structură listă tradițională uniformă, cu un div pentru a conține totul, aceasta ar trebui să fie rapidă și ușoară pentru a te ridica și a alerga. Există două tipuri de atribute speciale pentru Magellan; Date-expiditon-Magellan care este utilizat ca tip de poziție și Date-sosire Magellan care pot fi asociate cu o placă de ancoră a paginii.
Deoarece acest plugin JavaScript este atât de ușor, singura altă opțiune pe care trebuie să o cunoașteți este cea care poate fi trecută pe inițializare.
Accentsconagua
$ (document) .foundation ('magellan', // precizați clasa folosită pentru secțiunile active activeClass: 'active', // câți pixeli până când bara magellan se lipeste, 0 = pragul automat: 0); Deci, din nou, două opțiuni aici; setați-vă o clasă personalizată Magellan și setați punctul pe pagina unde magellan va apărea în acțiune.
Acum o vedeți, acum nu o faceți! Destul de des poate fi dificilă re-jigging tot conținutul pentru diferite dimensiuni ale ecranului. Cu clasele de vizibilitate ale Fundației puteți afișa pur și simplu mai multe elemente sau mai puține elemente în funcție de setul de puncte de întrerupere. Să începem cu clasele "spectacol", toate destul de simple, cu o varietate de breakpoints la care să se joace. Găsesc clase de vizibilitate cele mai utile atunci când trebuie să adaug / elimina elemente între smartphone și desktop, poate pentru un dispozitiv ca iPad.
.Show-for-small / * Vizibil până la 768 pixeli * / .Show-pentru-mediu-jos / * Vizibil de la 768px jos * /. -up / * Vizibil de la 768 pixeli în sus * /. Afișați de la 1280 de pixeli jos * /. Afișați-l pentru mare / * Vizibil între 1280 și 1440 pixeli * /. * Vizibilă de la 1280px în sus * / .show-for -large / * Vizibilă numai deasupra 1440px * /
Pentru a ascunde elementele la aceleași puncte de rupere, utilizați doar "ascundeți" în loc de "arată". Poate că ai nevoie de o clasă orientată pe orientare? Acestea sunt, de asemenea, incluse. Veți observa, de asemenea, cursuri pentru atingere prea. Ați vrut să alegeți aici.
.Show-for-peisaj / * Vizibil pentru orientare peisaj * / .show-for-portrait / * Vizibil pentru orientare portret * / .Hide-pentru-peisaj / * Ascuns pentru orientare peisaj * /. pentru orientare portret * / / * Clase de detectare a atingerii * / .show-for-touch / * Vizibil pentru dispozitive cu atingere tactil * / .hide-for-touch / * Ascunse pentru dispozitive cu atingere * /
Din nou, acestea vor fi într-adevăr la îndemână dacă sunteți într-un loc strâns și trebuie să ascundeți unele elemente sau, opusul polar, dacă vă aflați într-un spațiu deschis, puteți arunca mai multe elemente în.
Credeam că o să acopăr repede, deoarece nimeni nu menționează într-adevăr sprijinul de la dreapta la stânga.
Acest lucru este extrem de util dacă aveți vreodată un proiect internațional cu o bază de utilizatori centrică arabică (de exemplu). Take Persian, care utilizează o versiune modificată a alfabetului arabic, care necesită un text de la dreapta la stânga. În timp ce site-uri precum BBC News demonstrează această funcționalitate, au o echipă de dezvoltatori capabili să facă față acestei provocări de design. În cadrul Fundației, totul a fost făcut pentru dvs..
Înlocuiți eticheta html cu acest lucru și veți fi plecați. Stai, știu la ce te gândești, nu vreau arabă, nu? Nu vă faceți griji, chineză zh, Farsi fa, ebraică el / iw, japoneză ja, urdu ur, yiddish yi / ji sunt, de asemenea, sprijinite. Pur și simplu modificați valoarea atributului "lang" cu limba preferată.
Pariez ca multi dintre voi care au descarcat Fundatia au scazut caseta de selectare a tastaturii deoarece nu erati sigur ce a fost. Dreapta? Dacă nu te-ai uitat deja la docs, ești pe cale să afli.
Apăsați tasta pentru a împacheta textul și a le arăta ca o cheie. Deci, mai degrabă decât să spuneți controlul presei, alter și ștergeți în text vechi plictisitor, puteți să-l molid și să îi dați o anumită semnificație.
ctrl + Alt + del
Simplistă dar eficientă, mai ales dacă aveți chei atribuite anumitor funcții, cum ar fi făcând butoanele direcționale să controleze cursorul orbită.
Miniaturile reprezintă o modalitate rapidă de a modela o imagine mică cu o ancoră.
Aceasta este una dintre acele mici detalii care adaugă la magia care este Fundația. Prinde-ți o imagine, fă-o în palmă eticheta cu o clasă de "a". Boom. Treaba făcuta. Acest lucru este minunat pentru proiectele care au puțin sau deloc input de design, deoarece dezvoltatorul poate face site-ul să arate minunat cu stilurile minime incluse în cadrul.
Încărcarea videoclipurilor poate fi o durere, în special cu acele playere video vechi bazate pe flash care au seturi duble de atribute de dimensiune (ugh, ce inconvenient), făcând ca și videoclipurile să răspundă, este un efort. Scopul este simplu; doriți să adăugați videoclipul favorit al pisicilor lol pe site-ul dvs., dar lucrurile darn devine șchiopătat sau tăiat atunci când îl urmăriți pe telefon în fiecare seară înainte de pat sau în fiecare dimineață pe iPad în timp ce vă aflați în baie. Cu flex-video puteți elibera un oftat de ușurare și să vă întoarceți la toate acțiunile pisicii lol.
Înfășurați orice videoclip de pe site-uri populare (cum ar fi Youtube și Vimeo) într-o div cu clasa "flex-video", apoi fundația va păstra raportul de aspect în loc, scalarea video și prevenirea oribil deformat sau tăiat în pisici jumătate lol.
În fiecare pachet al cadrului Fundației se află o bibliotecă specială JavaScript numită "zepto", care se comportă în același fel ca jQuery.
În pagina de încărcare Fundația se uită pentru a vedea dacă zepto va rula, dacă nu face atunci jQuery este trimis la pasul obraznic. Problema este că, însă, zepto nu este un înlocuitor complet al jQuery. De fapt, este vorba de aproximativ 7,100 de linii de cod mai ușoare decât jQuery, deci de ce este și de ce i-ar pierde fundația jQuery pentru această bibliotecă infantilă JavaScript?
Zepto reproduce suficient setul de funcții jQuery pentru a face față tuturor comenzilor de bază pe care le pune Fundația. Folosind o bibliotecă mult mai ușoară este o mișcare inteligentă acum că cadrul este mobil primul - este nevoie de mai mult de câteva secunde pentru a încărca jQuery pe un dispozitiv mobil printr-o conexiune celulară. Cele 7,100 de linii suplimentare de cod nu sunt totuși redundante, deoarece acestea se ocupă de toate animațiile de lux și compatibilitatea browser-ului, printre altele.
Sunt un utilizator destul de greu de animație jQuery, așa că am tendința de a ucide doar zepto de la a merge. Cu toate acestea, am lucrat recent la un proiect care a fost numai pentru dispozitive mobile și care nu necesită nicio animație jQuery; folosind zepto le-a oferit utilizatorilor un timp de încărcare mai rapid de 2,3 secunde. Deci, dacă poți să faci fără umflarea jQuery, atunci zepto este o înlocuire fantastică a oaselor goale.
Oferiți-le utilizatorilor ceva de făcut atunci când se pierd în mod inevitabil într-un punct mort de pe site-ul dvs., jocul invadator 404!
Găsit pe site-ul mass: werk, acesta este un mod distractiv și potențial capabil de a te pierde în următorul proiect al site-ului tău. Utilizați tastele săgeată pentru a controla arma A & S pentru a muta și spaţiu la foc (vezi ce am facut acolo?)
În următorul articol vom examina SASS, cum să obținem versiunea SASS a Fundației, o să o pregătim, instrumentele de care aveți nevoie și o scurtă trecere în revistă a modului de utilizare a acestui preprocesor de stil puternic în proiectele viitoare.
