MooTools 1.2 Beginner's Guide. Learn how to create dynamic, interactive, and responsive cross-browser web applications using this popular JavaScript framework

Spis treści ebooka

• MooTools 1.2 Beginners Guide
  • Table of Contents
  • MooTools 1.2 Beginner's Guide
  • Credits
  • About the Authors
  • About the Reviewer
  • Preface
    • What this book covers
    • What you need for this book
    • Who this book is for
    • Conventions
    • Reader feedback
    • Customer support
      • Errata
      • Piracy
      • Questions
  • 1. MooTools and Me
    • What is MooTools?
    • Why use MooTools?
      • The advantages of using MooTools
        • Writing terse and elegant code
        • Extending native JavaScript
        • Cross-browser compatibility
        • Working with the Document Object Model
        • The advantage of using open-source projects
    • Downloading and installing MooTools
    • Time for actiondownloading and installing the MooTools Core
      • What just happened?
      • Different MooTools downloads
      • The domready event listener
    • Rolling your own MooTools
      • MooTools Core
    • Time for actionexploring the MooTools Core Builder
      • What just happened?
      • Have a go hero explore the MooTools Core Builder output
      • MooTools More
    • Time for actionexploring the MooTools More Builder
      • What just happened?
    • The API concept
    • MooTools resources
      • MooTools Docs
      • MooTools Users Google groups
      • mooforum
      • The MooTorial
    • Summary
  • 2. 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 actionrewriting 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 actioncreating an instance of Dog
      • What just happened?
      • Have a go hero use the .sit() class method
    • Time for actiongiving our class instance some custom options
    • Time for actiondetermining the value of our options
      • Extending classes
    • Time for actionextending 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 actioncreate 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
  • 3. Selecting DOM Elements
    • MooTools and CSS selectors
    • Working with the $() and $$() functions
      • The $() dollar function
      • The $$() dollars function
      • When to use which
    • Time for actionselecting an element with the dollar function
    • Time for actionselecting elements with the dollars function
    • Time for actionselecting 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 actionusing 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 actionusing = attribute selector
      • Time for actionusing != attribute selector
        • Time for actionusing ^= attribute selector
          • Time for actionusing $= attribute selector
            • What just happened?
            • Attribute selector case sensitivity
          • DOM selection makes unobtrusive JavaScript do-able
          • Summary
  • 4. The Core's Useful Utility Functions
    • What is the Core?
    • Browser: Getting information about the client
      • Determining if the client has a specific feature
        • Browser.Features.xpath
        • Browser.Features.xhr
      • Getting information about the client's rendering engine
        • Determining the client's rendering engine and version
    • Time for actiondetermining the client's rendering engine and version
      • Checking if the client is using a particular web browser
      • Have a go hero checking to see if your browser uses Gecko
        • Determining if the client has Adobe Flash installed
      • Finding out information about the client's operating system
        • Potential uses of this property
        • Example scenario: Offering the correct download based on the client's platform
          • SuperSoftware HTML
          • SuperSoftware CSS
    • Time for actionusing Browser.Platform to customize SuperSoftware's download page
      • What just happened?
      • Pop quiz finding out information about the client's operating system
    • Exploring the Core utility functions
      • Checking to see if objects are defined
        • Seeing if an object has a value with $chk
        • Checking if an object is defined with $defined
        • Selecting the first defined object using $pick
        • Getting the return of first working function with $try
      • Dealing with time and intervals
        • The $time() function
    • Time for actionthe $time() function
      • What just happened?
        • The $clear() function
    • Time for actionexploring the $clear() function with periodical()
      • What just happened?
      • Utility functions for working with objects
        • Extending objects with $extend()
        • Merging objects with $merge()
        • Iterating through objects using $each
    • Time for actionexploring the $each function
      • What just happened?
      • Other utility functions in the Core
        • Generating a random number with $random
        • Converting objects to arrays with $splat
        • Determining the data type using $type
        • Limited use functions
          • Creating a function placeholder with $empty
          • Returning arguments using $lambda
          • Creating a function that returns the specified value using $arguments
    • Summary
  • 5. Working with Events
    • What are events exactly?
      • Window events
      • Form events
      • Keyboard events
      • Mouse events
      • MooTools custom mouse events
    • Adding event listeners
      • Adding a single event listener
    • Time for actionhighlighting focused fields of web forms
      • What just happened?
        • Adding multiple event listeners
    • Time for actionadding tooltips to the web form
      • What just happened?
    • Creating custom events
    • Time for actioncreating a custom event for showing help tips
      • What just happened?
      • Have a go hero create your own custom event
    • Removing, cloning, and firing off events
      • Removing events from elements
        • Removing a single event from elements
    • Time for actionremoving an event
      • Removing a type of event, or all events, from elements
      • Cloning events from another element
      • Firing off events
    • Time for actionfiring off a click event
    • The MooTools event object
      • Using event object methods
        • Preventing the default behavior
    • Time for actionpreventing the default behavior of a hyperlink
      • Preventing event bubbling
    • Time for actionpreventing event bubbling
      • What just happened?
        • Stopping default behavior and event propagation
      • Using event properties
    • Summary
  • 6. 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 actiontoggling 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
  • 7. Going 2.0 with Ajax
    • What you'll need
    • Creating a Request object
      • Request object options
      • Request events options
        • Running a function immediately when a request is made
        • Running a function when the request is completed
        • Running a function when the request is cancelled
        • Other Request events
    • Requesting data
    • Time for actionrequesting remote data
      • What just happened?
      • Requesting HTML and JSON data
        • Working with HTML data
    • Time for actionupdating a web page with HTML
      • What just happened?
        • Loading HTML documents remotely
    • Time for actionloading HTML data
      • Working with JSON data
    • Time for actionworking with Ajax and JSON
      • What just happened?
      • Cancelling a Request
    • Sending data
    • Time for actionsending data to PHP
      • What just happened?
    • Setting and getting HTTP headers
      • Setting an HTTP header for an Ajax Request object
      • Getting an HTTP header
    • Time for actiongetting the Last-Modified HTTP header
      • What just happened?
      • Have a go hero get the content length of the requested page
    • Summary
  • 8. Beefing Up MooTools: Using the MooTools More Plugins
    • Downloading MooTools More plugins
    • Time for actiondownloading the Fx.Accordion plugin
      • What just happened?
    • Installing MooTools plugins
    • Time for actioninstalling Fx.Accordion
      • What just happened?
    • Discovering a handful of MooTools More plugins
      • Creating engaging content using Fx.Accordion
    • Time for actioncreating an accordion
      • What just happened?
        • Fx.Accordion options
      • Downloading all the MooTools More plugins we need
    • Time for actiondownloading more Mootools More plugins
      • Extending JavaScript's native Date object
    • Time for actionbuilding a Date calculator tool
      • What just happened?
      • Making web forms more user-friendly with the OverText plugin
    • Time for actioncreating a web form that uses OverText
      • What just happened?
      • Drag-and-drop with Drag and Drag.Move
    • Time for actioncreating a simple drag-and-drop game
      • What just happened?
    • Summary
  • 9. Creating Your Own Plugin
    • Why create a plugin?
    • Designing the plugin
    • Time for actioncreating a design sheet for our plugin
      • What just happened?
    • Creating the ImageCaption script
    • Time for actionwriting the ImageCaption script
      • What just happened?
      • Noting down pitfalls and places of improvement to the script
    • Converting the script to a flexible plugin
    • Time for actioncreating the ImageCaption plugin
      • What just happened?
    • Instantiating the plugin
    • Time for actionbasic instantiation of the ImageCaption plugin
      • What just happened?
      • Creating a more complex instance of the plugin
    • Time for actioncreating new instances of the plugin
      • Creating multiple instances of the plugin
    • Time for actionmultiple instances of the ImageCaption plugin
      • What just happened?
    • Preparing your plugin for the public
      • Documenting your plugin with comments
    • Time for actiondocumenting the ImageCaption plugin
      • What just happened?
      • External documentation
    • Time for actioncreating a basic download page for the ImageCaption plugin
      • What just happened?
    • Summary
  • Index

pokaż cały spis treści

ukryj recenzje