MooTools Essentials

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 .................................................................................... 5Adding 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$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.................................................................... 61Functions...............................................................................................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 .......................................................... 94The 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 .............................................................................................. 115Chapter 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 .......................................................................................... 144Element.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 ..............................................................................................167Fx.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 ............................................................................................ 184Chapter 16: Where to Learn More ............................................ 227
Appendix: Core Concepts in JavaScript ..................................... 229
DOCTYPE Matters .............................................................................229
Type Coercion: “Falsy” and “Truthy” Values..................................229
Functional Programming (a.k.a. Lambda)........................................231
Literals and Anonymous Functions...................................................232
“this” and Binding ..............................................................................233
Binding ...................................................................................................... 235
Closures ...............................................................................................238
Prototypal Inheritance ........................................................................239
The Inheritance Chain........................................................................241
Unobtrusive JavaScripting ........................................................................ 243
DomReady................................................................................................. 245
Namespacing ............................................................................................. 245
Related Titles ......................................................................... 247