First of all I am big fan of the MooTools. I have started with MooTools very long ago and I am still learning new things every day from it. :)
If you are aware of MooTools then you must have gone through below points, but if your starting with the MooTools then it will be good for you to get clear with below points. This is because you will have to face these points in almost every code of the MooTools.
Here are the topics about which I am referring:
1) Dom Ready
2) New Element Creation
3) Element Selector
4) Event Binding
5) Basic Styling of Element
6) Detect Browser
MooTools Stands for “My Object Oriented Tools“
This is the Window Event, which executes when DOM is defined. MooTools team has created this event, which fires as soon as the DOM is initialized.
This is developed to remove the drawbacks of the window.load event.
With DomReady we can executes our script as soon as DOM is loaded without waiting for images and other scripts to be load.
If you want to make sure that DOM element is exists while your code tries to access that element, it is better to place that code in “Dom Ready” event.
Have a look at below code snippet of the domready.
In earlier post I have explained the difference between domready and window.load.
For making the rich web application and/or working with AJAX you might have to create the HTML element dynamically. Creating a new elements is very easy task with MooTools.
You can easily inject this newly created element into other elements or inside the body tag. You can bind various event to that element too.
Once you execute the above code, your div gets created but you can not see anywhere in you web page. This is because you have to inject that element into other element or body it self. So this is how your code should looks like.
In MooTools $ and document.id is the replacement for the Document.GetElementById. You just have to pass the id of an element. $$ is used to get the multiple elements like elements with specific class name and element with specific pattern in ID.
$ and document.id will return the object of the selected element while $$ will return array of selected elements.
Let’s see how you can select the HTML elements in various ways.
You can bind various events to HTML elements using addEvent method. You will need object of an element to which you want to bind the event.
In above code you can find how to bind the events with the HTML element using object of the element. You can bind multiple events to single element also.
In older post I have explain about Creating a Custom Events with MooTools.
Basic styling includes the adding/removing the CSS property to element and adding/removing css class of the element. Again you will need object of any element to perform this task.
MooTools has very good class for detecting the browser of the user. Have a look at below code to know more on this.
There is so much to learn in MooTools but these are the basic things which should be clear with, if you want to go with class creation and other advance stuff with MooTools.
If you have any question then feel free to comment here.
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: Avinash