Share
Cine nu-și place să-și scape complet site-ul cu caracteristici bune? Dar ce se întâmplă atunci când spectatorii dvs. nu utilizează cel mai recent browser sau au JavaScript dezactivat? În tutorialul de astăzi, veți învăța cum să creați o galerie de imagini care să funcționeze în aproape toate mediile, utilizând tehnici de îmbunătățire progresivă.
Deci, ce anume este îmbunătățirea progresivă? În mod oficial, aceasta este următoarea:
Îmbunătățirea progresivă este o strategie pentru designul web care pune accentul pe accesibilitatea, marcarea semantică și tehnologiile de scriere și scriere exterioare. Îmbunătățirea progresivă utilizează tehnologiile web într-o manieră stratificată care permite tuturor să acceseze conținutul de bază și funcționalitatea unei pagini Web, utilizând orice browser sau conexiune la Internet, oferind în același timp celor cu o lățime de bandă mai bună sau cu un software de browser mai avansat o versiune îmbunătățită a paginii. (Wikipedia).
Îmbunătățirea progresivă este opusul degradării grațioase, unde vă construiți site-ul / aplicația cu toate caracteristicile și apoi asigurați-vă că arată bine și funcționează decent în browserele mai vechi. Cu o îmbunătățire progresivă, vom pune o fundație solidă pentru galeria noastră de imagini care va funcționa indiferent de locul în care o vizualizați. Apoi, vom stratifica pe ochi-bomboane și funcționalitate, până când vom avea o galerie de imagini frumoase și bine funcționate. Sa incepem!
Iată ce vrem să facem: dacă toate clopotele și fluierele sunt activate, vom putea să tragem imaginile în jur pentru a le vedea; va fi o simulare foarte simplă a unui set de fotografii de pe masa de cafea. Când faceți clic pe unul, acesta va aluneca deschis pentru a dezvălui câteva detalii despre imagine. Dacă JavaScript este dezactivat, vom avea o grilă frumoasă de imagine pentru a alege; făcând clic pe ele ne vor duce la o pagină cu o versiune mai mare a imaginii și a detaliilor. Dacă nu există suport CSS, vom obține o listă urâtă (dar care funcționează) a imaginilor.
Iată o imagine de ecran a produsului nostru final:
Începem cu un HTML semantic simplu vechi. Aceasta este fundația noastră, deoarece fiecare browser din afară este bun la parsarea codului HTML.
Galerie progresivă îmbunătățită Faceți clic pe o imagine de mai jos pentru ao vizualiza!
Asta e; lucruri de bază, nu? Nici un browser care merită titlul nu ar trebui să aibă o problemă cu acesta. Și acesta este primul nostru strat finalizat. Nu, nu este frumos, dar nu a fost scopul nostru: am vrut ceva care să funcționeze peste tot, indiferent de ce. Câteva lucruri de observat despre acest cod: în primul rând, este semantic, așa cum am spus că ar trebui să fie. S-ar putea să te întrebi despre divs în interiorul articolelor din listă. Ce-i cu ei? Chiar dacă începem cu oasele goale, anticipăm că majoritatea spectatorilor vor avea activat JavaScript, caz în care vom avea nevoie de acele diviziuni. Le-am putea insera cu jQuery, dar din moment ce noi do se așteaptă ca acestea să fie folosite de cele mai multe ori, este mai ușor să-l codificați cu greu. Celălalt lucru pe care trebuie să-l observați este că este utilizabil. Încercați să îl vizualizați în Lynx sau într-un alt browser text numai:
Apropo, paginile legate în HTML de mai sus vor fi disponibile în sursa descărcabilă; toate sunt similare cu acestea:
Themeforest MarketPlace de Envato ThemeForest
Themeforest oferă: Șabloane HTML, WordPress, Joomla, Site-uri Flash, Șabloane PSD, Javascript, Script-uri PHP
Pe un site real, veți înconjura acest lucru cu șablonul site-ului dvs., dar este bine pentru scopurile noastre.
Deși HTML semantic este frumos, pare un pic gol. Să-l îmbraci cu niște CSS. Desigur, mai întâi trebuie să menționăm foaia de stil:
Vom ridica mai întâi câmpul de joc cu o resetare Meyer dezbrăcată:
/ * Meyer's Reset * / html, corp, div, h1, h2, h4, p, a, img, ul, li margine: 0; umplutura: 0; frontieră: 0; contur: 0; font-weight: moștenire; font-style: moștenire; font-size: 100%; font-family: inherit; aliniere verticală: linia de bază; / * rețineți definirea stilurilor de focalizare! * /: focalizare contur: 0; corp linie-înălțime: 1; culoarea neagra; fundal: alb; ol, ul stil-list: nici unul; / * Restabilirea END Meyer * /
Acum trebuie să stilizăm galeria noastră pentru a fi folosită fără JavaScript. Vom începe cu câteva elemente generale și stil de fundal:
corp font: 13px / 1.5 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; / * <-- from 960.gs text.css */ background: #36b4dd; h1 font-size: 30px; #container > h1 umplutură: 10px; h4 font-size: 20px; padding-bottom: 10px;
Acum ne vom ocupa de poziția noastră și de lista.
#container h1 padding: 10px; #images li float: left; fundal: #ececec; frontieră: 1px solid #ccc; margin: 10px; lățime: 256px; padding: 10px; overflow: ascuns; #images li div lățime: 512px; overflow: ascuns; #images li a float: stânga; #images li div.info lățime: 246px; umplutură: 0 0 0 10px; plutește la stânga;
Veți observa că am stabilit o lățime pe elementele noastre de listă. Trebuie să facem acest lucru pentru funcționalitatea JavaScript; de asemenea, de ce overflow: hidden este setat. Acest lucru este ușor în cazul nostru, deoarece am făcut toate imaginile la aceeași lățime. Dacă așetele dvs. sunt diferite în lățime, va trebui probabil să setați lățimea fiecărui element din listă cu JavaScript. Acest lucru va funcționa, deoarece versiunea CSS numai nu necesită lățimea. Div divulat direct în elementul nostru de listă (care înfășoară întregul conținut) are o lățime de 512 pixeli, cu suprapunere ascunsă. Am aruncat ancora în stânga, astfel încât să putem flota div.info la stânga de lângă ea, după cum vedeți mai departe.
Deci, aici sunt roadele muncii noastre până acum:
Vom reveni puțin la CSS; dar acum, hai să ne întoarcem la JavaScript!
Vom folosi jQuery aici; deci începeți prin a importa din CDN-ul Google. De asemenea, vom avea nevoie de biblioteca jQueryUI. Am putea obține și asta de la Google, dar nu avem nevoie de întreaga bibliotecă. Am descarcat o copie de pe site-ul jQueryUI, cu doar componentele de baza si componentele dragi, ceea ce este tot ce avem nevoie. Puteți face ceea ce preferați.
Înainte de a începe codarea, să determinăm ce trebuie să facem.
Bine, deschideți o etichetă de script și să codificăm!
var imgs; $ (document) .ready (funcția () ); $ (fereastră) .load (funcția () );
Vom începe prin crearea unei variabile globale: o serie de elemente din listă (bine, va fi un matrice în curând). Apoi, am setat manipulatorii de evenimente pentru a) când DOM este gata și b) când fereastra este terminată încărcarea. Efectul pe care îl vom face când încărcarea ferestrei (despre care nu ți-am spus încă) nu presupune așteptarea până atunci, dar cred că va fi mai bine când imaginile au fost încărcate.
Acum, acest cod merge în funcția noastră document.ready:
var drag = ; $ ( 'H1') șterge (.); $ ( '# Imagini'). Adăugați (“
Ar trebui să fie direct: vom crea un obiect care va deține câteva detalii despre tragere; apoi vom elimina h1, vom adăuga un element de listă cu noi instrucțiuni în lista noastră și vom pune toate elementele listate în variabila noastră imgs.
Acum ne vom construi funcționalitatea. Într-adevăr este la fel de simplu ca aceasta:
imgs.draggable ();
Dar vom adăuga câteva opțiuni. Iată codul; perseverează-te și apoi o să ne plimbăm prin ea.
Accentsconagua
$ this.attr ("id") === '($) = $ ($) instrucțiuni ') $ this.fadeOut () remove (); imgs.each (funcție () var $ this = $ (this); ()), stop (), animație (width: 256) removeClass ('top'); ) var $ this = $ (aceasta), top, stânga, timp; drag.endTime = new Date (); drag.endPos = $ this.position (); drag.leftOffset = drag.endPos.left - drag.startPos .txt; drag.topOffset = drag.endPos.top - drag.startPos.top; time = (drag.endTime.getTime () - drag.startTime.getTime ()) / 60; top = (drag.topOffset / timp) .toString (); left = (drag.leftOffset / time) .toString (); $ this.animate (top: '+ =' + top; stânga: '+ =' + stânga); Am adăugat trei proprietăți obiectului nostru opțiuni drajebile: stivă, pornire și oprire. Stivă controlează indexul z dintr-un grup de obiecte și ia un obiect cu două proprietăți proprii: grup și min. Grupul este un selector jQuery; în cazul nostru, sunt elementele listate. Min este indexul minim z pentru orice element din grup. Deci, acum, când trageți un element, ajunge la partea superioară a grămezii.
Funcția de pornire este executată atunci când începeți să trageți un element. Începem prin cache-ul $ (acest lucru). Apoi, verificăm dacă articolul din listă pe care l-am luat are un cod de "instrucțiuni". Dacă se întâmplă acest lucru, îl dispari și îl scoatem. Apoi, bifăm peste fiecare element de listă și, dacă găsim cele care nu sunt lățime 256px, animăm lățimea la 256px și eliminăm clasa "de sus". Ce face topul? O vom modela în câteva minute, dar îi oferă utilizatorilor un feedback vizual atunci când fac clic pe un element. Apoi, facem ceva foarte important: am stabilit două proprietăți pe obiectul trageți. Unul (starttime) este momentul în care a început tragerea, iar celălalt (startPos) este poziția în care elementul a început la. Vom folosi aceste informații pentru a crea efectul atunci când tragerea se oprește.
În cele din urmă, avem funcția de oprire, care se întâmplă în mod previzibil atunci când utilizatorul se oprește să tragă. Din nou, începem prin cache-ul $ (acest lucru), precum și crearea a câtorva alte variabile pe care le vom da valori într-un moment. Apoi, am pus timpul și poziția de sfârșit în drag.endTime și drag.endPosition. Apoi, calculam offsetul stâng și superior prin scăderea unde suntem de unde suntem; putem face acest lucru cu proprietățile de sus și de stânga pe care le are obiectul de poziție. Acum, pentru încetinirea logicii animate: s-ar putea să fii foarte complicat cu acest algoritm, dar noi doar o vom păstra simplu. Vom gasi timpul in care a fost tras, prin scaderea starttime-ului nostru de la sfarsitul Timpului nostru; metoda getTime returnează numărul de millesecunde din 1970/01/01, deci diferența este în millezecunde. Apoi, divizăm această valoare cu 60, pe care am obținut-o prin încercare și eroare. Pe o tragere medie, aceasta stabilește variabila noastră de timp undeva între 2 și 3. Apoi divizăm deplasarea de sus și de la stânga în timp și convertim aceste valori în șir, salvându-le în partea de sus și în stânga. În cele din urmă, animăm elementul listei trasate, incrementând (ceea ce face '+ =' nu) valoarea de sus sau de stânga. În acest moment, ar trebui să puteți trage imaginile în jur și să obțineți efectul.
Cu toate acestea, făcând clic pe imagini vă va aduce la o nouă pagină. Deci, să punem la punct evenimentul handler pentru evenimentul de clic.
($) () $ $ this.attr ('id') === 'instrucțiuni') $ this.fadeOut () remove (); else dacă $ this.width ()! == 256) $ this.stop () animate (width: 256) removeClass ('top' .doc '). $ $ ($). $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ (date), head = $ d.filter ('h1'), para = $ d.filter ('p'); $ this.children ('div'') .find (". info"). append (cap, par); , eroare: funcție () var msg = 'Hopa!
Se pare că a existat o problemă; nu putem obtine aceste informatii chiar acum.
„; $ This.children ( 'div'). Append (“. „) .Find ( " Info") html (msg); ); $ this.css ('zIndex': 8) .stop () .animate (width: 512) .addClass ('top') .siblings () removeClass ('top'). animați (lățime: 256) .filter () () return $ (this) .css ('zIndex') === '8'). return false; ); Procedura standard de operare astăzi: începeți cu cache-ul $ (acest lucru). Încă o dată, verificăm codul de instrucțiuni; dacă este acolo, fadeOut și eliminați elementul. Dacă nu este acolo, verificăm lățimea elementului: dacă nu este 256px, înseamnă că acest element a fost deja făcut clic, așa că animăm lățimea până la 256 și eliminăm clasa noastră superioară (da, vom ajunge acolo ). Dacă elementul are o lățime de 256 pixeli, verificăm un element de copil cu clasa de informații. Putem face acest lucru chemând metoda de căutare pe element, trecând în selectorul pe care îl căutăm și obținând proprietatea de lungime. Dacă acest element nu există, rezultatul va fi 0, care este o valoare falsă, așa că o înfășurăm în paranteze și folosim o! pentru a comuta booleanul. Acum, dacă nu există elemente de copil cu o clasă de informații, vom intra în acest bloc, care este apelul nostru ajax.
$ .ajax () are un parametru obiect și vom folosi patru proprietăți: url, datatype, succes și eroare. Url și tipul de date sunt evidente: pur și simplu găsim ancora în elementul nostru de listă și setăm url la href; tipul nostru de date este html. Dacă apelul nostru ajax este reușit, vom lua datele pe care le primim, care reprezintă întregul conținut HTML al paginii și îl transformăm într-un obiect jQuery. Apoi, putem să filtram poziția și paragraful pe care știm că le avem acolo. Apoi, pur și simplu obțineți div în interiorul elementului nostru de listă, adăugați un div.info și adăugați titlul și paragraful la acesta. Dacă cererea noastră nu reușește, vom afișa un mesaj de eroare printr-un proces similar, utilizând funcția de eroare. După apelul nostru ajax, vrem să interpretăm un stil și o animație pe lista noastră. În primul rând, dorim să setăm indexul z la 8 sau orice număr mai mare decât numărul de elemente draggable pe care le avem. Apoi, dorim să oprim toate animațiile curente din acest element de listă și să animăm lățimea la 512 pixeli. În sfârșit, vom adăuga acea clasă de vârf. Apoi, îi luăm pe toți frații, care sunt celelalte elemente din listă. Vom opri orice animație pe ele și apoi le animăm la 256px lățime. În cele din urmă, vom filtra numai elementele cu un z-index de 8 și vom schimba indexul lor z-7 la 7. Acest lucru permite ca elementul listei listate în prezent să ajungă în partea de sus. Chiar la final, vom reveni false, așa că rămânem pe pagina noastră curentă (pentru că, deși aceasta este o funcție de clic pe un element de listă, utilizatorii vor face cel mai probabil clic pe imaginea ancorată în interiorul articolului din listă).
Deci, acesta este managerul nostru de clicuri; doar o singură bucată de JavaScript stânga. Dacă încercați acum exemplul nostru, veți vedea că funcționează ... un fel de. Ori de câte ori faceți clic pe un element de listă pentru ao deschide, acesta se deschide, dar veți observa o problemă destul de periculoasă. Aceasta se datorează faptului că elementele din listă sunt flotate spre stânga; hai să avem grijă de asta în fereastra noastră de lucru.
$ (fereastra) .load (functie () var $ w = $ (fereastra); imgs.css ( $ ()); pentru (var i = 0; imgs [i]; i ++) $ (imgs [i] Math.random () * 150, partea de sus: '+ =' + Math.random () * 150););
Dacă ați urmat destul de bine până în prezent, nu vă veți mișca aici: pur și simplu folosim metoda css a jQuery pentru a seta poziționarea la absolută și a stivă toate imaginile astfel încât marginile lor drepte să fie aliniate la mijlocul ferestrei de vizualizare și marginile de fund sunt aliniate la mijlocul vertical. Apoi folosim o buclă pentru a recurge la fiecare element de listă și animați-o aleatoriu în mod corect și în jos. Aceasta creează efectul unui sir de imagini care sunt împrăștiate.
Deci asta este pentru JavaScript! Acum, când un utilizator încarcă pagina, ar trebui să vadă ceva de genul acesta (după animație):
S-ar putea să terminăm acolo, dar vrem să recompensăm pe cei care folosesc browsere cu gândire înainte, așa că se întorc la CSS câteva minute. Și, da, ne vom uita la clasa de vârf.
Primul lucru pe care îl vom face este să adăugați colțuri rotunjite selectorului #images li.
border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
Apoi clasa de vârf, care listă articolele au doar atunci când sunt "deschise", arată astfel:
.sus box-shadow: 0 0 10px # 000; -moz-box-shadow: 0 0 10px # 000; -webkit-box-shadow: 0 0 30 px # 000;
Nimic incredibil de fantezist, dar cateva rafinamente frumoase cu toate acestea.
Asta este. Acum ar trebui să avem o galerie de imagini care să funcționeze decent fără CSS sau JavaScript, dar să profite pe deplin de acestea acolo unde aceste tehnologii sunt disponibile. Deci, cum ai îmbunătăți galeria noastră? Să o auzim în comentarii!
