MooTools for Beginners Part 6 - Coding an Animated Menu With `Class`
By Ryan Florence, published 2010-01-19
Part of the issue MooTools for Beginners (1.2).
When I first started working with MooTools I was writing code that was typically a series of functions and a lot of logic inside of my domready code. After a while I had a nagging feeling that there was a better way to write code. There is, and it’s called Class. If MooTools were barbeque, Class would be the sauce–and the sauce is the boss. In this and the next few articles in MooTools for Beginners I hope to write the articles I was looking for when figuring how to write javascript with Class.
What’s the point of using Class?
- Debugging is easier
- Code is way more reusable
- The rest of MooTools makes even more sense
What a class looks like and how to use it
Typically you put a class in an external file. I tend to have something like this in the head of my document:
<script src="javascripts/mootools.core"></script>
<script src="javascripts/mootools.rpflo"></script> <!-- my classes -->
Here’s what a class looks like:
var BouncyMenu = new Class({
initialize: function(element){
alert('I have been constructed, here is an argument: ' + element);
}
});
And here’s how you use it, typically called in the head of your document, just like any other class (like Fx.Tween):
window.addEvent('domready',function(){
var myMenu = new BouncyMenu('someElement');
});
The function up there called initialize will be called automatically when a new object (myMenu) is constructed. So in this case we’d get a useless alert. Amazing, I know. Let’s make something interesting.
The Bouncy MooTools Menu
Let’s look at this method-by-method.
initialize: function(element){
this.elements = document.id(element).getChildren();
this.attach();
},
This is what’s often called the Constructor of a Class. Again, initialize will be called just as soon as we construct a new instance of BouncyMenu with new BouncyMenu('element'). Typically I assign a handful of properties there like this.elements. When you assign a variable in a class that you want to use in other methods (or functions) make sure to put this in front of it. That makes it accessible by the entire class.
Class methods are called similarly. After storing the elements this.attach() is executed. Typically a class has several methods and calling them is simple–this.method(). Following the mootools -core and -more coding styles is always a good idea, and events are usually added to elements from within a class method called attach. Let’s look at the attach method of our bouncy mootools menu:
attach: function(){
this.elements.each(function(element, index){
element.set('tween',{ link: 'cancel' });
element.addEvents({
mouseenter: function(){
element
.set('tween',{ transition: 'bounce:out' })
.tween('padding-top', 30);
},
mouseleave: function(){
element
.set('tween',{ transition: 'circ:out' })
.tween('padding-top', 10);
}
});
}, this);
return this;
}
First we iterate over this.elements (see how it’s accessible here now?) Then we set the tween for the current element, add the mouseenter and mouseleave events, and finally do some animation. Now to create a bouncy menu on any website, or even have multiple menus on one page, we simply include the class in a file somewhere and then:
new BouncyMenu('someElement');
new BouncyMenu('someOtherElement');
In the next few articles I’m going to be covering a lot more of what you can do with this amazing tool. Class really is what makes mootools awesome.
