Utilizând plug-in-ul minunat jFlow

Se pare că obsesia industriei de web design chiar acum este capacitatea de a crea o "secțiune featured". Deși o dată s-ar fi cerut o mare abilitate, nu mai este cazul. În acest ecran, vă voi arăta cum să creați cu ușurință o secțiune recomandată care să poată fi scrollată utilizând unul dintre temele populare ale Theme Forest ca referință. Să intrăm în asta!

* Ne pare rău despre calitatea audio mai mică decât cea perfectă. Am vrut să ridic un microfon condensator în această săptămână, dar am fost foarte ocupat. Promit să am grijă de ASAP. De asemenea, dacă sunteți interesat în crearea de tutoriale video pentru noi, trimiteți-mi un e-mail la [email protected].

Puteți vedea și cumpăra tema lui Justin aici.

Descărcați pluginul

Ca întotdeauna cu un plugin nou, primul pas este să vizitezi site-ul creatorului și să descarci pluginul. Tot ce veți avea nevoie este un mic fișier Javascript - și, bineînțeles, o copie a bibliotecii de bază jQuery. În timp ce sunteți la acest site, faceți câteva momente pentru a trece peste concepte. Veți fi uimiți de cât de simplu este implementarea, relativ vorbind (sau tastând?).

Punerea în aplicare

După ce ați salvat fișierul Javascript pe hard disk, importați-l într-o nouă aplicație web așa cum este.

* Rețineți că ar trebui să importați biblioteca de bază înainte de jFlow. În caz contrar, veți obține unele erori evidente!

Pentru a utiliza pluginul jFlow, va trebui să înțelegeți funcția unor ID-uri și clase.

div # controler: Acest element va servi ca "cârlig" atunci când suntem la jQuery.
.jFlowControl: Aceste deschideri vor fi copii ai #controler div. Pentru cât mai multe diapozitive pe care le aveți, trebuie să creați etichete asociate cu această clasă. De exemplu, dacă am avea cinci diapozitive, trebuie să am cinci etichete cu o clasă de .jFlowControl. Veți înțelege mai mult acest exemplu, în scurt timp.
div # slide-uri: În cadrul diapozitivelor div, trebuie să cuipeți divuri suplimentare care conțin conținutul dorit pentru fiecare "diapozitiv". Mai multe despre asta mai târziu.
.jFlowPrev, .jFlowNext: Aceste două clase vă permit să continuați cu următorul diapozitiv sau invers.

Document de probă HTML

   Numarul 1  Nr. 2  Numarul 3  
    
  Iată o imagine prezentată. Frumos!
 Iată o altă imagine bine prezentată. Frumos!
 Aici este o ultima imagine extrem de interesanta. Frumos!

Să mergem puțin peste asta.

Ca și în majoritatea paginilor, am împachetat întregul nostru conținut într-un element "wrap". Aceasta este doar din motive estetice. Nu este necesar.
În controlerul meu div (care este cârligul pentru jFlow), am adăugat trei etichete de span cu o clasă de "jFlowControl". Gândiți-vă la aceste deschizături ca file. Dacă faceți clic pe "Nu 3", va trece rapid la cea de-a treia asociată "Slide-". Amintiți-vă că numărul de etichete de marcare pe care le aveți trebuie să fie egal cu numărul divs din div "slide" div. Rețineți că ambele au trei.
Mergând de-a lungul drumului, ajungem acum la un div cu un id de "prevNext". Nu e un id cheie, l-aș fi numit Rick dacă aș fi vrut. Este pur și simplu un div wrap astfel încât să pot controla în cazul în care butoanele mele "Next" și "Previous" merg pe pagină. Numele clasei imaginilor sunt însă importante: "jFlowPrev", "jFlowNext".
În cele din urmă, ajungem la "diapozitivele" div. În cadrul acestui div, vom plasa diviziile pentru copii. Fiecare dintre acești copii va servi ca o "filă". Încă o dată, rețineți că, dacă vroiam să adaug o a patra imagine, aș fi nevoie și de o etichetă suplimentară "jFlowControl" în cadrul controlerului div.

jQuery

Codul pe care trebuie să-l scriem este destul de simplu. Mai întâi, revedeți scenariul final și apoi voi trece peste fiecare linie.

 $ ((controller). jFlow (diapozitive: "#slides", lățime: "980px", înălțime: "313px", durata: 600);

Asta e!. În primul rând, așteptăm momentul în care documentul este gata să fie traversat. Apoi, apucăm controlerul div și apelăm metoda "jFlow". Există mulți parametri disponibili pentru noi, dar vom folosi doar câteva.

Slide-uri: Se întreabă: "Care este numele elementului div care conține fiecare diapozitiv - sau fila? Îl vom asocia cu dia" diapozitivele "potrivite pe care le-am creat mai devreme, dar îl puteți schimba dacă vă place.
Latime inaltime: Acestea sunt necesare. În acest exemplu, folosesc numai imagini. Ca urmare, am setat valorile de lățime și înălțime egale cu cele ale imaginilor.
Durată: În milisecunde, cât timp doriți să se efectueze trecerea de la diapozitiv la diapozitiv? Am setat 600 - ceea ce înseamnă aproximativ o jumătate de secundă.

Ai terminat

Singurul lucru pe care doriți să îl implementați este un anumit stil CSS. Cu toate acestea, jFlow va funcționa perfect fără ea. Aceasta ar fi evident numai din motive estetice. Dacă dorești mai multe informații, mă duc mai mult în scenă.

Aspectul de mai sus este intenționat simplu. Vă las să vă imaginați toate utilizările diferite!

Acum câteva săptămâni, Chris Coyier a creat un tutorial pe un plugin similar - "codaSlider". Am folosit personal plugin-ul în câteva proiecte, cu toate acestea, am descoperit că jFlow este mult mai simplu și mai ușor de utilizat. Oricum, ambele sunt pluginuri puternice. Utilizați-le cu înțelepciune.

Aboneaza-te la Screencast-urile săptămânale

Puteți adăuga feedul nostru RSS la podcasturile dvs. ITUNES, efectuând următoarele:

Odată ce ITUNES sa încărcat, a făcut clic pe "Advanced Tab"
Alegeți "Abonați-vă la Podcast"
Introduceți "http://feeds.feedburner.com/NETTUTSVideos"

Ar trebui să o facă! Ecranul va fi, de asemenea, căutat pe ITUNES în următoarele douăzeci și patru de ore.

Resurse aditionale

jFlow Plugin

Acesta este site-ul home al pluginului jFlow. Veți începe să utilizați fișierul Javascript împreună cu câteva exemple utile.

Vizitati site-ul
ThemeForest

Dacă sunteți în căutarea de a afla mai multe, sau de a face pur și simplu niște bani în plus, asigurați-vă că plătiți o vizită la ThemeForest.net.

Vizitati site-ul
Dynamic Fun cu Simple Pie și jQuery - Coda slider tutorial

Verificați un alt plugin jQuery care efectuează o funcție similară. În acest tutorial, Chris Coyier vă va arăta cum puteți implementa pluginul slider-ului coda pentru a crea un blogroll frumos.

Citiți articolul

Abonați-vă la fluxul RSS NETTUTS pentru mai multe tutori și articole zilnice de dezvoltare web.

Cod