MooTools 1.2 Class Template

Written by David Walsh on Monday, July 21, 2008

This article may feature code that is no longer best practice in MooTools.
Click here to learn what has changed to make your code framework-compatible.

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.

Download

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'
		});
	}

Download

Download PDF

Follow via RSS Epic Discussion

July 21 / #

evilhuman says:

Great reference point, thanks!

July 21 / #

Seth says:

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.

July 21 / #

keif says:

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 ;)

July 21 / #

david says:

@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!

July 21 / #

rborn says:

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…

July 21 / #

Daniel says:

An extra nice post, David. Thanks! (It’s Stumble time!)

July 22 / #

Imzyos says:

Very nice snippet

July 23 / #

Imzyos says:

What about add Extends?

July 23 / #

david says:

@Imzyos: I don’t extend other classes much.

August 11 / #

Crispijn says:

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!

August 11 / #

david says:

@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’);”.

August 12 / #

Crispijn says:

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!