Sexy geanimeerde tabbladen met MooTools

Een moderne, aantrekkelijke manier om veel inhoud in een kleine ruimte te plaatsen, is via een tabsysteem. Deze tutorial laat je zien hoe je een sexy, geanimeerd tabsysteem maakt compleet met CSS sprites, cookies en geanimeerde tab-swapping.

Veronderstellingen

Er zijn enkele aannames en opmerkingen dat we dit systeem gaan gebruiken met:

We zullen de meest recente versie van MooTools gebruiken: 1.2.4.
De client moet JavaScript ondersteunen.
We zullen PHP gebruiken voor server-side scripting. Elke server-side taal van uw keuze zal ook de bijbehorende syntaxis / methoden gebruiken

De tutorial veronderstelt ook een basiskennis van javascript. Een klein beetje MooTools of JavaScript framework-ervaring zal helpen.

Het plot

Dus hoe gaat dit geweldige systeem werken? Dit is de basisbeschrijving:

Wanneer de pagina wordt geladen, voeren we twee UL-lijsten uit met lijstitems: de eerste lijst bevat de tabbladen, de tweede lijst bevat de tab-inhouditems.
Voor elke tabset die we uitvoeren, controleren we op een bepaalde cookie die ons kan vertellen welk tabblad moet worden weergegeven op basis van het vorige bezoek. Als er geen cookie aanwezig is, nemen we het eerste tabblad aan.
Wanneer de gebruiker op een tabblad klikt, schuift het huidige inhoudsitem voor dat tabblad uit het beeld en schuift het nieuwe tabblad in beeld.
We slaan de index van het tabblad op in een cookie voor toekomstige laaddoeleinden (d.w.z. we willen dat het laatstgeklikte tabblad als eerste wordt weergegeven op de volgende pagina / bezoek.)

Het systeem zelf is behoorlijk kogelvrij. Als de gebruiker geen cookies toestaat, is het starttabblad voor elke lijst altijd 0.
Als JavaScript-ondersteuning niet aanwezig is, zijn de tabbladen niet zichtbaar op het scherm, omdat we het volgende weergeven: none; ze in eerste instantie.

Stap één: de HTML

De HTML om het tabsysteem en de bijbehorende content-items te bereiken is ongelooflijk eenvoudig van structuur.

   Tab 1
 Tab 2
 Tab 3
 Tab 4
 
 
  Dit is de inhoud voor tabblad 1.
 Dit is de inhoud voor tabblad 2.
 Dit is de inhoud voor tabblad 3.
 Dit is de inhoud voor tabblad 4.

We zullen de bovenstaande HTML later in deze tutorial aanpassen met PHP om een robuuster systeem te maken.

Stap twee: CSS

Zoals met elke CSS- en HTML-combo, kunt u de tabbladen en hun inhouditems opmaken zoals u dat wilt.
Ik heb ervoor gekozen CSS-sprites in Facebook-stijl te gebruiken voor mijn voorbeeldtabbladen.
Realiseer je dat je de volgende items op een specifieke manier wilt stylen zodat het systeem werkt:

De tabinhouditems moeten een hoogte van 0 hebben en hun overloop is verborgen. Hiermee kunnen alle contentitems worden "verborgen", om zo te zeggen, wanneer de pagina wordt geladen.
Tussen de "ul.tabs li a" en "ul.tabs li a.active" CSS selectors, wil je de "actieve" selector een andere look geven, zodat de gebruiker weet dat het "het momenteel geselecteerde tabblad" is..

 / * tabbladenstructuur * / .tab-container width: 320px; achtergrond: #eee; opvulling: 5px 10px;  ul.tabs list-style-type: none; margin: 0; padding: 0;  ul.tabs li float: left; marge: 10px 5px 0 0;  ul.tabs li a opvulling: 5px 10px; border: 1px solid #ddd; font-weight: bold; achtergrond: url (tab-sprite.jpg) 0 0 repeat-x; color: # 000; text-decoration: none;  ul.tabs li a.active border-colour: # 028433; achtergrond-positie: 0 -96px; color: # fff;  / * sprite! achtergrond positiewissel * / ul.tabs li a.active:hover text-decoration: none; cursor: standaard;  ul.tabs li: hover text-decoration: onderstrepen;  ul.tabs-content margin: 10px 0 0 0; padding: 0;  ul.tabs-content li height: 0; overloop verborgen; margin: 0; padding: 0;  / * wist drijft * / div.clear duidelijk: beide;  / * ie fixes * / * html ul.tabs-content li float: left;  / * ie6 * / * + html ul.tabs-content li width: 99%; float: left;  / * ie7 * /

Houd er rekening mee dat we enkele specifieke fixes voor Internet Explorer moeten implementeren; lelijk, maar noodzakelijk.

Stap drie: de MooTools Javascript

Een van de grote voordelen van MooTools is het krachtige Class-systeem.
MooTools-klassen maken flexibele, georganiseerde en uitbreidbare functies mogelijk.
Onze MooTools-klasse wordt "TabSet" genoemd. Omdat de klasse TabSet veel acties uitvoert,
laat elk deel van de klas afbreken.

De eerste regel geeft de klas altijd een naam:

 / * geef de klas een naam * / var TabSet = new Class (

Vervolgens moeten we een object maken dat de opties van onze klasse behoudt:

 opties: // standaard tabbladopties activeClass: 'active', // css class cookieName: ", // geen naam betekent geen cookie-cookieOpties: // opties voor de cookie, als de gewenste duur van cookie: 30, // 30 dagen pad: '/', startIndex: 0 // begin met dit item als er geen cookie of actief is,

Onze opties laten ons toe om te definiëren:

activeClass: de CSS-klasse die moet worden toegewezen aan het momenteel geselecteerde (of "actieve") tabblad.
cookieName: de naam van de cookie die deze tabset vertegenwoordigt. Als u geen cookienaam definieert, worden cookies niet gebruikt.
cookieOptions: een object dat de opties voor de cookie bevat.
startIndex: het tabblad om aanvankelijk actief te maken. Begint met 0. Overschreven door de variabele activeClass als een cookie wordt gevonden.

Met slechts drie opties in de klas zou TabSet als een relatief eenvoudige klasse worden beschouwd.

Vervolgens implementeren we twee opties en evenementen:

 Werktuigen: [Opties, Evenementen],

Door het implementeren van opties en gebeurtenissen kunnen we bepaalde opties en gebruiken
brand custom gebeurtenissen laden en wijzigen op onze lijsten overal in de klas.

Vervolgens definiëren we de "initialize" -methode die wordt uitgevoerd bij het maken van elk exemplaar van de klasse:

 initialiseren: functie (tabs, inhoud, opties) // handle arguments this.setOptions (options); // meng de gegeven opties met de standaardopties this.tabs = $$ (tabs); // sla de gegeven tabs binnen de klasse this.contents = $$ (inhoud) op; // sla de gegeven "inhoud" binnen de klasse op // bepaal het "actieve" tabblad var active = (Cookie.read (this.options.cookieName) || this.options.startIndex); // beslis de index die aanvankelijk actief zou moeten zijn this.activeTab = this.tabs [active] .addClass (this.options.activeClass); // identificeer nu het "actieve" tabblad this.activeContent = this.contents [active] .setStyle ('height', 'auto'); // identificeer de "actieve" inhoud // voer elke tab / inhoud-combo door de "processItem" -methode die we hieronder zullen zien. it.tabs.each (function (tab, i) this.processItem (tab, this.contents [i], i);, dit); // tabbladen zijn gereed - ontgrendel de laadgebeurtenis! this.fireEvent ( 'belasting'); ,

Vervolgens komt de werkpaardmethode van onze klasse TabSet: processItem:

 processItem: functie (tabblad, inhoud, i) var contentHeight = content.getScrollSize (). y; // voeg een klikgebeurtenis toe aan het tabblad tab.addEvent ('klik', functie () // als dit niet het actieve tabblad is als (tab! = this.activeTab) // stop als (e) e.stop ( ); // verwijder de actieve klasse van het actieve tabblad this.activeTab.removeClass (this.options.activeClass); // maak het geklikte tabblad het actieve tabblad (this.activeTab = tabblad) .addClass (this.options.activeClass) ; / / tween de oude tab inhoud omhoog / / tween de nieuwe inhoud down this.activeContent.set ('tween', onComplete: function () this.activeContent = content.fade ('in'). set ('tween ', onComplete: $ empty). tween (' height ', contentHeight); // vuur de tab change-gebeurtenis this.fireEvent (' wijzigen ', [tabblad, inhoud]); .bind (this)). setStyles (height: contentHeight, overflow: 'hidden'). fade ('out'). tween ('height', 0); // bewaar de index in cookie als (this.options.cookieName) Cookie.write ( this.options.cookieName, i); .bind (this)); );

Hier is de basisbeschrijving van wat de methode procesItem doet:

Accepteert een overeenkomende tab, contentitem en de bijbehorende index ...
Berekent de hoogte van het inhoudselement.
Voegt een klikgebeurtenis toe aan het tabblad dat:
1. Valideert dat dit tabblad nog niet actief is (we willen niets animeren of wijzigen als ze op het reeds actieve tabblad klikken)
2. Verwijdert de "actieve" CSS-klasse van het huidige tabblad en voegt deze toe aan het tabblad waarop zojuist is geklikt.
3. Hiermee wordt de inhoud van het huidige tabblad uit het zicht geschoven en wordt de nieuwe inhoud in de weergave geplaatst. De "change" -gebeurtenis wordt afgevuurd wanneer de animatie voltooid is.
4. Slaat de index van het nieuwe tabblad op in de cookie, zodat wanneer de gebruiker de pagina opnieuw laadt of naar een andere pagina gaat, het nieuwe tabblad aanvankelijk wordt geselecteerd.

En nu een voorbeeldgebruik van onze klas:

 window.addEvent ('domready', function () var tabset = new TabSet ($$ ('# tabs1 li a'), $$ ('# contents1 li'), cookieName: 'demo-lijst'); );

We bieden onze instantie de tab LI A's en de inhoud LI's. We bieden ook het optionele optieargument. Zo eenvoudig is het om deze klasse te gebruiken! Hier is de volledige les met gebruik:

 / * class * / var TabSet = new Class (options: activeClass: 'active', // css class cookieName: ", cookieOptions: duration: 30, // 30 days path: '/', startIndex: 0 // begin met dit item als geen cookie of actief is, Implementaties: [Opties, Gebeurtenissen], initialiseren: functie (tabbladen, inhoud, opties) // handle arguments this.setOptions (options); this.tabs = $$ ( tabs); this.contents = $$ (inhoud); // bepaal het "actieve" tabblad var active = (Cookie.read (this.options.cookieName) || this.options.startIndex); this.activeTab = this. tabbladen [actief] .addClass (this.options.activeClass); this.activeContent = this.contents [active] .setStyle ('height', 'auto'); // verwerkt elk tabblad en inhoud this.tabs.each (function (tab, i) this.processItem (tab, this.contents [i], i);, this); // tabbladen zijn gereed - laad het! this.fireEvent ('load');, processItem: functie (tabblad, inhoud, i) var contentHeight = content.getScrollSize (). y; // een klikgebeurtenis toevoegen aan het tabblad tab.addEvent ('klik', functie (e) // stop! if (e) e.stop (); // als het niet de actieve tab if (tab! = this.activeTab) // verwijder de actieve klasse van het actieve tabblad this.activeTab.removeClass (this.options.activeClass); // maak de geklikte tab op het actieve tabblad (this.activeTab = tab) .addClass (this.options.activeClass); // tween de oude inhoud van het tabblad omhoog // tween de nieuwe inhoud omlaag this.activeContent.set ('tween', onComplete: function () this.activeContent = content.fade ('in'). set ('tween' , onComplete: $ empty). tween ('height', contentHeight); // vuur de tab change-gebeurtenis this.fireEvent ('wijzigen', [tabblad, inhoud]); .bind (this)). setStyles (height: contentHeight, overflow: 'hidden'). fade ('out'). tween ('height', 0); // sla de index op naar cookie als (this.options.cookieName) Cookie.write (this.options.cookieName, i, this.options.cookieOptions);  .bind (this)); ); / * usage * / window.addEvent ('load', function () var tabset = new TabSet ($$ ('# tabs1 li a'), $$ ('# content1 li'), cookieName: 'demo- lijst' ); );

Stap vier: PHP / HTML

Weet je nog hoe ik zei dat we onze originele HTML zouden aanpassen met PHP? Dit is het moment. Sinds we mei
hebben een cookie ingesteld voor onze TabSet, we zouden moeten proberen om dat te detecteren wanneer we de tab HTML uitvoeren.
Waarom? Omdat we willen dat de tabbladen probleemloos worden geladen. We willen ook tegemoetkomen aan gebruikers die geen JavaScript of cookies hebben ingeschakeld.
Zonder deze PHP merkt u mogelijk een lichte "sprong" in het gebied met actieve inhoud.

    " > Tab 1
 " > Tab 2
 " > Tab 3
 " > Tab 4
 
 
  > Dit is de inhoud voor tabblad 1. Dit is de inhoud voor tabblad 1. Dit is de inhoud voor tabblad 1. Dit is de inhoud voor tabblad 1. Dit is de inhoud voor tabblad 1. Dit is de inhoud voor tabblad 1. Dit is de inhoud voor tabblad 1. Dit is de inhoud voor tabblad 1.
 > Dit is de inhoud voor tabblad 2. Dit is de inhoud voor tabblad 2. Dit is de inhoud voor tabblad 2. Dit is de inhoud voor tabblad 2. Dit is de inhoud voor tabblad 2. Dit is de inhoud voor tabblad 2. Dit is de inhoud voor tabblad 2. Dit is de inhoud voor tabblad 2.
 > Dit is de inhoud voor tabblad 3. Dit is de inhoud voor tabblad 3. Dit is de inhoud voor tabblad 3. Dit is de inhoud voor tabblad 3. Dit is de inhoud voor tabblad 3. Dit is de inhoud voor tabblad 3. Dit is de inhoud voor tabblad 3. Dit is de inhoud voor tabblad 3.
 > Dit is de inhoud voor tabblad 4. Dit is de inhoud voor tabblad 4. Dit is de inhoud voor tabblad 4. Dit is de inhoud voor tabblad 4. Dit is de inhoud voor tabblad 4. Dit is de inhoud voor tabblad 4. Dit is de inhoud voor tabblad 4. Dit is de inhoud voor tabblad 4.

Stap vijf: PHP: aanpassen voor gebruikers zonder Javascript of cookies

Sommige gebruikers schakelen JavaScript of cookies niet in voor beveiligingsdoeleinden. We willen echter nog steeds dat ons systeem voor hen werkt. Als je je herinnert uit het vorige blok code,
we gebruiken links met een querystring-sleutel van "demo-lijst" om een wijziging in het tabblad aan te geven. Het volgende blok van PHP bovenaan de pagina (vóór ANY-uitvoer) zal
help ons de cookiewaarde te veranderen naar het gevraagde tabblad.

Houd er rekening mee dat we de pagina alleen vernieuwen als we kunnen controleren of de cookie is ingesteld. Als de cookie niet is ingesteld, worden cookies van de gebruiker uitgeschakeld.

Missie volbracht!

Hier is een kort overzicht van de voordelen van de klasse MooTools TabSet:

Onze klas implementeert evenementen zodat we aangepaste evenementen en event-handlers kunnen maken.
De lay-out van het hele systeem wordt volledig gecontroleerd door eenvoudige HTML en CSS.
Het gebruik van cookies om het vorige tabblad te onthouden, is een geweldige verbetering van de bruikbaarheid.
Alleen al de klasse dat het een MooTools-klasse is, zorgt ervoor dat deze eenvoudig van project tot project kan worden geïmplementeerd.

De Inline MooTools Javascript

Ik heb altijd gepleit voor het coderen van de gewenste MooTools-functionaliteit "inline" voordat ik er een klasse van maak. Dit is de inline MooTools JavaScript-code:

 $$ ('ul.tabs'). each (function (tabList) // haal de contentlijst op var tabContentList = tabList.getNext ('ul.tabs-content'), // krijg de naam van de cookie, die is het "title" attribuut van de tab lijst cookie = 'demo-list', // de start tab index startIndex = Cookie.read (cookie) || 0, // verkrijg de tab LI items tabs = tabList.set (' title ','). getElements ('li'), // haal de inhoud LI items lis = tabContentList.getElements ('li'), // het tabblad (LI) dat momenteel actief is activeTab = tabs [startIndex] .addClass ('actief'), // de inhoud LI die momenteel actief is activeContent = lis [startIndex] .setStyle ('height', 'auto'); // voor elk tabblad in deze tab / inhoudsrelatie ... tabs.each (function (tab, i) // stop als (e) e.stop (); // bereken de hoogte van het respectieve inhoudsitem var content = lis [i], contentHeight = content.getScrollSize (). y; // voeg de klik toe gebeurtenis naar het tabblad die ... tab.addEvent ('klik', functie () // als dit niet het tabblad is dat momenteel is geactiveerd ... if (tab! = activeTab) // toevoegen en verwijderen de actieve klasse van oude versus nieuwe tab activeTab.removeClass ('active'); (activeTab = tab) .addClass ('actief'); // start het wissen, het effect naar beneden wissen activeContent.set ('tween', onComplete: function () activeContent = content.fade ('in'). set ('tween', onComplete: $ empty). tween ('height', contentHeight);). setStyles (height: contentHeight, overflow: 'hidden'). fade ('out'). tween ('height', '0'); // schrijven naar cookie Cookie.write (cookie, i); //vin! ); ); // fire click event activeTab.fireEvent ('klik'); );

Merk op dat alle "var" -instructies bovenaan beide argumenten of opties voor de klasse worden. De overgang van inline MooTools JavaScript naar een klas is uiterst eenvoudig!

Heb verbeteringsideeën?

Heb je meer ideeën voor deze les? Zorg ervoor dat je ze in de onderstaande opmerkingen deelt!

Schrijf een Plus-zelfstudie

Wist je dat je tot $ 600 kunt verdienen voor het schrijven van een PLUS tutorial en / of screencast voor ons?? We zijn op zoek naar diepgaande en goed geschreven tutorials over HTML, CSS, PHP en JavaScript. Als je van het vermogen bent, neem dan contact op met Jeffrey via [email protected].

Houd er rekening mee dat de daadwerkelijke compensatie afhankelijk is van de kwaliteit van de laatste zelfstudie en screencast.

Volg ons op Twitter of abonneer je op de Nettuts + RSS Feed voor de beste tutorials voor webontwikkeling op internet.

Code