Free Sample
+ Collection

MooTools 1.2 Beginner's Guide

Beginner's Guide
Jacob Gube, Garrick Cheung

Learn how to create dynamic, interactive, and responsive cross-browser web applications using this popular JavaScript framework
RRP $23.99
RRP $39.99
Print + eBook

Want this title & more?

$12.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781847194589
Paperback280 pages

About This Book

  • 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

Who This Book Is For

This book is perfect for MooTools newcomers. You do not require any familiarity with MooTools whatsoever, only a willingness to learn. Basic knowledge of JavaScript syntax and concepts is the only requirement. This book will allow you to grasp the basics of MooTools so that you will be well on the way to creating exciting, customizable web pages and applications.

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

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

In Detail

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.


Read More