MooTools - Introduction

MooTools is an object-oriented, lightweight JavaScript framework. The full form of MooTools is My Object-Oriented Tools. It is released under the free, open-source MIT License. It is one of most popular JavaScript libraries.

MooTools is a powerful, lightweight JavaScript library. It creates an easy interaction of JavaScript in web development. It can also do a lot of things as CSS extensions. MooTools has all sorts of nifty extensions, which gives you the ability to create animated effects.

Components of MooTools

MooTools includes a number of components. The following are the different component categories −

Core − A collection of utility functions that all the other components require.
More − An official collection of add-ons that extend the core and provide enhanced functionality.
Class − The base library for class object instantiation.
Natives − A collection of JavaScript native object enhancements. The natives add functionality, compatibility, and new methods that simplify coding.
Element − Contains a large number of enhancements and compatibility standardization to the HTML Element Object.
FX − An Advanced effects-API that helps to animate page elements.
Request − Includes XHR interface, Cookie JSON, and HTML retrieval-specific tools for developers to exploit.
Window − Provides a cross-browser interface to client-specific information, such as the dimensions of the window.

MooTools – Advantages

MooTools come with a number of advantages over native JavaScript. These advantages include the following −

MooTools is an extensive and modular framework that allows developers to create their own customized combination of components.
MooTools follows object-oriented paradigm and the DRY principle (Don't Repeat Yourself).
MooTools provides advanced component effects, with optimized transitions. It is mostly used for flash developers.
MooTools provides different enhancements to the DOM. This helps the developers to add, modify, select, and delete DOM elements. And, it also supports storing and retrieving element storage.

MooTools - Installation

MooTools is a powerful, JavaScript library to design DOM objects using object-oriented paradigm. This chapter explains how to install and use MooTools library along with JavaScript.
To install MooTools library, follow the steps given below −

Step 1: Download MooTools Core and MooTools More library

You can download the latest version of MooTools Core and MooTools More libraries from the following link MooTools-Core and MooTools-More. When you click on the links, you will be directed to the following screens in your browser −
MooTools Core Library

And,

Click on the download buttons, you will get the latest version of MooTools libraries. For this tutorial, we are using MooTools-Core-1.6.0.js and MooTools-More-1.6.0.js libraries.

Step 2: Upload the MooTools Core and More libraries into the server

You now have the MooTools libraries in your file system. We have to copy these libraries into the server (the workspace) where the application web pages are available. For this tutorial, we are using C:\MooTools\workspace\ directory location.
Therefore, copy the MooTools-Core-1.6.0.js and MooTools-More-1.6.0.js files into the given directory location.

Step 3: Link the MooTools Core and More libraries into the script tag

The JavaScript library is a .js file. If you include this library into your JavaScript code, include it with the script tag as follows. Take a look at the following code snippet.

<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>

MooTools - Program Structure

MooTools is a tool which can be used to design object-oriented models. Let us discuss in this chapter a simple example of MooTools library.

Example

Here we will design a model named Rectangle using Class. For this, we need to declare the properties — Width and Height.
Take a look at the following code, and save it into sample.html.

<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javaScript">
         var Rectangle = new Class({
            //properties
            width: 0,
            height: 0,
            
            //methods
            initialize: function(widthVal, heightVal) {
               this.width = widthVal;
               this.height = heightVal;
            },
            details: function() {
               document.write("Welcome to MooTools demo program");
               document.write("Width: "+this.width+" Height: "+this.height);
            },
         });
         var rec = new Rectangle(5,4);
         rec.details();
      </script>
   </head>
   
   <body>
   </body>
   
</html>

You will receive the following output −

পৃষ্ঠাসমূহ

Labels

.

Search Your Article

Total Pageviews

Tuesday, March 7, 2017

MooTools - Quick Guide