PacktLib: MooTools 1.2 Beginner's Guide

MooTools 1.2 Beginner's Guide


About the Authors

About the Reviewer


MooTools and Me

What is MooTools?

Why use MooTools?

Downloading and installing MooTools

Time for action—downloading and installing the MooTools Core

Rolling your own MooTools

Time for action—exploring the MooTools Core Builder

Time for action—exploring the MooTools More Builder

The API concept

MooTools resources


Writing JavaScript with MooTools

Writing unobtrusive JavaScript with MooTools

Time for action—rewriting our script unobtrusively

Creating MooTools classes

Time for action—creating an instance of Dog

Time for action—giving our class instance some custom options

Time for action—determining the value of our options

Time for action—extending the ShowDog class with the Dog class

Using MooTools classes

Time for action—create a chain of Fx.Tween methods


Selecting DOM Elements

MooTools and CSS selectors

Working with the $() and $$() functions

Time for action—selecting an element with the dollar function

Time for action—selecting elements with the dollars function

Time for action—selecting multiple sets of elements with the dollars function

Selection using pseudo-classes

Time for action—using pseudo-classes to zebra stripe a table

Working with attribute selectors

Time for action—using = attribute selector

The Core's Useful Utility Functions

What is the Core?

Browser: Getting information about the client

Time for action—determining the client's rendering engine and version

Time for action—using Browser.Platform to customize SuperSoftware's download page

Exploring the Core utility functions

Time for action—the $time() function

Time for action—exploring the $clear() function with periodical()

Time for action—exploring the $each function


Working with Events

What are events exactly?

Adding event listeners

Time for action—highlighting focused fields of web forms

Time for action—adding tooltips to the web form

Creating custom events

Time for action—creating a custom event for showing help tips

Removing, cloning, and firing off events

Time for action—removing an event

Time for action—firing off a click event

The MooTools event object

Time for action—preventing the default behavior of a hyperlink

Time for action—preventing event bubbling


Bringing Web Pages to Life with Animation

MooTools' Fx class

Animating a CSS property with Fx.Tween

Time for action— creating a hide/show FAQ page

Time for action—toggling the visibility of a div

Time for action— fading an image in and out

Time for action— indicating blank form fields that are required

Animating multiple CSS properties with Fx.Morph

Time for action— enlarging an image

Time for action— experimenting with morph

Other Fx methods


Going 2.0 with Ajax

What you'll need

Creating a Request object

Requesting data

Time for action—requesting remote data

Time for action—updating a web page with HTML

Time for action—loading HTML data

Time for action—working with Ajax and JSON

Sending data

Time for action—sending data to PHP

Setting and getting HTTP headers

Time for action—getting the Last-Modified HTTP header


Beefing Up MooTools: Using the MooTools More Plugins

Downloading MooTools More plugins

Time for action—downloading the Fx.Accordion plugin

Installing MooTools plugins

Time for action—installing Fx.Accordion

Discovering a handful of MooTools More plugins

Time for action—creating an accordion

Time for action—downloading more Mootools More plugins

Time for action—building a Date calculator tool

Time for action—creating a web form that uses OverText

Time for action—creating a simple drag-and-drop game


Creating Your Own Plugin

Why create a plugin?

Designing the plugin

Time for action—creating a design sheet for our plugin

Creating the ImageCaption script

Time for action—writing the ImageCaption script

Converting the script to a flexible plugin

Time for action—creating the ImageCaption plugin

Instantiating the plugin

Time for action—basic instantiation of the ImageCaption plugin

Time for action—creating new instances of the plugin

Time for action—multiple instances of the ImageCaption plugin

Preparing your plugin for the public

Time for action—documenting the ImageCaption plugin

Time for action—creating a basic download page for the ImageCaption plugin