Voorbeeld 3 en handige links
Ik zal hier nog een laatste voorbeeld geven van wat ik heb gedaan met mootools. Met javascript kun je mooi laten zien als je velden in een formulier niet goed hebt ingevuld. Hier is een werkend voorbeeld. Het nieuwe in dit voorbeeld is dat het met addEvents werkt. Verder is er ook gewerkt met .getValue(), dat is eigenlijk hetzelfde als .value zonder mootools. Hier is het stuk javascript:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.addEvent('domready', function() {
$$(".checkinput").addEvents({
'focus': function(){
this.removeClass('goed');
this.removeClass('fout');
this.addClass('selected');
},
'blur': function(){
removeClasses(this);
if(this.getValue().length > "3"){
this.addClass('goed');
}
else {
this.addClass('fout');
}
}
});
function removeClasses(a) {
a.removeClass('goed');
a.removeClass('fout');
a.removeClass('selected');
}
});
$$(".checkinput").addEvents({
'focus': function(){
this.removeClass('goed');
this.removeClass('fout');
this.addClass('selected');
},
'blur': function(){
removeClasses(this);
if(this.getValue().length > "3"){
this.addClass('goed');
}
else {
this.addClass('fout');
}
}
});
function removeClasses(a) {
a.removeClass('goed');
a.removeClass('fout');
a.removeClass('selected');
}
});
Als je deze tutorial gelezen hebt kun je vast wel raden wat alles doet.
Wat je zelf nog zou kunnen doen is een echte validatie maken die ook een e-mailadres valideert en kijk als er geen cijfers in zitten. Dat kan dit voorbeeld niet namelijk.
Handige links:
Als eerste de docs van mootools
Demo’s
Mijn voorbeelden
Verder staan hier nog een aantal links van de makers zelf, en ja, die hebben meestal een website met voorbeelden van mootools.
Ik kan vooral de demo’s van mootools erg aanraden. Daar heb ik de motivatie van gekregen om zelf te beginnen met mootools.
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