Mootools Tutorial: Create a Class

Step one: Create your HTML/CSS page.

You page must contain a place to instantiate your new class. It happens line 5.

<html>
<head>
<script type="text/javascript">
	window.addEvent('domready', function() {
		var myClass = new MyClass();
	});
</script>
<style type="text/css">
.odd, .even {
	display: block;
	height: 100px;
	width: 100px;
	float:left;
}
</style>
</head>
<body>
	<div id="container">
		<div class="odd"></div>
		<div class="even"></div>
		<div class="odd"></div>
		<div class="even"></div>
	</div>
</body>
</html>

Step two: Create your Mootools Class.

All you need is the initilize function (or constructor).

var MyClass = new Class({
	// Class constructor
	initialize : function()
	{

	}
});

Step three: Let’s add some colors.

In this step we will create a setElementsColor function. The purpose of it is just to give colors to elements in order to be able to see them.

var MyClass = new Class({
	// Class constructor
	initialize : function()
	{
		// Set the element colors
		this.setElementsColor();
	},
	
	setElementsColor : function ()
	{
		// Get odd elements and set the background-color
		$$('.odd').setStyle('background-color', 'yellow');

		// Get even elements and set the background-color
		$$('.even').setStyle('background-color', 'orange');
	}
});

Step four: Let’s set Options.

I want to add options to my Class. The proper way is to add an Object as you can see line 4.

<script type="text/javascript">
	window.addEvent('domready', function() {
		var myClass = new MyClass( {
			message:'this is a specific message'
		});
	});
</script>

To be able to use setOptions() function in your class you will need to implement the Mootools Options Class. Line 12 don’t forget to add a parameter that will get Options from the instance creation. Line 15 set the Options and overwrite options line 7,8 and 9.

var MyClass = new Class({

	// Implement Mootools Options Class
	Implements : [Options],
	
	// create options Object
	options : {
		message:'this is a default message'
	},

	// Class constructor
	initialize : function(options)
	{
		// Set the options
		this.setOptions(options);
		// Set the element colors
		this.setElementsColor();
	},
	
	setElementsColor : function ()
	{
		// Get odd elements and set the background-color
		$$('.odd').setStyle('background-color', 'yellow');

		// Get even elements and set the background-color
		$$('.even').setStyle('background-color', 'orange');
	}
});

Step five: Let’s Play with Options.

Now that options are setup, I want to use them. In this step we will create a function that returns the option “message”

var MyClass = new Class({

	// Implement Mootools Options Class
	Implements : [Options],
	
	// create options Object
	options : {
		message:'this is a default message'
	},

	// Class constructor
	initialize : function(options)
	{
		// Set the options
		this.setOptions(options);
		// Set the element colors
		this.setElementsColor();
	},
	
	setElementsColor : function ()
	{
		// Get odd elements and set the background-color
		$$('.odd').setStyle('background-color', 'yellow');

		// Get even elements and set the background-color
		$$('.even').setStyle('background-color', 'orange');
	},
	
	getMessage : function ()
	{
		// return the message
		return this.options.message;
	}
});

Now let’s use this new function.

<script type="text/javascript">
	window.addEvent('domready', function() {
		var myClass = new MyClass( {
			message:'this is a specific message'
		});
	});
	// Result: 'this is a specific message'
	alert(myClass.getMessage());
</script>

Download

mootools_create_class.zip

Sources