Tutorials
Mootools
Een javascriptframework voor dynamische websites. Om wat voorbeelden te zien die in deze tutorial worden uitgelegd zou je hier kunnen klikken. Update: Toegevoegd waarom je mootools zou gaan kiezen.
Pagina 1
Wat kun je met mootools?
Met mootools kun je simpel moeilijke stukken javascript voor je website gebruiken. Je hebt allerlei soorten effecten, je kunt simpel door de DOM “wandelen”, je kunt makkelijk met ajax werken en je hebt erg veel handige functies voor elementen, arrays, functies en dergelijke.
Je kunt mootools gaan gebruiken als je de beginselen van javascript onder de knie hebt en dynamische websites wil gaan maken.
Als je je af zit te vragen waarom je nou mootools moet kiezen en niet een ander framework, dan is dit het beste antwoord: Mootools is erg compact en verschrikkelijk handig. In Firefox op mijn computer is mootools sneller dan jQuery, prototype en Dojo. Je kunt dat bekijken op deze test: http://mootools.net/slickspeed/.
Verder is het handig aan mootools dat je kan downloaden wat je nodig hebt qua functies en classes. Dus je hoeft niet meer te downloaden dan nodig is. Je kunt bij mootools ook kiezen wat voor compressie je wil van het bestand. Mootools met alles erop en eraan en zover mogelijk ingepakt als mogelijk is maar 65kb. Dit zijn goede redenen om mootools te kiezen.
De keus is ligt aan jou om te kiezen welk framework beter is. Al deze 4 frameworks, mootools, jQuery, prototype en dojo lijken vaak erg op elkaar.
Je kunt mootools gaan gebruiken als je de beginselen van javascript onder de knie hebt en dynamische websites wil gaan maken.
Als je je af zit te vragen waarom je nou mootools moet kiezen en niet een ander framework, dan is dit het beste antwoord: Mootools is erg compact en verschrikkelijk handig. In Firefox op mijn computer is mootools sneller dan jQuery, prototype en Dojo. Je kunt dat bekijken op deze test: http://mootools.net/slickspeed/.
Verder is het handig aan mootools dat je kan downloaden wat je nodig hebt qua functies en classes. Dus je hoeft niet meer te downloaden dan nodig is. Je kunt bij mootools ook kiezen wat voor compressie je wil van het bestand. Mootools met alles erop en eraan en zover mogelijk ingepakt als mogelijk is maar 65kb. Dit zijn goede redenen om mootools te kiezen.
De keus is ligt aan jou om te kiezen welk framework beter is. Al deze 4 frameworks, mootools, jQuery, prototype en dojo lijken vaak erg op elkaar.
Pagina 2
Mootools “installeren”
Mootools installeren is eigenlijk een groot woord. Het is gewoon een javascriptbestandje op http://mootools.net/download. Als je daar naar download gaat, is het handig voor deze tutorial om alle dingen aan te vinken die je maar kunt aanvinken. Bij compression type kun je zelf wat kiezen. Voor in het begin kun je misschien het best de versie kiezen met de documentatie erbij. Als je het gaat downloaden kun je het bestand in dezelfde map als die van je website zetten en tussen de <head /> tag een <script /> tag zetten:
Nu kun je mootools gebruiken. Je maakt een nieuw javascriptbestand aan, maakt niet uit welke naam. En daarin zet je dit:
Waarom nou dat addEvent en domready?
Ja, je zou ook het javascriptje onderaan in je pagina kunnen zetten, maar als je dit doet wordt de javascriptcode uitgevoerd als de pagina klaar is met de DOM. Dit heeft als nut dat je javascriptcode al werkt voordat de plaatjes en dat soort dingen geladen zijn.
<script type="text/javascript" src="mootools.js"> </script>
Nu kun je mootools gebruiken. Je maakt een nieuw javascriptbestand aan, maakt niet uit welke naam. En daarin zet je dit:
window.addEvent('domready', function() {
// en hier gaat dan straks je code komen
// alle javascript-voorbeelden die in deze tutorial staan kunnen hierin komen
});
Waarom nou dat addEvent en domready?
Ja, je zou ook het javascriptje onderaan in je pagina kunnen zetten, maar als je dit doet wordt de javascriptcode uitgevoerd als de pagina klaar is met de DOM. Dit heeft als nut dat je javascriptcode al werkt voordat de plaatjes en dat soort dingen geladen zijn.
Pagina 3
Elementen selecteren
Het sterke van mootools is dat je simpel elementen kan veranderen, toevoegen en verwijderen. Daarvoor moet je eerst een element op je website selecteren. Normaal ging dat met:
Nu kan dat simpel met het dollarteken:
Verder heb je ook het dubbele dollarteken. Dat is meer om wat anders door de DOM te gaan. Met een enkel dollarteken kun je alleen ID's selecteren, maar met het dubbele dollarteken kun je net wat meer. Het lijkt soms net CSS:
Belangrijk is dat je met het dubbele dollarteken altijd een array terugkrijgt.
Je hebt nog een aantal manieren om elementen te selecteren. Ik noem ze hier niet allemaal, maar ik zal nog twee bespreken. Deze twee komen ongeveer op hetzelfde neer. Ze werken net wat anders dan de dollartekens, want je zoekt als het ware een element in een ander element:
Met de vierkante haakjes kun je wel aardig gericht zoeken naar een bepaald element. Je kunt van het = teken ook wat anders maken, namelijk:
^= Als iets begint met …
$= Als iets eindigt met …
!= Als iets niet … is
Bijvoorbeeld:
Om meer van elementen selecteren te lezen of te zien moet je maar eens hier klikken.
document.getElementById('idvanhetelement');
Nu kan dat simpel met het dollarteken:
$('idvanhetelement');
Verder heb je ook het dubbele dollarteken. Dat is meer om wat anders door de DOM te gaan. Met een enkel dollarteken kun je alleen ID's selecteren, maar met het dubbele dollarteken kun je net wat meer. Het lijkt soms net CSS:
$$('div'); //Zo krijg je alle <div /> tag's van de site
$$('div.class'); //Zo krijg je alle <div /> tag's van de site met als class “class”
$$('#id'); //Zo krijg je op een óók een id, net als bij het enkele dollarteken.
$$('#id div.class'); //Zo krijg je een <div /> element met de class “class” in de tag met het id “id”
Belangrijk is dat je met het dubbele dollarteken altijd een array terugkrijgt.
Je hebt nog een aantal manieren om elementen te selecteren. Ik noem ze hier niet allemaal, maar ik zal nog twee bespreken. Deze twee komen ongeveer op hetzelfde neer. Ze werken net wat anders dan de dollartekens, want je zoekt als het ware een element in een ander element:
$('idVanHetElement').getElements('li'); // Zo krijg je alle <li /> elementen in het element met het id “idVanHetElement”
$('idVanHetElement').getElements('input[type=text]'); // zo krijg je alle <input /> velden met als type text in het element met het id “idVanHetElement”
Met de vierkante haakjes kun je wel aardig gericht zoeken naar een bepaald element. Je kunt van het = teken ook wat anders maken, namelijk:
^= Als iets begint met …
$= Als iets eindigt met …
!= Als iets niet … is
Bijvoorbeeld:
$('idVanHetElement').getElements('input[type!=text]'); // Zo krijg je alle inputs in “idVaHetElement” als het type niet text is.
$('idVanHetElement').getElements('input[name^=test]'); //Zo krijg je alle inputs in “idVaHetElement” als name begint met “test”.
Om meer van elementen selecteren te lezen of te zien moet je maar eens hier klikken.
Pagina 4
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.
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:
<div id="wrapper">
<h1>Tabsysteem</h1>
<div id="tabswrap">
<ul id="tabs">
<li><a href="#" class="tab1 active">Tab 1</a></li>
<li><a href="#" class="tab2">Tab 2</a></li>
<li><a href="#" class="tab3">Tab 3</a></li>
</ul>
<div id="content">
<div class="activetext" id="tab1">Tekst dat hoort bij tab 1</div>
<div class="tabcontent" id="tab2">Tekst dat hoort bij tab 2</div>
<div class="tabcontent" id="tab3">Tekst dat hoort bij tab 3</div>
</div>
</div>
</div>
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:
window.addEvent('domready', function() {
$$('#tabs li a').addEvent('click', function(){
if(this.hasClass('active') != true){
removeAndAddClasses();
$(this.className).addClass('activetext');
this.addClass('active');
}
});
});
function removeAndAddClasses(){
$('content').getChildren('div').removeClass('activetext').addClass('tabcontent');
$$('#tabs li a').removeClass('active');
}
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.
Pagina 5
Voorbeeld 2: Coole effecten in mootools
Mootools heeft een aantal coole effecten en ik zal gaan uitleggen hoe je ze kunt gebruiken. Als eerste is hier een voorbeeld. Je kunt bij de effecten van mootools bijna alle CSS-declaraties gebruiken. Als eerste een voorbeeld van een stukje javascript dat ik hier bovenin gebruik.
De link waarop geklikt wordt heeft het id “verandereen”. Als je daar op klikt krijgt de variabele effect een waarde mee. Die waarde, Fx.Style, is een class. Dus je begint met new Fx.Style();. Waar nu this staat, komt normaal gesproken een element te staan zoals $(‘iets’). Omdat wij al een hebben gekozen met addEvent kun je this gebruiken. De tweede parameter is wat je precies wil veranderen. Wij kiezen margin-left. Bij de laatste parameter kun je extra opties gaan invullen, die ik een paar regels hieronder bespreek. Om het effect te starten gebruik je effect.start(300);. Effect is de variabele met het effect en 300 is het aantal dat margin-left wordt. Dit is automatisch in pixels. Voor meer opties heb je de keuze uit:
transition Zal ik niet uitleggen, maar staat hier beschreven: Klik
duration Tijd in milliseconden dat het effect duurt
unit Soort wat moet veranderen, bijv.: px, pt, % en em
wait Als je wilt wachten tot een ander effect gestopt is en dan pas het huidige effect wilt afspelen
fps Spreekt voor zich, frames per second.
Je kunt de laatste parameter zo uittypen:
{duration: 500, transition: Fx.Transitions.sineInOut, wait: false}. Verder kun je nog wat meer opties toevoegen zoals onClick, onStart, onComplete, onCancel etc.
Om meerdere effecten in één keer te starten, zoals bij het tweede linkje op de voorbeeldsite, kun je Fx.Styles gebruiken. Niet veel nieuws, maar je moet het wel gezien hebben:
Werkt eigenlijk hetzelfde, alleen heb je meer parameters bij start. Je kiest bijvoorbeeld backgroundColor en padding. Je kunt dan kiezen uit waar hij moet beginnen - #FFFFFF en 0px - daarna waar hij in moet eindigen - #FFD599 en 10px.
Een ander veelgebruikt effect van mootools is de Fx.Slide. Hier staat een voorbeeld van hoe je hem gebruikt:
Je maakt een variabele met Fx.Slide(‘slide’). Waar tussen quotes slide staat hoort een element te staan. Dan kun je de slider laten werken door slide1.toggle(); te doen. Je kunt in plaats van toggle ook slideIn, slideOut, show en hide gebruiken. Je kunt ook hier weer extra opties gaan gebruiken die al eerder genoemd zijn. Naast een verticale slider kun je ook een horizontale maken door een mode toe te voegen:
$('verandereen').addEvent('click',function(){
var effect = new Fx.Style(this, 'margin-left', {duration:500});
effect.start(300);
});
De link waarop geklikt wordt heeft het id “verandereen”. Als je daar op klikt krijgt de variabele effect een waarde mee. Die waarde, Fx.Style, is een class. Dus je begint met new Fx.Style();. Waar nu this staat, komt normaal gesproken een element te staan zoals $(‘iets’). Omdat wij al een hebben gekozen met addEvent kun je this gebruiken. De tweede parameter is wat je precies wil veranderen. Wij kiezen margin-left. Bij de laatste parameter kun je extra opties gaan invullen, die ik een paar regels hieronder bespreek. Om het effect te starten gebruik je effect.start(300);. Effect is de variabele met het effect en 300 is het aantal dat margin-left wordt. Dit is automatisch in pixels. Voor meer opties heb je de keuze uit:
transition Zal ik niet uitleggen, maar staat hier beschreven: Klik
duration Tijd in milliseconden dat het effect duurt
unit Soort wat moet veranderen, bijv.: px, pt, % en em
wait Als je wilt wachten tot een ander effect gestopt is en dan pas het huidige effect wilt afspelen
fps Spreekt voor zich, frames per second.
Je kunt de laatste parameter zo uittypen:
{duration: 500, transition: Fx.Transitions.sineInOut, wait: false}. Verder kun je nog wat meer opties toevoegen zoals onClick, onStart, onComplete, onCancel etc.
Om meerdere effecten in één keer te starten, zoals bij het tweede linkje op de voorbeeldsite, kun je Fx.Styles gebruiken. Niet veel nieuws, maar je moet het wel gezien hebben:
$('verandertwee').addEvent('click',function(){
var effects = new Fx.Styles(this, {duration:500});
effects.start({
'backgroundColor': ['#FFFFFF','#FFD599'],
'padding': ['0px', '10px']
});
});
Werkt eigenlijk hetzelfde, alleen heb je meer parameters bij start. Je kiest bijvoorbeeld backgroundColor en padding. Je kunt dan kiezen uit waar hij moet beginnen - #FFFFFF en 0px - daarna waar hij in moet eindigen - #FFD599 en 10px.
Een ander veelgebruikt effect van mootools is de Fx.Slide. Hier staat een voorbeeld van hoe je hem gebruikt:
var slide1 = new Fx.Slide('slide');
$('togglev').addEvent('click', function(){
slide1.toggle();
});
Je maakt een variabele met Fx.Slide(‘slide’). Waar tussen quotes slide staat hoort een element te staan. Dan kun je de slider laten werken door slide1.toggle(); te doen. Je kunt in plaats van toggle ook slideIn, slideOut, show en hide gebruiken. Je kunt ook hier weer extra opties gaan gebruiken die al eerder genoemd zijn. Naast een verticale slider kun je ook een horizontale maken door een mode toe te voegen:
Fx.Slide(‘slide’, {mode: 'horizontal'});Pagina 6
Mootools en Ajax
Ajax werkt erg simpel in mootools. Normaal moest je altijd de hele request typen, nu kan het in een paar regels. Hier is een voorbeeld te vinden van een erg simpel stukje script. Het doet niet veel meer dan tekst laten zien van een ander bestand. Als je het werkend wil zien kun je op deze link klikken
Wat je doet is de class Ajax aanroepen en wat parameters meegeven. Als eerste de url, die staat in de variabele "waar". Als tweede de extra opties. Method kan post en get zijn, update is de plek waar je de tekst terug wil hebben die je krijgt. Met .request(); verzend je de request.
Om het iets uitgebreider te maken kun je, zoals bij bijna alles, extra opties toevoegen. Je zou bijvoorbeeld dit kunnen doen:
Om dit voorbeeld in werking te zien moet je even op de 2e link klikken in het voorbeeld. Er gebeurt dan wat met de opacity van het element “content”. Als de request bezig is, dan is de opacity 0.2, maar als hij klaar is, dan wordt de opacity weer 1. Twee vliegen in een klap eigenlijk. Je gebruikt nu de effecten en ajax tegelijk.
window.addEvent('domready', function() {
var waar = "http://zjapske.no-ip.org/phphulp/ajax.php";
$('ajaxlink').addEvent('click',function(){
new Ajax(
waar,
{method: 'get', update: $('ajaxtext')}
).request();
});
});
Wat je doet is de class Ajax aanroepen en wat parameters meegeven. Als eerste de url, die staat in de variabele "waar". Als tweede de extra opties. Method kan post en get zijn, update is de plek waar je de tekst terug wil hebben die je krijgt. Met .request(); verzend je de request.
Om het iets uitgebreider te maken kun je, zoals bij bijna alles, extra opties toevoegen. Je zou bijvoorbeeld dit kunnen doen:
var waar2 = "http://zjapske.no-ip.org/phphulp/ajax.php?a=1";
var effect = new Fx.Style($('content'), 'opacity', {duration:500, wait: false});
$('ajaxlinktwee').addEvent('click',function(){
new Ajax(waar2, {
'method' : 'get',
'update': $('ajaxtext'),
'onRequest': function() {
effect.start('1', '0.2');
},
'onComplete': function() {
effect.start('0.2', '1')
}
}).request();
});
Om dit voorbeeld in werking te zien moet je even op de 2e link klikken in het voorbeeld. Er gebeurt dan wat met de opacity van het element “content”. Als de request bezig is, dan is de opacity 0.2, maar als hij klaar is, dan wordt de opacity weer 1. Twee vliegen in een klap eigenlijk. Je gebruikt nu de effecten en ajax tegelijk.
Pagina 7
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:
Nu kun je die op deze manier selecteren (vergeet niet het domready event te gebruiken):
En kun je op deze manier er iets mee gaan doen:
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:
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.
<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):
$('normaal')
En kun je op deze manier er iets mee gaan doen:
$('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:
$('klik').addEvent('click',function(){
$('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.
Pagina 8
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:
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.
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.
Reacties
0