Mootools 1.2 Beginners Guide LITE: Getting started

Table of Contents

Mootools 1.2 Beginners Guide: LITE

Credits

About the Authors

About the Reviewer

www.PacktPub.com

Support files, eBooks, discount offers and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Time for action - heading

What just happened?

Pop quiz - heading

Have a go hero - heading

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

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

What just happened?

Removing our inline event handlers

Using the DOM to handle events

Pop quiz - rewriting our script unobstrusively

Creating MooTools classes

What the heck is a class?

Real-world analogy

Creating a MooTools class

The Implements property

The options property

The initialize method

Our own Dog class methods: .bark() and .sit()

Time for action - creating an instance of Dog

What just happened?

Have a go hero - use the .sit() class method

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

What just happened?

Class inheritance

Have a go hero - doing more with the thing

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

What just happened?

Isn't MooTools classy?

Chainability

Have a go hero - doing more with chaining Fx.Tween methods

Summary

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

What just happened?

$() versus document.getElementById()

Selecting multiple sets of elements

Have a go hero - tween the list item element

Common errors with the dollar and dollars functions

The dollar function doesn't work with CSS selectors!

Drop the pound # sign when using the $() function

Pop quiz - find the bad apple in the bunch

Selection using pseudo-classes

Pseudo-class example: Zebra striping a table

Time for action - using pseudo-classes to zebra stripe a table

What just happened?

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

What just happened?

Attribute selector case sensitivity

DOM selection makes unobtrusive JavaScript do-able

Summary

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

What just happened?

Have a go hero - modifying the hide/show transition effect

Tweening a single CSS property using the tween() method

Time for action - toggling the visibility of a div

What just happened?

Fading elements

Time for action - fading an image in and out

What just happened?

Highlighting elements

Time for action - indicating blank form fields that are required

What just happened?

Animating multiple CSS properties with Fx.Morph

Time for action - enlarging an image

What just happened?

Have a go hero - modify the transition type

Using the morph() shortcut method

Time for action - experimenting with morph

What just happened?

Other Fx methods

Starting an effect

Setting properties immediately

Cancelling a transition

Pausing effect

Resuming a paused effect

Summary

Index

Mootools 1.2 Beginners Guide: LITE

Mootools 1.2 Beginners Guide: LITE

Copyright © 2011 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: April 2011

Production Reference: 2120511

Published by Packt Publishing Ltd. 32 Lincoln Road Olton Birmingham, B27 6PA, UK.

ISBN 978-1-849516-24-2

www.packtpub.com

Cover Image by Vinayak Chittar ( <[email protected]> )

Credits

Authors

Jacob Gube

Garrick Cheung

Reviewer

Chirstoph Pojer

Acquisition Editor

Douglas Paterson

Technical Editor

Ajay Shanker

Indexer

Hemangini Bari

Production Coordinator

Melwyn D’sa

Cover Work

Melwyn D’sa

About the Authors

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