Create a simple class with MooTools

  • Avinash
  • 2
  • Nov 05, 2010
  • Tutorial

Hi all, in this post I will explain about creating a class with MooTools. New version of MooTools was released before some days. From my point of view MooTools is more flexible than any other JavaScript framework.

I think MooTools is best fit for you, if you are suppose to develop new things with the help of JavaScript.

MooTools stands for My Object Oriented Tools.

So basically from name MooTools mainly pointed towards OOPs concept. And class is the main portion of the OOPs.

So let’s start with how to create a class with MooTools:

var SimpleClass = new Class({ //implements Implements: [Options, Events], //options options: { // Declare you class variables here In below Pattern // varname : 'value' }, //initialization initialize: function(options) { this.setOptions(options); // this. setOption is a method which makes the class variable //available to each function of the class using below pattern. // alert(this.options.varname); // Above line will alert value } });
var SimpleClass = new Class({
  //implements
  Implements: [Options, Events],
  //options
  options: {
    // Declare you class variables here In below Pattern
    // varname : 'value'
  },

  //initialization
  initialize: function(options) {
    this.setOptions(options);
    // this. setOption is a method which makes the class variable
    //available to each function of the class using below pattern.
    // alert(this.options.varname);
    // Above line will alert value
}
});

create a object of the above class

var ClassObj = new SimpleClass();
var ClassObj = new SimpleClass();

Adding a new methods / functions to the class.

var SimpleClass = new Class({ //implements Implements: [Options, Events], //options options: { // Declare you class variables here In below Pattern // varname : 'value' }, //initialization initialize: function(options) { this.setOptions(options); // this. setOption is a method which makes the class variable //available to each function of the class using below pattern. // alert(this.options.varname); // Above line will alert value }, sampleFunction: function(){ // This is the sample function of the class. // Function code here } });
var SimpleClass = new Class({
  //implements
  Implements: [Options, Events],
  //options
  options: {
    // Declare you class variables here In below Pattern
    // varname : 'value'
  },

//initialization
  initialize: function(options) {
    this.setOptions(options);
    // this. setOption is a method which makes the class variable
    //available to each function of the class using below pattern.
    // alert(this.options.varname);
   // Above line will alert value
},
sampleFunction: function(){
  // This is the sample function of the class.
  // Function code here
}
});

create a object of the above class

// Creating a object of the class. var ClassObj = new SimpleClass(); // Calling a method of the class using object. ClassObj.sampleFunction();
// Creating a object of the class.
var ClassObj = new SimpleClass();
// Calling a method of the class using object.
ClassObj.sampleFunction();


So now what you think about creating class using MooTools? I think it’s very simple.

In next post I will come with the some MooTools Demo using the class.

Hope you are clear with this post, if any question, doubts or suggestion you have then please post the comment over here.

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by: