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)
PHP script in nieuw venster Selecteer het PHP script
1
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');
    }
});

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.

« Lees de omschrijving en reacties

Inhoudsopgave

  1. Wat kun je met mootools?
  2. Mootools “installeren”
  3. Elementen selecteren
  4. Voorbeeld 1: Tabs in mootools
  5. Voorbeeld 2: Coole effecten in mootools
  6. Mootools en Ajax
  7. Iets gaan doen met de elementen
  8. Voorbeeld 3 en handige links

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.