MooTools 1.2 Class Template
Written by David Walsh on July 21, 2008 · 16 Comments
Starting a MooTools class can be difficult if you haven't created one before. Here's a template you can copy, paste, and use to create your MooTools classes.
MooTools 1.2 Class Template
var yourClass = new Class({
//implements
Implements: [Options],
//options
options: {
yourOption: ''
},
//initialization
initialize: function(options) {
//set options
this.setOptions(options);
},
//a method that does whatever you want
yourMethod: function() {
}
});
MooTools 1.2 Class Usage Template
//once the DOM is ready
window.addEvent('domready', function() {
var yourInstance = new yourClass({
yourOption: 'yourValue'
});
}
Great reference point, thanks!
This is something I’ve been curious about for a while with MooTools. What would you use a class for? What determines whether you use a Class or just a function?
I’m really trying to learn best practices for coding with MooTools and other libraries but I haven’t really found an all encompassing resource…all though this site is quickly becoming a favorite.
I’ve been doing the same thing!
@Seth, the best explanation I’ve heard is that classes help make your code more readable, reusable, and less complex. That’s the short answer ;)
@Seth: I use classes when I’m creating functionality with options. I also use classes so I can reference objects. It does keep the code cleaner too!
I use classes when I want to reuse the code with other occasions – in same project, or other – with different options
I use functions when I do more specific tasks, or more simple that a class would be just overhead…
An extra nice post, David. Thanks! (It’s Stumble time!)
Very nice snippet
What about add Extends?
@Imzyos: I don’t extend other classes much.
Hi David,
I’m struggling with my first mootools (1.2) class now and I have a question about the options. How do I use them in my class?
For example:
$(e).addEvent(‘mouseenter’, function(){
e.fade(this.options.minopacity());
});
This gives an error: this.options is undefined.
But when I initialize I also set the options with
initialize: function(options){
this.setOptions(options),
this.start(),
console.log(‘Buttons ready to hover…’);
},
Maybe you’ve got the answer for me…
Thanks a lot and keep up the good (mootools) work!
@Crispjin: Instead of e.addEvent(‘mouseenter’,function() { });, you may want to consider adding a “mouseenter” event to the class and replace the above with “this.fireEvent(‘mouseenter’);”.
I’m not very familiar with the JavaScript/moo syntax so I’m still struggling with your suggestion with the this.fireEvent
How do I implement this? Where to I leave the “e” variable witch points to the element I would like to change the opacity? The mootools docs couldn’t give me a right example…
var fadeButtons = new Class({
Implements: [Options],
options: {
maxopacity: 1,
minopacity: 0
},
initialize: function(options){
this.setOptions(options),
this.start()
},
//start the button events
start: function(){
var list = $$(‘#buttons div img’);
list.each(function(e) {
this.e.fireEvent(‘mouseenter’);
//OLD HABBITS
/*e.addEvent(‘mouseenter’, function(){
e.fade(this.options.minopacity);
});
e.addEvent(‘mouseleave’, function(){
e.fade(this.options.maxopacity);
});*/
});
},
});
Could you give me a kick in the right direction? Thanks anyway!
Crispijn,
The Netherlands
Thanks for this. For some reason I’ve been using it quite a lot. Simple things are usually best!
One thing I noticed is that Dom Ready is missing ); at the end. So you could add that so it does not confuse newcomers with errors if they use this.
I have been using mootools for a little bit, and I really like it.
Thanks for the tutorials, they’re great… Keep them coming.
Samuel M.
Buensimo el ejemplo, sin embargo los métodos no se disparan a menos que agregues
this.fireEvent(‘yourMethod’); donde “yourMethod” es el nombre de tu evento.
Ejemplo.-
show: function() {
alert(‘hacer algo’);
/*al final de la instrucción*/
this.fireEvent(‘show’);
},
Esto es útil cuando quieres agregar codigo personalizado al ejecutar dicho evento.
Hi,
This is the tutorial what I am looking for.
Before some days I have tried to contact you regarding this point. but no reply from your side.
But after all thanks for this post.
Thanks
Avi