We recently got a request to do 30 days of Mootools 1.2 tutorials and it seemed like such a fine idea that we decided to get started right away. These tutorials will assume no previous Mootools or JavaScript experience, but will require basic knowledge of html and CSS.

Introduction to Mootools 1.2 JavaScript Library

Mootools 1.2 is a powerful, lightweight javascript library designed to ease interactive JavaScript web development. In a way, you can think of a lot of things that Mootools can do as CSS extensions. For example, CSS lets you change a property on hover. Javascript allows you to recognize more events (click, mouseover, keystrokes, …) and Mootools makes it almost painfully easy to take advantage of this.

In addition, Mootools has all sorts of nifty extensions which let not only change element properties (like you can with hover), but lets you “morph” or “tween” properties, giving you the ability to create animated effects like you see on our menu.

Thats just one example, Mootools can allow you to do much more. Over the next 30 days, we are going to dig deeper into the Mootools library, exploring everything from arrays and functions to FX.Slide and the other bundled plugins.

Installing Mootools 1.2

First, download and install the Mootools 1.2 Core library.

1. Download the Mootools 1.2 Core library
2. Upload the Mootools 1.2 Core library to your server or workspace
3. Link to the Mootools 1.2 Core library in your head tag - <script src=”mootools1.2core.js” type=”text/javascript”>

Add Script Tags in your Head Tag

Now that you are calling Mootools into your page, you need a place to write the code. There are two options:

1. Place the code between script tags in your head:

<script type="text/javascript"><!--mce:0--></script>

2. Create an external JavaScript file and link to it in your head:

<script src="myJavaScriptFile.js" type="text/javascript"><!--mce:1--></script>

From here on out, you can use either method. I will often call the functions within the domready event inside the script tags, but create my functions in an external JavaScript file.

Put it in the domready

Mootools functions must be called within the domready event.

window.addEvent('domready', function() {
    exampleFunction();
});

Put it in a Function

You can still build your function outside of the domready, then call it within.

var exampleFunction = function() {
     alert('hello')
};
 
window.addEvent('domready', function() {
    exampleFunction();
});

Library Description

For this first tutorial, we are going to take a closer look at the key components of the library’s architecture and go over some of the basic functionality.

Core

The core contains common functions within the Mootools library and makes it easy to accomplish common tasks as well as beefing up a lot of pre-existing functionality (more on that later). The following is meant only as an example of some of Mootools’ capabilities and is no replacement for reading the Mootools documentation.

• Check for a value (returns false if no value or 0 is found) - $chk(value);
• Return a random integer between two values - $random(min, max);
• Lets you easily detect browsers, browser engines and browser capabilities

Native

This section of the library also contains common tools, letting you manipulate arrays (basically a list of values or objects), functions, numbers, strings, hashes and events. Here are a few of the tools featured in Native:

• Create a script that will apply to each object within an array - .each();
• Get the last item within an array - .getLast();
• Create an event that happens every x milliseconds - .periodical();
• Round a decimal - .round();
• Convert rbg to HEX - .rgbToHex();

Class

A JavaScript class (in contrast to a CSS class), is a reusable object with functionality. To learn more about Mootools classes you can check out this quick intro by Valerio (Mootools Classes - How to Use Them). I would also recommend David Walsh’s Mootools Class Template.

Element

The element classes provide some of the most useful functionality within the Mootools library. Here is where you will select Dom elements, manipulate their properties and position, and change their CSS styles. Here are few of the great tools Mootools provides to deal with Dom elements:

• Select the first of a certain type of DOM element, ID or class - .getElement();
• Select all of a certain type of DOM element, ID or class - .getElements();
• Add a class to an element - .addClass();
• Find out the value of an element’s property - .getProperty();
• Change the value of an element’s property - .setProperty();
• Find out the value of an element’s style property - .getStyle();
• Change the value of an element’s style property - .setStyle();
• Get an elements coordinates - .getCoordinates();

Utilities

Utilities provides more refined selector logic, includes the domready event, gives you tools to manage AJAX calls, lets you easily manage cookies and even includes the “swiff” functionality which lets you interface JavaScript with ActionScript.

FX

This is probably Mootools’ most fun section. With FX you can create “tween” and “morph” effects that add animation to your DOM objects.

• Create an animated transition between two style values (e.g. grow a div larger smoothly) - var myFx = new Fx.Tween(element);
• Create an animated transition between multiple different style values (e.g. grow a div larger smoothly and change the background color while making the border thicker) - var myFx = new Fx.Morph(element);

Request

Contains tools to ease dealing with Javascripts XMLHttpRequest (Ajax) functionality. Above making the entire request/response process much less painful, Request has extensions to deal specifically with either HTML or Javascript Object Notation (JSON) responses.

Plugins

The Mootools plugins extend the core functionality, letting you easily add advanced UI functionality to your web projects. The list of plugins includes:

• Fx.Slide
• Fx.Scroll
• Fx.Elements
• Drag
• Drag.Move
• Color
• Group
• Hash.Cookie
• Sortables
• Tips
• SmoothScroll
• Slider
• Scroller
• Assets
• Accordion

The Big Picture

Before the next tutorial, take some time to pour over the Mootools documentation. Even if you don’t understand it all, just read through it and absorb what you can. Over the next 29 days we are going to dig deeper into specific areas within the library and break Mootools down into some easy to digest pieces, but first, be sure and take a good look over the whole menu.

To Learn More…

A zip with everything you need to get started

Includes a copy of the Mootools 1.2 core library, a simple html file, an external JavaScript file for your functions and a css style sheet. The html is well commented and includes the domready event.

This entry was posted on Saturday, January 2nd, 2010 at 4:56 pm and is filed under mootools. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.