Voorbeeld 1: Tabs in mootools

Nu gaan we beginnen we een experimentje met mootools. Het wordt een tabsysteempje. Als je op een tab klikt zal eronder de bijbehorende tekst komen te staan en zal de stijl van de tab zelf veranderen. Zonder mootools zou dit nog een best aantal regels javascript kosten, maar met mootools kan het in 13 regels!
Een werkend voorbeeld van wat we gaan maken is hier te vinden.
Ik zet hier de htmlcode neer. De CSS kun je wel bij het voorbeeld vinden, maar de htmlcode zou handig kunnen zijn om alles in een keer te begrijpen:

Wat we gaan doen is kijken op welke link is geklikt in de <ul /> tag. De links hebben allemaal een class meegekregen met “tab + het nummer”. De <div /> content heeft nog een paar div’s in zich, die eenzelfde id hebben meegekregen: “tab + nummer”. Op deze manier is het heel simpel om de juiste tekst bij de juiste tab te zoeken.
Als iemand bijvoorbeeld op de eerste tab klikt met de class tab1, dan zoeken we daar de div met het id tab1 bij en laten we die eronder zien. Tegelijkertijd halen we de andere div weg, zodat die niet meer te zien is. Het weghalen en laten zien is eigenlijk gewoon een class toevoegen of weghalen. Als je op een andere tab klikt krijgt die de class “active” mee, en tegelijkertijd krijgt een div de class “activetext”.
Hier volgt de javascriptcode, en ik zal het regel voor regel uitleggen:

Zoals je ziet zijn het maar 13 regels. Heel erg weinig, maar een erg mooi resultaat.
In de eerste regel begin je met de domready. Misschien is het voor dit voorbeeld wat overdreven, maar ik gebruik het eigenlijk altijd.
In de 2e regel gaan we een event meegeven aan de tabs. Met $$('#tabs li a') selecteer je dus de links in de li in de div met het id “tabs”. Als je dus op een van die links klikt, begint het event.
In de 3e regel beginnen we een if. We gaan kijken als de tab misschien wel de actieve tab is. Als dat zo is, hoeven we niets te doen, omdat je die actieve tab niet nog eens actief hoeft te maken. Dat is hij al. Als het niet de actieve tab is, dan ga je verder.
In de 4e regel roepen we de functie removeAndAddClasses aan. In die functie pakken we als eerste het id “content” van de website. Dat is de div waar de tekst in zitten voor elke tab. Om die teksten te krijgen moet je de div’s daarin krijgen. Dat kan met getChildren(‘div’). Nu we de div’s uit de “content” hebben gevist kunnen we er wat mee gaan doen. Als eerste halen we bij al die div’s de class “activetext” weg en meteen daarna geven we alle div’s de class “tabcontent” mee. Als het script nu zou stoppen zou er geen enkele tekst meer onder de tabs te zien zijn, maar we gaan door. We halen bij de tabs de class “active” ook weg. Nu heeft geen enkele tab meer die donkerste achtergrond. De functie is nu klaar en we gaan verder met de 5e regel.
Dit is misschien wat moeilijk. Als je alert(this.className) zou doen, dan zou je dit krijgen: “tab + nummer”. Aangezien de div met de tekst voor de tab eenzelfde id heeft, gaan we die div selecteren. Dat gaat met $(). Als je het dus samenvoegt wordt het: $(this.className). Nu kunnen we wat met de geselecteerde div gaan doen. Logisch, je wil die div laten zien. Dus we geven hem de class “activetext” mee. In de CSS kun je zien dat display: none veranderd in display: block;.
In de 6e regel geven we de link nog de class “active” mee, zodat die een donkere achtergrondkleur heeft.

« Lees de omschrijving en reacties