Sexiga animerade flikar med MooTools

Ett modernt, attraktivt sätt att lägga mycket innehåll i ett litet utrymme är att använda ett fliksystem. Denna handledning visar dig hur du skapar ett sexigt animerat fliksystem komplett med CSS sprites, cookies och animerad flikbyte.

antaganden

Det finns några antaganden och noterar att vi går in på det här systemet med:

• Vi använder den senaste versionen av MooTools: 1.2.4.
• Klienten måste stödja JavaScript.
• Vi använder PHP för alla skript på serverns sida. Varje server-sidsspråk som du väljer kommer också att fungera med motsvarande syntax / metoder

Handledningen förutsätter också en grundläggande kunskap om javascript. En liten bit av MooTools eller JavaScript-ramverkan kommer att hjälpa till.

Handlingen

Så hur går det här fantastiska systemet på jobbet? Här är den grundläggande konturen:

• När sidan laddas matar vi ut två UL-listor med listobjekt: den första listan innehåller flikarna, den andra listan innehåller flikinnehållsobjekten.
• För varje flikuppsättning som vi producerar kontrollerar vi efter en viss cookie som kan berätta vilken flik som ska visas baserat på föregående besök. Om ingen cookie är närvarande antar vi den första fliken.
• När användaren klickar på en flik, glider det aktuella innehållet för den fliken bort och den nya flikens innehåll glider in.
• Vi sparar indexet för fliken i en cookie för framtida laddningsändamål (det vill säga att vi vill göra den senaste klickfliken den första som visas på nästa sida / besök.)

Själva systemet är ganska bulletproof. Om användaren inte tillåter cookies är startfliken för varje lista alltid 0.
Om JavaScript-stöd inte är närvarande visas inte flikarna på skärmen som vi visar: none; dem ursprungligen.

Steg ett: HTML

HTML för att utföra fliksystemet och motsvarande innehållsposter är otroligt enkelt i strukturen.

 
 
 
Flik 1
 
Flik 2
 
Flik 3
 
Tab 4
 
 
 
 
Detta är innehållet för flik 1.
 
Detta är innehållet för flik 2.
 
Detta är innehållet för flik 3.
 
Detta är innehållet för flik 4.
 
 

Vi kommer att ändra ovanstående HTML med PHP senare i denna handledning för att skapa ett mer robust system.

Steg två: CSS

Som med alla CSS- och HTML-kombinationsrutor kan du ställa in flikarna och deras innehållsposter men du vill.
Jag har valt att använda Facebook-stil CSS sprites för mina exempel flikar.
Inse att du vill utforma följande objekt på ett visst sätt så att systemet fungerar:

• Fliken innehållsobjekt måste ha en höjd av 0 och deras överflöde är dolda. Det gör det möjligt för alla innehållsobjekt att vara "dolda", så att säga när sidan laddas.
• Mellan "CSS" och "ul.tabs li a.active" CSS-selektorer vill du tilldela den aktiva väljaren ett annat utseende så att användaren vet att den är den aktuella fliken.

 / * flikar struktur * / .tab-container bredd: 320px; bakgrund: #eee; vaddering: 5px 10px;  ul.tabs list-style-type: none; marginal: 0; padding: 0;  ul.tabs li float: left; marginal: 10px 5px 0 0;  ul.tabs li a padding: 5px 10px; gränsen: 1px solid #ddd; font-weight: bold; bakgrund: url (tab-sprite.jpg) 0 0 repeat-x; color: # 000; text-decoration: none;  ul.tabs li a.active border-color: # 028433; bakgrundsställning: 0 -96px; färg: #fff;  / * sprite! Bakgrundsbytesbyte * / ul.tabs li a.active:hover text-decoration: none; markör: default;  ul.tabs li: sväva text-decoration: underline;  ul.tabs-innehåll margin: 10px 0 0 0; padding: 0;  ul.tabs-innehåll li höjd: 0; overflow: hidden; marginal: 0; padding: 0;  / * rensar floats * / div.clear clear: both;  / * dvs fixar * / * html ul.tabs-innehåll li float: left;  / * ie6 * / * + html ul.tabs-innehåll li bredd: 99%; flyta till vänster;  / * ie7 * /

Observera att vi behöver implementera några specifika korrigeringar för Internet Explorer. ful, men nödvändig.

Steg tre: MooTools Javascript

En av MooTools stora fördelar är det kraftfulla klasssystemet.
MooTools klasser möjliggör flexibla, organiserade och utdragbara funktioner.
Vår MooTools klass kallas "TabSet." Eftersom TabSet-klassen utför många åtgärder,
Vi kan bryta ner varje del av klassen.

Den första raden ger alltid klassen ett namn:

 / * ge klassen ett namn * / var TabSet = ny klass (

Nästa måste vi skapa ett objekt som håller våra klassalternativ:

 alternativ: // standard flikalternativ aktivClass: 'aktiv', // css klass cookieName: ", // inget namn betyder ingen cookie cookieOptions: // alternativ för cookien, om cookie önskad varaktighet: 30, // 30 dagar sökväg: '/', startIndex: 0 // börja med det här objektet om ingen cookie eller aktiv,

Våra alternativ tillåter oss att definiera:

• activeClass: CSS-klassen som ska tilldelas den aktuella valda fliken (eller "aktiv").
• cookieName: Namnet på den cookie som representerar den här flikuppsättningen. Om du inte definierar ett kaknamn används inte cookies.
• cookieOptions: Ett objekt som innehåller alternativen för cookien.
• startIndex: fliken för att göra aktiva inledningsvis. Börjar med 0. Överstegs av aktivClass-variabeln om en cookie hittas.

Med bara tre alternativ i klassen skulle TabSet betraktas som en relativt enkel klass.

Nästa genomför vi två alternativ och evenemang:

 Redskap: [Alternativ, händelser],

Genomförandealternativ och händelser tillåter oss att hantera givna alternativ och
brand anpassade ladda och ändra händelser på våra listor var som helst i klassen.

Därefter definierar vi "initialisera" -metoden som löper vid skapandet av varje förekomst av klassen:

 initiera: funktion (flikar, innehåll, alternativ) // hantera argument this.setOptions (options); // blanda de angivna alternativen med standardalternativen this.tabs = $$ (flikar); // spara de angivna flikarna i klassen this.contents = $$ (innehåll); // spara det angivna innehållet i klassen // bestämma fliken "aktiv" var aktiv = (Cookie.read (this.options.cookieName) || this.options.startIndex); // bestäm det index som ska vara aktivt inledningsvis this.activeTab = this.tabs [aktiv] .addClass (this.options.activeClass); // nu identifiera fliken "aktiv" this.activeContent = this.contents [aktiv] .setStyle ('height', 'auto'); // identifiera det "aktiva" innehållet // köra varje flik / innehållskombinat genom "processItem" -metoden som vi kommer se under this.tabs.each (funktion (flik, i) this.processItem (flik, this.contents [i], i);, detta); // flikar är klara - släck lasthändelsen! this.fireEvent ( 'belastning'); ,

Nästa kommer arbetshorsmetoden i vår TabSet-klass: processItem:

 processItem: funktion (flik, innehåll, i) var contentHeight = content.getScrollSize (). y; // lägg till en klickhändelse på flikfliken.addEvent ("klicka", funktion () // om det inte är den aktiva fliken om (flik! = this.activeTab) // stopp om (e) e.stop ( ); // ta bort den aktiva klassen från den aktiva fliken this.activeTab.removeClass (this.options.activeClass); // gör den klickade fliken den aktiva fliken (this.activeTab = fliken) .addClass (this.options.activeClass) ; // mellan den gamla fliken innehåll upp // mellan det nya innehållet ner this.activeContent.set ('tween', onComplete: function () this.activeContent = content.fade ('in'). set ', onComplete: $ empty). tween (' height ', contentHeight); // avbryt fliken ändra händelsen this.fireEvent (' change ', [flik, innehåll]); .bind (this)) setStyles (height: contentHeight, overflow: 'hidden'). fade ('out'). tween ('height', 0); // spara indexet till cookie om (this.options.cookieName) Cookie.write this.options.cookieName, i); .bind (detta)); );

Här är den grundläggande översikten av vad processItem-metoden gör:

1. Accepterar en matchande flik, innehållsobjekt och dess index ...
2. Beräknar höjden på innehållsdelen.
3. Lägger till en klickhändelse i fliken som:
   1. Bekräftar att den här fliken inte är aktiv redan (vi vill inte animera eller ändra något om de klickar på den redan aktiva fliken)
   2. Tar bort den aktiva CSS-klassen från den aktuella fliken och lägger den till fliken som bara klickades.
   3. Slider den aktuella flikens innehåll ur synvinkel och slider sedan det nya innehållet i sikte. "Change" -händelsen avfyras när animationen är klar.
   4. Sparar den nya flikens index till cookien så att den nya fliken väljs initialt när användaren laddar om sidan eller går till en annan sida..

Och nu en provanvändning av vår klass:

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

Vi tillhandahåller vår förekomst fliken LI A och innehållet LI. Vi tillhandahåller även alternativet valfria alternativ. Så enkelt är det att använda den här klassen! Här är komplett klass med användning:

 / * class * / var TabSet = ny klass (alternativ: activeClass: 'active', // css klass cookieName: ", cookieOptions: duration: 30, // 30 days path: '/', startIndex: 0 // börja med det här objektet om ingen cookie eller aktiv, Implementer: [Alternativ, Händelser], initiera: funktion (flikar, innehåll, alternativ) // hantera argument this.setOptions (options); this.tabs = $$ flikar); this.contents = $$ (innehåll); // bestämma fliken "aktiv" var aktiv = (Cookie.read (this.options.cookieName) || this.options.startIndex); this.activeTab = this. flikar [aktiv] .addClass (this.options.activeClass); this.activeContent = this.contents [aktiv] .setStyle ('height', 'auto'); // behandla varje flik och innehåll this.tabs.each (flik, i) this.processItem (flik, this.contents [i], i);, this); // flikar är klara - ladda det! this.fireEvent ('load');, processItem: funktion (flik, innehåll, i) var contentHeight = content.getScrollSize (). y; // lägg till en klickhändelse i flikfliken.addEvent ("klicka", funktion (e) // stopp! om (e) e.stop (); // om det inte är det aktiv flik om (flik! = this.activeTab) // ta bort den aktiva klassen från den aktiva fliken this.activeTab.removeClass (this.options.activeClass); // gör den klickade fliken den aktiva fliken (this.activeTab = fliken) .addClass (this.options.activeClass); // mellan den gamla fliken innehåll upp // mellan det nya innehållet ner this.activeContent.set ('tween', onComplete: function () this.activeContent = content.fade ('in'). set ('tween' , onComplete: $ empty). tween ('height', contentHeight); / / brand fliken ändra händelsen this.fireEvent ('Change', [flik, innehåll]); .bind (detta)). setStyles (höjd: contentHeight, overflow: 'hidden'). fade ('out'). tween ('height', 0); // spara indexet till cookie om (this.options.cookieName) Cookie.write (this.options.cookieName, jag, this.options.cookieOptions);  .bind (detta)); ); / * användning * / window.addEvent ('load', funktion () var tabset = ny TabSet ($$ ('# tabs1 li a'), $$ ('# contents1 li'), cookieName: 'demo- lista '););

Steg fyra: PHP / HTML

Kom ihåg hur jag sa att vi skulle modifiera vår ursprungliga HTML med PHP? Nu är det dags. Eftersom vi Maj
ha en kaktset för vår TabSet, vi borde försöka upptäcka det när vi matar ut fliken HTML.
Varför? Eftersom vi vill att flikarna ska laddas in smidigt. Vi vill också ta emot för användare som inte har JavaScript eller cookies aktiverade.
Utan detta PHP kan du märka ett litet "hopp" i området aktivt innehåll.

  
 
 
" > Flik 1
 
" > Flik 2
 
" > Flik 3
 
" > Flik 4
 
 
 
 
> Detta är innehållet för flik 1. Detta är innehållet för flik 1. Detta är innehållet för flik 1. Detta är innehållet för flik 1. Detta är innehållet för flik 1. Detta är innehållet för flik 1. Detta är innehållet för flik 1. Detta är innehållet för flik 1.
 
> Detta är innehållet för flik 2. Detta är innehållet för flik 2. Detta är innehållet för flik 2. Detta är innehållet för flik 2. Detta är innehållet för flik 2. Detta är innehållet för flik 2. Detta är innehållet för flik 2. Detta är innehållet för flik 2.
 
> Detta är innehållet för flik 3. Det här är innehållet för flik 3. Detta är innehållet för flik 3. Detta är innehållet för flik 3. Detta är innehållet för flik 3. Detta är innehållet för flik 3. Detta är innehållet för flik 3. Detta är innehållet för flik 3.
 
> Detta är innehållet för flik 4. Detta är innehållet för flik 4. Detta är innehållet för flik 4. Detta är innehållet för flik 4. Det här är innehållet för flik 4. Det här är innehållet för flik 4. Detta är innehållet för flik 4. Detta är innehållet för flik 4.
 
 

Steg fem: PHP: Rymmer för användare utan Javascript eller cookies

Vissa användare aktiverar inte JavaScript eller cookies för säkerhetsändamål. Vi vill dock att vårt system ska fungera för dem dock. Om du kommer ihåg från föregående kvarterskod,
vi använder länkar med en frågesträngs nyckel i "demo-list" för att ange en ändring i fliken. Följande block av PHP högst upp på sidan (innan någon utmatning) kommer att
Hjälp oss att ändra cookievärdet till den begärda fliken.

Observera att vi bara uppdaterar sidan om vi kan verifiera att cookien har ställts in. Om cookien inte har ställts in har användaren sina cookies inaktiverade.

Uppdrag slutfört!

Här är en snabb sammanfattning av fördelarna med MooTools TabSet-klassen:

• Vår klass implementerar händelser så att vi kan skapa anpassade händelser och händelsehanterare.
• Layouten för hela systemet styrs helt enkelt av enkla HTML och CSS.
• Användningen av cookies för att komma ihåg den föregående fliken är stor användbarhetsförbättring.
• Själva klassen att det är en MooTools klass gör att det enkelt kan implementeras från projekt till projekt.

Inline MooTools Javascript

Jag har alltid förespråkat att du kodar en önskad MooTools-funktionalitet "inline" innan du ändrar den till en klass. Här är inline MooTools JavaScript-kod:

 $$ ('ul.tabs'). Varje (funktion (tabList) // hämta innehållslistan var tabContentList = tabList.getNext ('ul.tabs-innehåll'), // få namnet på kakan, vilket är "title" -attributet i fliklistans cookie = 'demo-list', // startfliksindex startIndex = Cookie.read (cookie) || 0, // få flikarna LI-flikar i själva fliken = tabList.set (' titel, "). getElements ('li'), // få innehållet LI-objekt lis = tabContentList.getElements ('li'), // fliken (LI) som för närvarande aktiv aktivTab = flikar [startIndex] .addClass ('aktiv'), // innehållet LI som är aktivt aktivContent = lis [startIndex] .setStyle ('height', 'auto'); // för varje flik inom denna flik / innehållsförhållande ... tabs.each (flik, i) // stopp om (e) e.stop (); // beräkna respektive innehållsartikelns höjd var innehåll = lis [i], contentHeight = content.getScrollSize (). y; // lägg till klicket händelse till fliken som ... tab.addEvent ('klicka', funktion () // om det inte är den aktuella aktiva fliken ... om (flik! = aktivTab) // lägg till och ta bort den aktiva klassen från gammal vs ny flik activeTab.removeClass ('aktiv'); (activeTab = flik) .addClass ('aktiv'); // starta torka upp, torka ner effekten ActiveContent.set ('tween', onComplete: function () activeContent = content.fade ('in'). set ('tween', onComplete: $ empty). tween ('height', contentHeight);). setStyles (höjd: contentHeight, overflow: 'hidden'). fade ('out'). tween ('height', '0'); // skriv till cookie Cookie.write (cookie, i); //fena! ); ); // brandklick händelse activeTab.fireEvent ('klicka'); );

Observera att alla "var" -förklaringarna i toppen antingen blir argument eller alternativ för klassen. Övergången från inline MooTools JavaScript till en klass är extremt enkel!

Har förbättringsidéer?

Har du fler idéer för den här klassen? Var noga med att dela dem i kommentarerna nedan!

Skriv en Plus-handledning

Visste du att du kan tjäna upp till $ 600 för att skriva en PLUS-handledning och / eller screencast för oss? Vi letar efter djupgående och välskrivna handledning på HTML, CSS, PHP och JavaScript. Om du har förmåga, kontakta Jeffrey på [email protected].

Observera att den faktiska ersättningen kommer att vara beroende av kvaliteten på den slutliga handledningen och screencast.

• Följ oss på Twitter, eller prenumerera på Nettuts + RSS-flödet för de bästa webbutvecklingsstudierna på webben.