Iets gaan doen met de elementen
Nu je een element hebt geselecteerd kun je er wat mee gaan doen. Je kunt met de vele methoden van mootools erg simpel een element veranderen. Ik kies als eerste de setStyle-methode. Je hebt bijvoorbeeld dit in je <body /> staan:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<p>
<a id="klik" href="#">Klik</a>
</p>
<p id="normaal">
Dit is een normale tekst.
</p>
<a id="klik" href="#">Klik</a>
</p>
<p id="normaal">
Dit is een normale tekst.
</p>
Nu kun je die op deze manier selecteren (vergeet niet het domready event te gebruiken):
Code (php)
1
$('normaal')
En kun je op deze manier er iets mee gaan doen:
Code (php)
1
$('normaal').setStyle('color','#990000');
Maar nu is de tekst meteen rood als de pagina geladen is. Dit is dus nog steeds niet bijzonder ofzo. Je zou beter iets kunnen laten gebeuren als er op de link erboven geklikt wordt. Dus gaan we het id 'normaal' een Event meegeven:
Code (php)
1
2
3
2
3
$('klik').addEvent('click',function(){
$('normaal').setStyle('color','#990000');
});
$('normaal').setStyle('color','#990000');
});
Als je nu op de link klikt met het id “klik" verandert de kleur van de paragraaf “normaal" in donkerrood. Hier volgt een korte uitleg van het addEvent:
Met addEvent kun je dus elk element dat je met $ of $$ gekregen hebt een hele functie meegeven. Wij doen het hier door “klik" als eerste parameter 'click' mee te geven. Het spreekt vanzelf dat dan de functie ernaast wordt uitgevoerd door op de link “klik" te klikken. Het ziet er misschien wat moeilijk uit dat je eerst een haakje opent met de parameters, maar die niet op het eind van de regel afsluit. Het is heel simpel, waar normaal de naam van de functie staat, staat nu een hele functie. Ik gebruik meteen function(){ } omdat dat een aantal regels javascript scheelt.
Okee, nu hebben we het begin van addEvent gehad en kun je een heel aantal verschillende dingen er mee doen. Een aantal handige functies zijn bijvoorbeeld addClass, toggleClass en nog veel meer functies die je hier vindt . Verder kun je bij de eerste parameter nog een aantal andere dingen doen, die de meeste mensen wel kennen. Zoals mousedown, mouseup, mousemove etc.
« vorige pagina | volgende pagina »
Inhoudsopgave
- Wat kun je met mootools?
- Mootools “installeren”
- Elementen selecteren
- Voorbeeld 1: Tabs in mootools
- Voorbeeld 2: Coole effecten in mootools
- Mootools en Ajax
- Iets gaan doen met de elementen
- Voorbeeld 3 en handige links