Switch to the store?

MooTools 1.2 Beginner's Guide

More Information
  • Bringing web pages to life using animation
  • Boosting the responsiveness of your web applications using AJAX with MooTools
  • Building a web form dynamically responsive to a multitude of browser events
  • The basics core functions of MooTools and how they work
  • Creating your own versatile plug-ins that can be customized to fit your own personal requirements
  • How to rapidly build a quick and easy web application using the power of MooTools

MooTools is a simple-to-use JavaScript library, ideal for people with basic JavaScript skills who want to elevate their web applications to a superior level. If you're a newcomer to MooTools looking to build dynamic, rich, and user-interactive web site applications this beginner's guide with its easy-to-follow step-by-step instructions is all you need to rapidly get to grips with MooTools.

  • Learn how to build super-charged web forms
  • Learn how to write powerful and flexible cross-browser code
  • Make your web applications more dynamic and user-interactive with AJAX
  • Packed with examples that will show you step by step the most important aspects of getting started with MooTools
Page Count 280
Course Length 8 hours 24 minutes
ISBN 9781847194589
Date Of Publication 27 Dec 2009
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 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
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
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
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
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
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
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
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


Jacob Gube

Jacob Gube is a massive MooTools developer. He is the Founder and Chief Editor of Six Revisions, a website dedicated to web developers and web designers. He's also written for other popular web publications such as Read Write Web and Smashing Magazine discussing web technologies and development. A web professional for 8 years, Jacob is an in-house web developer specializing in distance-learning education and web accessibility, using PHP, MooTools, and jQuery to get the job done.

Garrick Cheung

Garrick Cheung is a designer-developer and a member of the official Mootools Community team. He's currently a Senior Technical Producer for CBS Interactive developing for sites such as GameSpot.com, TV.com and MP3.com. He's passionate about code optimization and loves to teach and develop in MooTools. Garrick also writes about code and development at his site, http://www.garrickcheung.com.