MooTools 1.2 Beginner's Guide

Table of Contents

• Preface

• Chapter 1: MooTools and Me
  • What is MooTools?
  • Why use MooTools?
    • The advantages of using MooTools
      • Writing terse and elegant code
      • Extending native JavaScript
      • Cross-browser compatibility
      • Working with the Document Object Model
      • The advantage of using open-source projects
  • Downloading and installing MooTools
  • Time for action – downloading and installing the MooTools Core
    • Different MooTools downloads
    • The domready event listener
  • Rolling your own MooTools
    • MooTools Core
  • Time for action – exploring the MooTools Core Builder
    • MooTools More
  • Time for action – exploring the MooTools More Builder
  • The API concept
  • MooTools resources
    • MooTools Docs
    • MooTools Users Google groups
    • mooforum
    • The MooTorial
  • Summary

• Chapter 2: Writing JavaScript with MooTools
  • Writing unobtrusive JavaScript with MooTools
    • An "obtrusive" JavaScript example
    • What's so bad about it?
      • Don't repeat it if you don't have to
      • It'll be hard to maintain
      • It's a bad practice to have functionality in your content structure
  • Time for action – rewriting our script unobtrusively
    • Removing our inline event handlers
    • Using the DOM to handle events
  • Creating MooTools classes
    • What the heck is a class?
    • Real-world analogy
    • Creating a MooTools class
      • The Implements property
  • 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
    • Extending classes

• Time for action – extending the ShowDog class with
• the Dog class
  • Class inheritance

• Using MooTools classes
  • The concept of chainability
  • The Chain class
  • A Chain example
  • A look ahead: Chaining Fx .Tween

• Time for action – create a chain of Fx.Tween methods
  • Isn't MooTools classy?
  • Chainability

• Summary

• Chapter 3: Selecting DOM Elements
  • MooTools and CSS selectors
  • Working with the $() and $$() functions
    • The $() dollar function
    • The $$() dollars function
    • When to use which
  • 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
    • $() versus document.getElementById()
    • Selecting multiple sets of elements
    • Common errors with the dollar and dollars functions
  • Selection using pseudo-classes
    • Pseudo-class example: Zebra striping a table
  • Time for action – using pseudo-classes to zebra stripe a table
    • Other pseudo-class selectors
  • Working with attribute selectors
    • Attribute selector operators
    • Attribute selector example: Styling different types of links
  • Time for action – using = attribute selector
  • Time for action – using != attribute selector
  • Time for action – using ^= attribute selector
  • Time for action – using $= attribute selector
    • Attribute selector case sensitivity
  • DOM selection makes unobtrusive JavaScript do-able
  • Summary

• Chapter 4: The Core's Useful Utility Functions
  • What is the Core?
  • Browser: Getting information about the client
    • Determining if the client has a specific feature
      • Browser.Features.xpath
      • Browser.Features.xhr
    • Getting information about the client's rendering engine
      • Determining the client's rendering engine and version
  • Time for action – determining the client's rendering engine and version
    • Checking if the client is using a particular web browser
    • Determining if the client has Adobe Flash installed
  • Finding out information about the client's operating system
    • Potential uses of this property
    • Example scenario: Offering the correct download based on the client's platform

• Time for action – using Browser.Platform to customize SuperSoftware's download page
• Exploring the Core utility functions
  • Checking to see if objects are defined
    • Seeing if an object has a value with $chk
    • Checking if an object is defined with $defined
    • Selecting the first defined object using $pick
    • Getting the return of first working function with $try
  • Dealing with time and intervals
    • The $time() function

• Time for action – the $time() function
  • The $clear() function

• Time for action – exploring the $clear() function with periodical()
  • Utility functions for working with objects
    • Extending objects with $extend()
    • Merging objects with $merge()
    • Iterating through objects using $each

• Time for action – exploring the $each function
  • Other utility functions in the Core
    • Generating a random number with $random
    • Converting objects to arrays with $splat
    • Determining the data type using $type
    • Limited use functions

• Summary

• Chapter 5: Working with Events
  • What are events exactly?
    • Window events
    • Form events
    • Keyboard events
    • Mouse events
    • MooTools custom mouse events
  • Adding event listeners
    • Adding a single event listener
  • Time for action – highlighting focused fields of web forms
    • Adding multiple event listeners

• 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
  • Removing events from elements
    • Removing a single event from elements

• Time for action – removing an event
  • Removing a type of event, or all events, from elements
  • Cloning events from another element
  • Firing off events

• Time for action – firing off a click event
• The MooTools event object
  • Using event object methods
    • Preventing the default behavior

• Time for action – preventing the default behavior of a hyperlink
  • Preventing event bubbling

• Time for action – preventing event bubbling
  • Stopping default behavior and event propagation

• Using event properties

• Summary

• Chapter 6: Bringing Web Pages to Life with Animation
  • MooTools' Fx class
    • Basic syntax
    • Fx options
  • Animating a CSS property with Fx.Tween
  • Time for action - creating a hide/show FAQ page
    • Tweening a single CSS property using the tween() method
  • Time for action – toggling the visibility of a div
    • Fading elements
  • Time for action - fading an image in and out
    • Highlighting elements
  • Time for action - indicating blank form fields that are required
  • Animating multiple CSS properties with Fx.Morph
  • Time for action - enlarging an image
    • Using the morph() shortcut method
  • Time for action - experimenting with morph
  • Other Fx methods
    • Starting an effect
    • Setting properties immediately
    • Cancelling a transition
    • Pausing effect
    • Resuming a paused effect
  • Summary

• Chapter 7: Going 2.0 with Ajax
  • What you'll need
  • Creating a Request object
    • Request object options
    • Request events options
      • Running a function immediately when a request is made
      • Running a function when the request is completed
      • Running a function when the request is cancelled
      • Other Request events
  • Requesting data
  • Time for action – requesting remote data
    • Requesting HTML and JSON data
      • Working with HTML data
  • Time for action – updating a web page with HTML
    • Loading HTML documents remotely

• Time for action – loading HTML data
  • Working with JSON data

• Time for action – working with Ajax and JSON
  • Cancelling a Request

• Sending data
• Time for action – sending data to PHP
• Setting and getting HTTP headers
  • Setting an HTTP header for an Ajax Request object
  • Getting an HTTP header

• 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
    • Creating engaging content using Fx.Accordion
  • Time for action – creating an accordion
    • Fx.Accordion options
  • Downloading all the MooTools More plugins we need

• Time for action – downloading more Mootools More plugins
  • Extending JavaScript's native Date object

• Time for action – building a Date calculator tool
  • Making web forms more user-friendly with the OverText plugin

• Time for action – creating a web form that uses OverText
  • Drag-and-drop with Drag and Drag.Move

• 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
    • Noting down pitfalls and places of improvement to the 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
    • Creating a more complex instance of the plugin
  • Time for action – creating new instances of the plugin
    • Creating multiple instances of the plugin
  • Time for action – multiple instances of the ImageCaption plugin
  • Preparing your plugin for the public
    • Documenting your plugin with comments
  • Time for action – documenting the ImageCaption plugin
    • External documentation
  • Time for action – creating a basic download page for the ImageCaption plugin
  • Summary

• Index

Jacob Gube

Garrick Cheung

This book rocks!

Anyone picking this book up to learn MooTools is going to get a lot of value out of it and hopefully get hooked on the power of MooTools.

Sample chapters

You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.

Find your book in our support section to find errata and to download code samples.