MooTools 1.2 Beginner's Guide Table Of Contents

Table of Contents

Preface
Chapter 1: MooTools and Me
Chapter 2: Writing JavaScript with MooTools
Chapter 3: Selecting DOM Elements
Chapter 4: The Core's Useful Utility Functions
Chapter 5: Working with Events
Chapter 6: Bringing Web Pages to Life with Animation
Chapter 7: Going 2.0 with Ajax
Chapter 8: Beefing Up MooTools: Using the MooTools More Plugins
Chapter 9: Creating Your Own Plugin
Index

• 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