Book Details

ISBN 139781847194589

Paperback280 pages

Book Description

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.

Table of Contents

Chapter 1: 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

Chapter 2: 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

Chapter 3: 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

Chapter 4: 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

Chapter 5: 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

Chapter 6: 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

Chapter 7: 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

Chapter 8: 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

Chapter 9: 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

What You Will Learn

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

Authors

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.

Table of Contents

Chapter 1: 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

Chapter 2: 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

Chapter 3: 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

Chapter 4: 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

Chapter 5: 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

Chapter 6: 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

Chapter 7: 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

Chapter 8: 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

Chapter 9: 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

Alerts & Offers

Series & Level

We understand your time is important. Uniquely amongst the major publishers, we seek to develop and publish the broadest range of learning and information products on each technology. Every Packt product delivers a specific learning pathway, broadly defined by the Series type. This structured approach enables you to select the pathway which best suits your knowledge level, learning style and task objectives.

Learning

As a new user, these step-by-step tutorial guides will give you all the practical skills necessary to become competent and efficient.

Beginner's Guide

Friendly, informal tutorials that provide a practical introduction using examples, activities, and challenges.

Essentials

Fast paced, concentrated introductions showing the quickest way to put the tool to work in the real world.

Cookbook

A collection of practical self-contained recipes that all users of the technology will find useful for building more powerful and reliable systems.

Blueprints

Guides you through the most common types of project you'll encounter, giving you end-to-end guidance on how to build your specific solution quickly and reliably.

Mastering

Take your skills to the next level with advanced tutorials that will give you confidence to master the tool's most powerful features.

Starting

Accessible to readers adopting the topic, these titles get you into the tool or technology so that you can become an effective user.

Progressing

Building on core skills you already have, these titles share solutions and expertise so you become a highly productive power user.