Discover millions of ebooks, audiobooks, and so much more with a free trial

Only $11.99/month after trial. Cancel anytime.

Mootools 1.2 Beginners Guide LITE: Getting started
Mootools 1.2 Beginners Guide LITE: Getting started
Mootools 1.2 Beginners Guide LITE: Getting started
Ebook213 pages1 hour

Mootools 1.2 Beginners Guide LITE: Getting started

Rating: 0 out of 5 stars

()

Read preview

About this ebook

This is a Packt Beginner's Guide, which means it is packed with clear step-by-step instructions for performing the most useful tasks in MooTools. You will learn by doing and you will start learning immediately. 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.
LanguageEnglish
Release dateMay 19, 2011
ISBN9781849516259
Mootools 1.2 Beginners Guide LITE: Getting started

Related to Mootools 1.2 Beginners Guide LITE

Related ebooks

Information Technology For You

View More

Related articles

Reviews for Mootools 1.2 Beginners Guide LITE

Rating: 0 out of 5 stars
0 ratings

0 ratings0 reviews

What did you think?

Tap to rate

Review must be at least 10 words

    Book preview

    Mootools 1.2 Beginners Guide LITE - Jacob Gube

    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 ( <vinayak.chittar@gmail.com> )

    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

    Enjoying the preview?
    Page 1 of 1