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.
Code (php)
1
2
3
4
2
3
4
$('verandereen').addEvent('click',function(){
var effect = new Fx.Style(this, 'margin-left', {duration:500});
effect.start(300);
});
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:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$('verandertwee').addEvent('click',function(){
var effects = new Fx.Styles(this, {duration:500});
effects.start({
'backgroundColor': ['#FFFFFF','#FFD599'],
'padding': ['0px', '10px']
});
});
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:
Code (php)
1
2
3
4
5
2
3
4
5
var slide1 = new Fx.Slide('slide');
$('togglev').addEvent('click', function(){
slide1.toggle();
});
$('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:
Code (php)
1
Fx.Slide(slide, {mode: 'horizontal'});
« 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