Mootools 1.2 Beginners Guide LITE: Getting started

Table of Contents

• Preface

• Chapter 1: 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 2: 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 3: 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

• Index