MooTools Essentials: The Official MooTools Reference for JavaScript and Ajax Development

275 Pages·2008·1.65 MB·English

by  Aaron Newton

BOOKS FOR PROFESSIONALS BY PROFESSIONALS® Available as a
PDF Electronic Book
M or Print On Demand
Apress’s firstPress series is your source for understanding cutting-edge technology. Short, highly
focused, and written by experts, Apress’s firstPress books save you time and effort. They contain
o
the information you could get based on intensive research yourself or if you were to attend a
o
conference every other week—if only you had the time. They cover the concepts and techniques
that will keep you ahead of the technology curve. Apress’s firstPress books are real books, in your T
choice of electronic or print-on-demand format, with no rough edges even when the technology o
itself is still rough. You can’t afford to be without them. o
MooTools
l
s

E
MooTools Essentials:
s
s
The Official MooTools Reference for JavaScript™ and Ajax Development
e
Dear Reader, n Essentials
t
Whether you are visiting or building a web site these days, you can’t deny that
i
JavaScript has become an important part of the experience. Visitors to web sites a
expect them to be interactive and responsive, and that means that those of us who l
build them must spend the time to make that experience come alive. s
In the past, JavaScript was often a tedious business, with browsers each offer-
ing their own mercurial blend of standard and nonstandard functionality. Modern
JavaScript has taken off with the advent of JavaScript frameworks: libraries that
enhance the JavaScript language itself and help you avoid all the pesky browser bugs.
MooTools is a JavaScript framework that enables you to write clean, concise, reus- The Official MooTools Reference for
able code to animate and dynamically change the content on your site using Ajax and
other technologies, taking care of all the grunt work for you. This book aims to make
the process of getting started with MooTools an easy one, covering everything from JavaScript™ and Ajax Development
downloading the code and adding it to your pages to explaining what each class and
method does (and, perhaps more importantly, when you’ll use each one).
I’ve combined real-world examples with nuanced explanations of everything you
need to know to make your site fun and engaging. You’ll be adding effects and Ajax in
no time.
Have fun,
Aaron Newton
276
PAGES
Aaron Newton
N
e
w
SOURCE CODE ONLINE t
o
www.apress.com n
User level:
Beginner–Intermediate
www.it-ebooks.info
About firstPress
Apress's firstPress series is your source for understanding cutting-edge technology. Short,
highly focused, and written by experts, Apress's firstPress books save you time and effort. They
contain the information you could get based on intensive research yourself or if you were to
attend a conference every other week—if only you had the time. They cover the concepts and
techniques that will keep you ahead of the technology curve. Apress's firstPress books are real
books, in your choice of electronic or print-on-demand format, with no rough edges even when
the technology itself is still rough. You can't afford to be without them.

MooTools Essentials: The Official MooTools Reference for
JavaScript™ and Ajax Development

Dear Reader,
Whether you are visiting or building a web site these days, you can’t deny that JavaScript has
become an important part of the experience. Visitors to web sites expect them to be interactive
and responsive, and that means that those of us who build them must spend the time to make
that experience come alive.
In the past, JavaScript was often a tedious business, with browsers each offering their own
mercurial blend of standard and nonstandard functionality. Modern JavaScript has taken off
with the advent of JavaScript frameworks: libraries that enhance the JavaScript language itself
and help you avoid all the pesky browser bugs.
MooTools is a JavaScript framework that enables you to write clean, concise, reusable code to
animate and dynamically change the content on your site using Ajax and other technologies,
taking care of all the grunt work for you. This book aims to make the process of getting started
with MooTools an easy one, covering everything from downloading the code and adding it to
your pages to explaining what each class and method does (and, perhaps more importantly,
when you’ll use each one).
I’ve combined real-world examples with nuanced explanations of everything you need to know
to make your site fun and engaging. You’ll be adding effects and Ajax in no time.
Have fun,
Aaron Newton

www.it-ebooks.info
Contents
Preface .....................................................................................xi
Acknowledgments...................................................................................xi
A Note on the Code Formatting in This Book......................................xi
Introduction ............................................................................ xiii
JavaScript Frameworks.......................................................................xiv
Why You Should Use a JavaScript Framework.................................xiv
About MooTools....................................................................................xv
MooTools vs. Other Frameworks.........................................................xvii
About the Author..................................................................................xix
About This Book....................................................................................xx
Who This Book Is For................................................................................xxi
What You Need to Know..........................................................................xxii
Summary..............................................................................................xxii
Chapter 1: Getting Started with MooTools.....................................1
Downloading MooTools..........................................................................1
Downloading MooTools Official Plug-Ins...................................................2
Core Builder..................................................................................................4
Making Use of MooTools’ Modular Design.................................................4
Compatibility.................................................................................................5
Compression Options....................................................................................5
MooTools Essentials i
www.it-ebooks.info
Adding MooTools to Your Page(s).........................................................6
Coding for Reuse.....................................................................................6
Compression............................................................................................7
Using the YUI Compressor...........................................................................7
Chapter 2: Reviewing MooTools...................................................9
MooTools File Structure.........................................................................9
Manifest of MooTools Scripts ..............................................................10
The MooTools Core....................................................................................10
The MooTools Plug-Ins: “More”................................................................17
Chapter 3: Shortcuts and Helpful Functions.................................23
Determining the Type of an Object: $type...........................................23
$type :: Core/Core.js....................................................................................23
Checking Whether Values Are Defined:
$defined, $chk, and $pick.................................................................25
$defined :: Core/Core.js...............................................................................25
$chk :: Core/Core.js.....................................................................................26
$pick :: Core/Core.js....................................................................................26
Working with Objects: $extend,
$merge, and $unlink.........................................................................28
$extend :: Core/Core.js................................................................................29
$merge :: Core/Core.js................................................................................31
$unlink :: Core/Core.js................................................................................33
Iterable Helpers and Shortcuts: $arguments,
$each, $splat, $A, and $H.................................................................34
$arguments :: Core/Core.js .........................................................................34
$each :: Core/Core.js...................................................................................35
$splat :: Core/Core.js...................................................................................36
ii MooTools Essentials
www.it-ebooks.info
$A :: Core/Core.js........................................................................................37
$H :: Core/Core.js........................................................................................38
Other Shortcuts: $clear, $empty, $lambda,
$random, $time, $try.........................................................................39
$clear :: Core/Core.js..................................................................................39
$empty :: Core/Core.js.................................................................................39
$lambda :: Core/Core.js..............................................................................40
$random :: Core/Core.js..............................................................................41
$time :: Core/Core.js....................................................................................42
$try :: Core/Core.js......................................................................................42
Browser: Information About the Client...............................................43
Chapter 4: Native Objects..........................................................45
Native.implement...................................................................................45
Arrays.....................................................................................................47
Array Methods.............................................................................................47
Array :: Iteration Methods...........................................................................48
Array.each...................................................................................................48
Anonymous Methods vs. Named Functions...............................................50
Other Iteration Methods..............................................................................50
Array :: Introspection Methods...................................................................51
Array :: Manipulation Methods...................................................................51
Objects (a.k.a. Hash).............................................................................53
Hash.............................................................................................................54
$H................................................................................................................55
Hash Methods..............................................................................................55
Hash :: Iteration Methods............................................................................56
Hash.each ....................................................................................................56
Other Iteration Methods..............................................................................58
Hash :: Introspection Methods....................................................................59
Hash :: Manipulation Methods....................................................................61
MooTools Essentials iii
www.it-ebooks.info
Functions...............................................................................................62
Function Methods Generate Copies............................................................63
Numbers......................................................................................................70
Strings..........................................................................................................72
Events..........................................................................................................74
Event Methods.............................................................................................75
Event Properties ..........................................................................................76
Chapter 5: Elements .................................................................79
Creating and Cloning Elements...........................................................79
Collecting Elements from the DOM.....................................................81
$ :: Element/Element.js...............................................................................81
Using $ to Ensure You Have an Initialized Element..................................82
$$ :: Element/Element.js.............................................................................83
Element Methods and Collections........................................................84
$E :: Element/Element.js.............................................................................85
Element Methods for Collecting Children,
Siblings, and Parents........................................................................85
Setting, Getting, and Erasing
Properties of Elements......................................................................87
Element.set..................................................................................................87
Element.get..................................................................................................89
Element.erase ..............................................................................................89
Custom Getters and Setters and Erasers......................................................90
Element Injection and Removal...........................................................91
Element (CSS) Classes..........................................................................93
Element Storage....................................................................................93
What’s New in 1.2: Element Storage..........................................................94
iv MooTools Essentials
www.it-ebooks.info
The Elements Object.............................................................................96
Elements Methods.......................................................................................96
Elements.filter.............................................................................................97
Other Element Methods in Element.js.................................................97
Element.Event.js....................................................................................98
Adding and Removing Element Events......................................................99
Chapter 6: Utilities..................................................................105
Selectors...............................................................................................105
Complex CSS3 Expressions......................................................................106
DomReady ...........................................................................................109
The DomReady Custom Event..................................................................109
JSON....................................................................................................110
MooTools and JSON.................................................................................110
JSON.encode.............................................................................................110
JSON.decode.............................................................................................111
Cookie..................................................................................................112
Cookie.write..............................................................................................112
Cookie.read................................................................................................113
Cookie.dispose..........................................................................................113
Swiff.....................................................................................................113
Swiff Constructor......................................................................................114
Swiff.replaces, Swiff.inject.......................................................................115
Swiff.remote..............................................................................................115
MooTools Essentials v
www.it-ebooks.info
Chapter 7: Classes and Inheritance..........................................117
Using the Class Constructor...............................................................117
Initialization........................................................................................119
Inheritance..........................................................................................120
Implement vs. Extend..........................................................................121
Extending Classes...............................................................................121
Extending Classes into Themselves....................................................123
Implementing Classes.........................................................................124
Implementing Classes into Other Classes..........................................125
Chapter 8: Getting Started with Classes....................................129
Class.Extras.........................................................................................129
The Options Class.....................................................................................129
The Events Class.......................................................................................131
The Chain Class.........................................................................................134
Chapter 9: Fx .........................................................................137
Fx and Fx.CSS....................................................................................137
Fx Options.................................................................................................137
Fx Events...................................................................................................138
Fx.start.......................................................................................................139
Fx.set.........................................................................................................140
Fx.cancel, Fx.pause, Fx.resume................................................................140
Fx.Tween.............................................................................................141
Element.tween...........................................................................................142
Fx.Morph.............................................................................................143
Element.morph..........................................................................................144
vi MooTools Essentials
www.it-ebooks.info
Element.set/get with Fx.Morph.................................................................144
Using CSS Selectors with Fx.Morph........................................................145
Fx.Transitions.....................................................................................146
The Transitions..........................................................................................146
Specifying a Transition for an Effect........................................................150
Creating Your Own Transition..................................................................150
The Rest of Fx.*..................................................................................151
Chapter 10: Request...............................................................153
Request.................................................................................................153
Request Options........................................................................................155
Request.send..............................................................................................155
Request: .get, .post, .put, .delete................................................................157
Request.cancel...........................................................................................157
Element.send.............................................................................................158
Request.HTML....................................................................................159
Element.load..............................................................................................160
Request.JSON......................................................................................161
Chapter 11: Plug-Ins...............................................................163
A More General Overview..................................................................163
Assets....................................................................................................164
Assets.javascript........................................................................................164
Assets.css...................................................................................................164
Assets.image..............................................................................................164
Assets.images............................................................................................165
Accordion.............................................................................................165
Fx.Slide................................................................................................167
Fx.Scroll..............................................................................................167
MooTools Essentials vii
www.it-ebooks.info
Fx.Elements.........................................................................................168
Drag.....................................................................................................169
Element.makeResizeable...........................................................................169
Drag.Move...........................................................................................170
Element.makeDraggable...........................................................................171
Color ....................................................................................................171
Group...................................................................................................171
Hash.Cookie........................................................................................172
Sortables..............................................................................................173
Slider....................................................................................................174
Scroller.................................................................................................174
Tips.......................................................................................................175
Chapter 12: Third-Party Plug-Ins..............................................177
The CNET Clientside Libraries..........................................................177
dbug...........................................................................................................178
Browser.Extras..........................................................................................178
Native Extensions......................................................................................178
Element Extensions...................................................................................178
Effects Extensions.....................................................................................179
Request......................................................................................................179
UI...............................................................................................................179
Layout........................................................................................................180
Forms.........................................................................................................181
Other Third-Party Scripts...................................................................182
Autocompleter, FancyUpload, ReMooz, SqueezeBox, Roar....................182
Slimbox .....................................................................................................183
. . . And More............................................................................................184
viii MooTools Essentials
www.it-ebooks.info