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'
});
}
![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...
![Send Text Messages with PHP]()
Kids these days, I tell ya. All they care about is the technology. The video games. The bottled water. Oh, and the texting, always the texting. Back in my day, all we had was...OK, I had all of these things too. But I still don't get...
![Basic AJAX Requests Using MooTools 1.2]()
AJAX has become a huge part of the modern web and that wont change in the foreseeable future. MooTools has made AJAX so simple that a rookie developer can get their dynamic pages working in no time.
Step 1: The XHTML
Here we define two links...
![MooTools Zebra Tables Plugin]()
Tabular data can oftentimes be boring, but it doesn't need to look that way! With a small MooTools class, I can make tabular data extremely easy to read by implementing "zebra" tables -- tables with alternating row background colors.
The CSS
The above CSS is extremely basic.
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 amouseenterevent 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…
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