MooTools 1.2 Class Template
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'
});
}
![Detect DOM Node Insertions with JavaScript and CSS Animations]()
I work with an awesome cast of developers at Mozilla, and one of them in Daniel Buchner. Daniel's shared with me an awesome strategy for detecting when nodes have been injected into a parent node without using the deprecated DOM Events API.
![I’m an Impostor]()
This is the hardest thing I've ever had to write, much less admit to myself. I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life. All of those feelings were very...
![Style Textarea Resizers]()
Modern browsers are nice in that they allow you to style some odd properties. Heck, one of the most popular posts on this blog is HTML5 Placeholder Styling with CSS, a tiny but useful task. Did you know you can also restyle the textarea resizer in WebKit...
![Disable Autocomplete, Autocapitalize, and Autocorrect]()
Mobile and desktop browser vendors do their best to help us not look like idiots by providing us autocomplete, autocorrect, and autocapitalize features. Unfortunately these features can sometimes get in the way; we don't always want or need the help they provide. Luckily most browsers allow...
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.
@Crispjin: Instead of
e.addEvent('mouseenter',function() { });
, you may want to consider adding amouseenter
event to the class and replace the above withthis.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…
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.-
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