Book Image

MooTools 1.2 Beginner's Guide

Book Image

MooTools 1.2 Beginner's Guide

Overview of this book

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.

Related Content you might be interested in

Current Title:

Small book image
MooTools 1.2 Beginner's Guide
Dec, 2009 | 280 pages
No titles found
Table of Contents (14 chapters)
MooTools 1.2 Beginner's Guide
MooTools 1.2 Beginner's Guide
Credits
Credits
About the Authors
About the Authors
About the Reviewer
About the Reviewer
Preface
Preface
Free Chapter
1
MooTools and Me
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
Summary
2
Writing JavaScript with MooTools
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
Summary
3
Selecting DOM Elements
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
4
The Core's Useful Utility Functions
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
Summary
5
Working with Events
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
Summary
6
Bringing Web Pages to Life with Animation
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
Summary
7
Going 2.0 with Ajax
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
Summary
8
Beefing Up MooTools: Using the MooTools More Plugins
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
Summary
9
Creating Your Own Plugin
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
Summary

Time for action— creating a hide/show FAQ page

Let's say that you have a boring FAQ page on your website, and you'd like to add a bit of interactivity to it, as well as shorten the page so that users can quickly find the questions they're looking for. One of the ways we can achieve these two goals is by hiding the answers to the questions, and then showing them when the user clicks on the question.

To help us achieve our goals, we will use Fx.Tween to let users click on a frequently-asked question, which would reveal their corresponding answers.

  1. We will start with the HTML.definition list<dl> element so that we can pair up the questions with their respective answers (dd). Here is the HTML code we're going to use (place your questions inside the<dt> element, and their corresponding answers in the following<dd> element).

    <body>
<h1>My Product FAQ Page</h1>
<dl>
<dt>...Question 1...<dt>
<dd>...Answer 1...<dd>
<dt>...Question...
Previous Section
End of Section 4
Next Section