Sexy animerte faner ved hjelp av MooTools

En moderne, attraktiv måte å plassere mye innhold på, er å bruke et tabs system. Denne opplæringen vil vise deg hvordan du lager et sexy, animert tabssystem komplett med CSS sprites, informasjonskapsler og animert faneveksling.

Antagelser

Det er noen forutsetninger og bemerker at vi går inn i dette systemet med:

• Vi bruker den nyeste versjonen av MooTools: 1.2.4.
• Klienten må støtte JavaScript.
• Vi bruker PHP for alle skript på server-side. Ethvert server-side språk du velger vil også fungere tilsvarende syntax / metoder

Opplæringen tar også utgangspunkt i grunnleggende kunnskap om javascript. En liten bit av MooTools eller JavaScript-rammeopplevelse vil hjelpe.

Handlingen

Så hvordan går dette fantastiske systemet på jobb? Her er den grunnleggende oversikten:

• Når siden lastes, sender vi to UL-lister med listeposter: den første listen inneholder kategoriene, den andre listen inneholder innholdsfortegnelsene for kategorien.
• For hvert tabssett vi sender ut, kontrollerer vi for en gitt informasjonskapsel som kunne fortelle oss hvilken kategori som skal vises basert på forrige besøk. Hvis ingen informasjonskapsel er til stede, antar vi den første kategorien.
• Når brukeren klikker en fane, glir det gjeldende innholdet for den kategorien ut av visningen og den nye faneinnholdet glir inn.
• Vi lagrer indeksen av fanen i en informasjonskapsel for fremtidig lastingsformål (dvs. vi vil gjøre den siste klikken-fanen den første som vises på neste side / besøk.)

Systemet selv er ganske bulletproof. Hvis brukeren ikke tillater informasjonskapsler, vil startfanen for hver liste alltid være 0.
Hvis JavaScript-støtte ikke er til stede, vil ikke fanene vises på skjermen som vi viser: ingen; dem i utgangspunktet.

Trinn ett: HTML

HTML for å oppnå tabulasjonssystemet og tilhørende innholdsobjekter er utrolig enkelt i struktur.

 
 
 
Fane 1
 
Tab 2
 
Tab 3
 
Tab 4
 
 
 
 
Dette er innholdet for kategorien 1.
 
Dette er innholdet for kategori 2.
 
Dette er innholdet for kategori 3.
 
Dette er innholdet for fan 4.
 
 

Vi vil modifisere ovennevnte HTML med PHP senere i denne opplæringen for å skape et mer robust system.

Trinn to: CSS

Som med hvilken som helst CSS og HTML-kombinasjon, kan du stile kategoriene og innholdsobjektene dine, men du vil.
Jeg har valgt å bruke Facebook-stil CSS sprites for mine eksempel faner.
Innse at du vil utforme følgende elementer på en bestemt måte slik at systemet fungerer:

• Faneinnholdene må ha en høyde på 0 og overløpet er skjult. Det gjør det mulig for alle innholdsdelene å bli "skjult", så å si når siden laster.
• Mellom de "ul.tabs li a" og "ul.tabs li a.active" CSS selectors vil du tilordne den "aktive" väljeren et annet utseende slik at brukeren vet at den er den valgte fanen.

 / * tabsstruktur * / .tab-container bredde: 320px; bakgrunn: #eee; polstring: 5px 10px;  ul.tabs listestil-type: none; margin: 0; padding: 0;  ul.tabs li float: left; margin: 10px 5px 0 0;  ul.tabs li a padding: 5px 10px; grense: 1px solid #ddd; font-vekt: bold; bakgrunn: url (tab-sprite.jpg) 0 0 repeat-x; color: # 000; text-decoration: none;  ul.tabs li a.active border-color: # 028433; bakgrunnsposisjon: 0 -96px; farge: #fff;  / * sprite! bakgrunnsposisjon swap * / ul.tabs li a.active:hover text-decoration: none; markøren: default;  ul.tabs li: hover text-decoration: understreke;  ul.tabs-innhold margin: 10px 0 0 0; padding: 0;  ul.tabs-innhold li høyde: 0; flow: hidden; margin: 0; padding: 0;  / * fjerner flyter * / div.clear clear: both;  / * dvs. fikser * / * html ul.tabs-innhold li float: left;  / * ie6 * / * + html ul.tabs-innhold li bredde: 99%; float: venstre;  / * ie7 * /

Vær oppmerksom på at vi må implementere noen få Internet Explorer-spesifikke reparasjoner; stygg, men nødvendig.

Trinn tre: MooTools Javascript

En av de store fordelene ved MooTools er det kraftige klassesystemet.
MooTools klasser tillater fleksible, organiserte og utvidbare funksjoner.
Vår MooTools klasse vil bli kalt "TabSet." Siden TabSet-klassen utfører mange handlinger,
Vi kan bryte ned hver del av klassen.

Den første linjen gir alltid klassen et navn:

 / * gi klassen et navn * / var TabSet = ny klasse (

Deretter må vi opprette et objekt som vil holde våre klasses alternativer:

 Alternativer: // standard tabalternativer activeClass: 'active', // css class cookieName: ", // ingen navn betyr ingen cookie cookieOptions: // alternativer for informasjonskapsel, hvis cookie er ønsket varighet: 30, // 30 dager sti: '/', startIndex: 0 // start med dette elementet hvis ingen informasjonskapsel eller aktiv,

Våre alternativer tillater oss å definere:

• activeClass: CSS-klassen som skal tilordnes den aktuelle valgte (eller "aktive") -kategorien.
• cookieName: Navnet på cookien som representerer dette flippsettet. Hvis du ikke definerer et informasjonskapselnavn, vil ikke cookies bli brukt.
• cookieOptions: Et objekt som inneholder alternativene for informasjonskapsel.
• startIndex: fanen for å lage aktive først. Starter med 0. Overstyrt av ActiveClass-variabelen hvis en informasjonskapsel er funnet.

Med bare tre alternativer i klassen, vil TabSet bli vurdert som en relativt enkel klasse.

Deretter implementerer vi to alternativer og hendelser:

 Utførelser: [Alternativer, Hendelser],

Implementeringsalternativer og hendelser vil tillate oss å håndtere gitt alternativer og
brann tilpassede last og endre hendelser på våre lister hvor som helst i klassen.

Deretter definerer vi "initialiser" -metoden som kjører ved opprettelsen av hver forekomst av klassen:

 initialiser: funksjon (faner, innhold, alternativer) // håndtere argumenter this.setOptions (options); // bland de valgte alternativene med standardvalgene this.tabs = $$ (tabs); // lagre de angitte kategoriene i klassen this.contents = $$ (innhold); // lagre det angitte innholdet i klassen // bestemme den aktive fanen var aktiv = (Cookie.read (this.options.cookieName) || this.options.startIndex); // bestemme indeksen som skal være aktiv i utgangspunktet this.activeTab = this.tabs [aktiv] .addClass (this.options.activeClass); // nå identifiser den "aktive" kategorien this.activeContent = this.contents [aktiv] .setStyle ('høyde', 'auto'); // identifiser det "aktive" innholdet // kjør hver kategori / innholdskombinasjon gjennom "processItem" -metoden som vi vil se under this.tabs.each (funksjon (tab, i) this.processItem (tab, this.contents [i], i);, dette); // faner er klare - brann lastbegivenheten! this.fireEvent ( 'last'); ,

Neste kommer arbeidshorse-metoden til vår TabSet-klasse: processItem:

 processItem: funksjon (tab, innhold, i) var contentHeight = content.getScrollSize (). y; // legg til et klikkhendelse til fanebladet.addEvent ('klikk', funksjon () // hvis det ikke er den aktive kategorien hvis (tab! = this.activeTab) // stopp hvis (e) e.stop ( ); // fjerne den aktive klassen fra den aktive kategorien this.activeTab.removeClass (this.options.activeClass); // gjør den klikket kategorien den aktive kategorien (this.activeTab = tab) .addClass (this.options.activeClass) ; // mellom den gamle kategorien innhold opp // mellom det nye innholdet ned this.activeContent.set ('tween', onComplete: function () this.activeContent = content.fade ('in'). set ('tween ', onComplete: $ empty). tween (' høyde ', contentHeight); / / brann tabevarianthendelsen this.fireEvent (' change ', [tab, innhold]); .bind (dette)). setStyles (høyde: contentHeight, overflow: 'hidden'). fade ('out'). tween ('height', 0); // lagre indeksen til informasjonskapsel om (dette.options.cookieName) Cookie.write this.options.cookieName, i); .bind (dette)); );

Her er den grunnleggende oversikten over hva prosessemetoden gjør:

1. Godtar en matchende kategori, innholdsobjekt og indeks ...
2. Beregner høyden på innholdselementet.
3. Legger til et klikkhendelse i kategorien som:
   1. Bekrefter at denne kategorien ikke allerede er aktiv (vi vil ikke animere eller endre noe hvis de klikker på den allerede aktive kategorien)
   2. Fjerner den "aktive" CSS-klassen fra den nåværende kategorien og legger den til kategorien som nettopp ble klikket.
   3. Lyser innholdet i den nåværende fanen uten å vise, og lyser det nye innholdet i visningen. "Change" -hendelsen blir avbrutt når animasjonen er fullført.
   4. Lagrer den nye fanens indeks til informasjonskapselen, slik at når brukeren laster på siden eller går til en annen side, velges den nye kategorien først.

Og nå en prøvebruk av vår klasse:

 window.addEvent ('domready', funksjon () var tabset = ny TabSet ($$ ('# tabs1 li a'), $$ ('# innhold1 li'), cookieName: 'demo-list'); );

Vi gir vår eksempel tabellen LI A og innholdet LI. Vi gir også valgfrie argumentet. Det er så enkelt det er å bruke denne klassen! Her er den komplette klassen med bruk:

 / * klasse * / var TabSet = ny klasse (alternativer: activeClass: 'aktiv', // css klasse cookieName: ", cookieOptions: varighet: 30, // 30 dager sti: '/', startIndex: 0 // start med dette elementet hvis ingen informasjonskapsel eller aktiv, Utførelser: [Alternativer, Hendelser], initialiser: funksjon (faner, innhold, alternativer) // håndter argumenter this.setOptions (options); this.tabs = $$ faner); this.contents = $$ (innhold); // bestemme "aktiv" -fanen var aktiv = (Cookie.read (this.options.cookieName) || this.options.startIndex); this.activeTab = dette. tabs [aktiv] .addClass (this.options.activeClass); this.activeContent = this.contents [aktiv] .setStyle ('høyde', 'auto'); // behandle hver kategori og innhold this.tabs.each (funksjon (tab, i) this.processItem (tab, this.contents [i], i);, this); // tabs er klare - last det! this.fireEvent ('load');, processItem: funksjon (tab, innhold, i) var contentHeight = content.getScrollSize (). y; // legg til et klikkhendelse i kategorien tab.addEvent ('klikk', funksjon (e) // stopp! hvis (e) e.stop (); // hvis det ikke er det aktiv tab hvis (tab! = this.activeTab) // fjern den aktive klassen fra den aktive kategorien this.activeTab.removeClass (this.options.activeClass); // gjør det klikket fanebladet den aktive kategorien (this.activeTab = tab) .addClass (this.options.activeClass); // mellom den gamle kategorien innhold opp // mellom det nye innholdet ned this.activeContent.set ('tween', onComplete: function () this.activeContent = content.fade ('in'). set ('tween' , onComplete: $ empty). tween ('høyde', contentHeight); / brann tabevarianthendelsen this.fireEvent ('change', [tab, innhold]); bind (dette)). setStyles (høyde: contentHeight, overflow: 'hidden'). fade ('out'). tween ('høyde', 0); // lagre indeksen til cookie hvis (dette.options.cookieName) Cookie.write (this.options.cookieName, jeg, this.options.cookieOptions);  .bind (dette)); ); / * bruk * / window.addEvent ('load', funksjon () var tabset = ny TabSet ($$ ('# tabs1 li a'), $$ ('# innhold1 li'), cookieName: 'demo- liste '););

Trinn fire: PHP / HTML

Husk hvordan jeg sa at vi ville endre vår opprinnelige HTML med PHP? Nå er klokken. Siden vi kan
ha et informasjonskapselsett for TabSet, vi bør forsøke å oppdage det når vi sender ut fanen HTML.
Hvorfor? Fordi vi vil at kategoriene skal lastes inn jevnt. Vi ønsker også å imøtekomme for brukere som ikke har JavaScript eller cookies aktivert.
Uten dette PHP kan du merke et svakt "hopp" i det aktive innholdsområdet.

  
 
 
" > Fane 1
 
" > Tab 2
 
" > Fane 3
 
" > Tab 4
 
 
 
 
> Dette er innholdet for kategorien 1. Dette er innholdet for kategorien 1. Dette er innholdet for kategorien 1. Dette er innholdet for kategorien 1. Dette er innholdet for kategorien 1. Dette er innholdet for kategori 1. Dette er innholdet for kategorien 1. Dette er innholdet for kategori 1.
 
> Dette er innholdet for kategorien 2. Dette er innholdet for kategori 2. Dette er innholdet for kategorien 2. Dette er innholdet for kategori 2. Dette er innholdet for kategori 2. Dette er innholdet for kategori 2. Dette er innholdet for tabulator 2. Dette er innholdet for kategori 2.
 
> Dette er innholdet til tabulator 3. Dette er innholdet til tabulator 3. Dette er innholdet for tabulator 3. Dette er innholdet til tabulator 3. Dette er innholdet for tabulator 3. Dette er innholdet for tabulator 3. Dette er innholdet for tabulator 3. Dette er innholdet til fanen 3.
 
> Dette er innholdet for kategorien 4. Dette er innholdet til kategorien 4. Dette er innholdet for kategorien 4. Dette er innholdet for kategorien 4. Dette er innholdet for kategorien 4. Dette er innholdet for kategorien 4. Dette er innholdet for tabulator 4. Dette er innholdet for kategorien 4.
 
 

Trinn fem: PHP: Romslig for brukere uten Javascript eller Cookies

Noen brukere aktiverer ikke JavaScript eller informasjonskapsler for sikkerhetsformål. Vi vil fortsatt at systemet vårt skal fungere for dem. Hvis du husker fra forrige blokk av kode,
Vi bruker koblinger med en spørringsnøkkel for "demo-liste" for å angi en endring i kategorien. Følgende blokk med PHP øverst på siden (før noen utdata) vil
hjelp oss til å endre informasjonskapselverdien til den forespurte fanen.

Vær oppmerksom på at vi bare oppdaterer siden hvis vi kan bekrefte at informasjonskapsel er angitt. Hvis informasjonskapselen ikke er angitt, har brukeren deaktivert sine informasjonskapsler.

Oppdrag utført!

Her er et raskt sammendrag av fordelene med MooTools TabSet-klassen:

• Vår klasse implementerer hendelser slik at vi kan lage tilpassede hendelser og hendelseshåndterere.
• Oppsettet av hele systemet styres fullstendig av enkle HTML og CSS.
• Bruk av informasjonskapsler for å huske den forrige fanen er god brukervennlighet.
• Selve klassen at det er en MooTools-klasse, gjør at det enkelt kan implementeres fra prosjekt til prosjekt.

The Inline MooTools Javascript

Jeg har alltid forsøkt å kode en ønsket MooTools-funksjonalitet "inline" før du slår den inn i en klasse. Her er inline MooTools JavaScript-koden:

 $$ ('ul.tabs'). hver (funksjon (tabList) // få innholdslisten var tabContentList = tabList.getNext ('ul.tabs-innhold'), // få navnet på informasjonskapselen, som er "tittel" -attributtet til tabellen liste cookie = 'demo-list', // start fanen index startIndex = Cookie.read (cookie) || 0, // få de aktuelle fanene LI elementer tabs = tabList.set (' tittel ','). getElements ('li'), // få innholdet LI-elementer lis = tabContentList.getElements ('li'), // kategorien (LI) som for tiden er aktiv activeTab = tabs [startIndex] .addClass ('aktiv'), // innholdet LI som for øyeblikket er aktivt activeContent = lis [startIndex] .setStyle ('høyde', 'auto'); // for hver kategori i denne kategorien / innholdsforholdet ... tabs.each (tab, i) // stopp hvis (e) e.stop (); // beregne det respektive innholdselementets høyde var innhold = lis [i], contentHeight = content.getScrollSize (). y; // legg til klikk hendelse til fanen som ... tab.addEvent ('klikk', funksjon () // hvis det ikke er den aktuelt aktiverte kategorien ... hvis (tab! = aktivTab) // legg til og fjern den aktive klassen fra gammel vs ny kategori activeTab.removeClass ('aktiv'); (activeTab = tab) .addClass ('aktiv'); // start tork opp, tørk ned effekt ActiveContent.set ('tween', onComplete: function () activeContent = content.fade ('in'). set ('tween', onComplete: $ empty). tween ('height', contentHeight);). setStyles (høyde: contentHeight, overflow: 'hidden'). fade ('out'). tween ('høyde', '0'); // skriv til cookie Cookie.write (cookie, i); // fin! ); ); // brannklikk hendelsen activeTab.fireEvent ('klikk'); );

Legg merke til at alle "var" -klæringene øverst enten blir argumenter eller alternativer for klassen. Overgangen fra inline MooTools JavaScript til en klasse er ekstremt enkel!

Har forbedringsideer?

Har du flere ideer til denne klassen? Husk å dele dem i kommentarene nedenfor!

Skriv en Plus Tutorial

Visste du at du kan tjene opp til $ 600 for å skrive en PLUS-opplæring og / eller screencast for oss? Vi leter etter dybde og velskrevne opplæringsprogrammer om HTML, CSS, PHP og JavaScript. Hvis du er i stand til å kontakte Jeffrey på [email protected].

Vær oppmerksom på at faktisk kompensasjon vil være avhengig av kvaliteten på den endelige opplæringen og screencast.

• Følg oss på Twitter, eller abonner på Nettuts + RSS-feed for de beste webutviklingsopplæringene på nettet.