Bruke Wonderful jFlow plugin

Det ser ut til at besettelsen av webdesignindustrien akkurat nå er muligheten til å opprette en "kjennetegnet del". Selv om det en gang kan ha krevd mye ferdighet, er det ikke lenger tilfelle. I denne skjermbildet vil jeg vise deg hvordan du enkelt lager en rullbar utvalgt seksjon ved å bruke en av Theme Forests populære temaer som referanse. La oss komme inn på det!

* Beklager den mindre enn perfekte lydkvaliteten. Jeg mente å hente en kondensormikrofon denne uken, men jeg har vært super opptatt. Jeg lover å få det tatt vare på ASAP. Også, hvis du er interessert i å lage videoopplæringer for oss, send meg en e-post på [email protected].

Du kan se og kjøpe Justins tema her.

Last ned pluggen

Som alltid med en ny plugin, er det første trinnet å besøke skaperenes nettsted og laste ned pluginet. Alt du trenger er en liten Javascript-fil - og selvfølgelig en kopi av jQuery-kjernebiblioteket. Mens du er på nettstedet, ta litt tid til å gå over konseptene. Du vil bli overrasket over hvor enkelt implementeringen er, relativt sett (eller å skrive?).

Gjennomføring

Etter at du har lagret Javascript-filen til harddisken, importerer du til et nytt webprogram som det.

* Merk at du skal importere kjernebiblioteket før jFlow. Ellers får du noen åpenbare feil!

For å bruke jFlow-pluginet må du forstå funksjonen til noen ids og klasser.

div # controller: Dette elementet vil fungere som vår "krok" når du ringer til vår jQuery.
.jFlowControl: Disse spansene vil være barn til #controller div. For så mange lysbildene som du har, må du opprette tilknyttede strekkmerker med denne klassen. Hvis jeg for eksempel hadde fem lysbilder, må jeg ha fem koder med en klasse av .jFlowControl. Du forstår dette mer med eksempel, snart.
div # lysbilder: Innenfor lysbildene div, må du neste flere divs som inneholder ønsket innhold for hvert "lysbilde". Mer om dette senere.
.jFlowPrev, .jFlowNext: Disse to klassene lar deg fortsette til neste lysbilde, eller omvendt.

Eksempel på HTML-dokument

   Nr. 1  Nr. 2  Nr. 3  
    
  Her er et kjennetegnet bilde. Hyggelig!
 Her er et annet pent karakterisert bilde. Hyggelig!
 Her er et siste veldig kult kjennetegnet bilde. Hyggelig!

La oss gå over dette litt.

Som med de fleste sider har vi pakket inn hele innholdet vårt i et "wrap" -element. Dette er rent av estetiske årsaker. Det er ikke nødvendig.
I min controller div (som er kroken for jFlow), har jeg lagt til tre span-koder med en klasse av "jFlowControl". Tenk på disse spannene som faner. Hvis du klikker "Nei 3", vil det raskt sykle til den tredje tilknyttede "lysbilde". Husk at antallet span-koder du har må være lik antall div i din "lysbilde" div. Merk at begge har tre.
Vi går nå til en div med et ID for "prevNext". Dette er ikke et nøkkel id, jeg kunne ha kalt det Rick hvis jeg hadde ønsket det. Det er bare en wrapper div, slik at jeg kan kontrollere hvor mine "Neste" og "Forrige" knapper går på siden. Klassens navn på bildene er imidlertid viktig: 'jFlowPrev', 'jFlowNext'.
Sist kommer vi til "slides" div. Innenfor denne div, plasserer vi barns div. Hver av disse barna vil tjene til å være en "fan". Igjen, vær oppmerksom på at hvis jeg ønsket å legge til et fjerde bilde, ville jeg også trenge en ekstra "jFlowControl" span-tag innenfor kontrolleren div.

jQuery

Koden som vi må skrive er ganske enkel. Først vurderer du det endelige skriptet, og så går jeg over hver linje.

 $ (funksjon () $ ("# controller"). jFlow (lysbilder: "#slides", bredde: "980px", høyde: "313px", varighet: 600););

Det er det!. Først venter vi på når dokumentet er klart for å bli krysset. Så tar vi tak i vår controller div og kaller "jFlow" metoden. Det er mange parametere tilgjengelig for oss, men vi bruker bare noen få.

slides: Det spør, "Hva er navnet på div-elementet som inneholder hvert lysbilde- eller fane? Vi knytter den til den aktuelle" dias "-delen som jeg opprettet tidligere. Men du kan endre den hvis du liker.
Bredde høyde: Disse er påkrevd. I dette eksemplet bruker jeg bare bilder. Som et resultat har jeg satt bredde- og høydeverdiene lik bildene.
Varighet: I millisekunder, hvor lenge vil du ha overgangen fra lysbilde til lysbilde? Jeg har satt 600 - som er omtrent halvparten av et sekund.

Du er ferdig

Den eneste andre tingen du vil implementere er noen CSS styling. JFlow vil imidlertid fungere perfekt uten det. Det ville åpenbart bare være av estetiske årsaker. Hvis du ønsker mer informasjon, går jeg over stylingen litt mer i skjermbildet.

Oppsettet som se ovenfor er forsettlig enkelt. Jeg lar deg forestille deg alle de forskjellige bruksområder!

For noen uker siden, skapte Chris Coyier en opplæring på en lignende plugin - "codaSlider". Jeg har personlig brukt pluginet i et par prosjekter, men jeg har funnet ut at jFlow er mye enklere og enklere å bruke. Uansett, begge er kraftige plugins. Bruk dem klokt.

Abonner på Weekly Screencasts

Du kan legge til vår RSS-feed til dine ITUNES-podcaster ved å gjøre følgende:

Når ITUNES har lastet, klikket du på "Avansert fan"
Velg "Abonner på podcast"
Skriv inn "http://feeds.feedburner.com/NETTUTSVideos"

Det burde gjøre det! Screencast vil også bli søkbar på ITUNES i de neste tjuefire timer.

Tilleggsressurser

jFlow-plugin

Dette er hjemmesiden til jFlow-plugin. Det vil komme i gang med Javascript-filen sammen med noen nyttige eksempler.

Besøk nettsiden
Themeforest

Hvis du ønsker å lære mer, eller bare få litt ekstra penger, må du sørge for at du besøker ThemeForest.net.

Besøk nettsiden
Dynamisk moro med enkel kake og jQuery - Coda skyvehåndbok

Sjekk ut et annet jQuery-plugin som utfører en lignende funksjon. I denne opplæringen vil Chris Coyier vise deg hvordan du kan implementere coda-glidebryteren for å lage en vakker bloggroll.

Les artikkelen

Abonner på NETTUTS RSS-feed for flere daglige webutviklinger og artikler.

Kode