YUI 2.8: Learning the Library电子书

YUI 2.8 Learning the Library

Table of Contents

YUI 2.8 Learning the Library

Credits

About the Authors

About the Reviewers

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. Getting Started with YUI

What is the YUI?

Who is it for and who will it benefit the most?

Why the Yahoo! User Interface Library?

Graded browser support

What comes with the YUI?

The library topography

The core files

The Utilities

The Controls

The CSS Tools

The developer tools

The library's structure

What else does Yahoo! provide?

Are there any licensing restrictions?

Installing the YUI

Creating an offline library repository

Using the library files in your own web pages

Code placement

Perfect date selection with the Calendar Control

The basic Calendar class

The CalendarGroup class

Implementing a Calendar

The initial HTML page

Highly eventful

The DateMath class

Summary

2. Creating Consistency with the CSS Tools

Tools of the trade

Element normalization with reset.css

Element rules

First base

Tidying up text with fonts.css

Layout pages with ease using grids.css

Setting up your page structure

The basic building blocks of your pages

Grid nesting

A word on Sam

Summary

3. DOM Manipulation and Event Handling

Working with the DOM

DOM concepts

Common DOM scripting techniques

Common DOM methods

Further reading

DOM—the old way

DOM—the YUI way

DOM manipulation in YUI

Many DOMs make light work

The Dom class

Using the Dom class

The Region class

Additional useful Dom methods

Other classes

The Selector Utility

Listening for Events the easy (YUI) way

Event models

Old-styled events

YUI event capturing

Evolving event handlers

Reacting when appropriate

A look at the Event Utility

Listeners

Event delegation

Other plugins

Custom events

The evolution of Custom Events

EventProvider

Custom event basics

The Element Utility

Subclassing from Element

Adding custom methods and properties

Using AttributeProvider

Summary

4. Calling Back Home

Introduction to Connection Manager

The XMLHttpRequest object interface

A closer look at the response object

The Callback object

Basic communication

Sending forms

Posting

Yahoo Query Language (YQL)

Overcoming the XDS restriction

Working with XML

Processing a JSON reply

Using JSONP with the Get utility

Loading library components via Get

Summary

5. Animation, the Browser History Manager, and Cookies

Introducing the Animation Utility

The class structure of the Animation Utility

The Animation constructor

Animation's attributes

Custom Animation events

The subclasses

Additional classes

Using Animation to create an Accordion Widget

Listening to the end of the Animation

The CSS for Accordion

Using Element

Dealing with motion

Restoring the browser's expected functionality

The BHM class

Using BHM

The BHM script

Cookies

Summary

6. Content Containers and Tabs

Meet the YUI Container family

Module

Overlay

Panel

Tooltip

Dialog

SimpleDialog

Container Effects

OverlayManager

Creating a Panel

Before we go on

Working with Dialogs

An "Are you sure?" SimpleDialog

Easy Tooltips

The YUI TabView Control

TabView classes

Class members

Adding tabs

The underlying markup

The JavaScript needed by TabView

Summary

7. Menus

Common navigation structures

Instant menus—just add water (or a Menu Control)

The Menu classes

Menu subclasses

The MenuItem class

MenuItem subclasses

Creating a basic navigation menu

The initial HTML page

The underlying menu markup

Formatting options

Creating the Menu object

Using the ContextMenu

ContextMenu scripting

Wiring up the backend

The application-style MenuBar

Summary

8. Buttons and Trees

Why use the YUI Button family?

Meet the Button Control

YAHOO.widget.Button

YAHOO.widget.ButtonGroup

Using the Button Control

Creating the YUI Button objects

Using the Split Button type

Getting started

Scripting the Split Button

Tree-like structures with the TreeView Control

Planting the seed

An assortment of nodes

Reading from markup

TreeView members

Tree nodes

Custom information

Dynamic loading

Highlighting

Summary

9. DataSource and AutoComplete

Tabular data sources

DataSource classes

HTML table

Simple array

Complex array

FunctionDataSource

Remote DataSource with text

Remote DataSource with JSON

Remote DataSource with XML

News reader examples

Meta information

Massaging unruly data

Look ahead with the AutoComplete Control

AutoComplete Constructor

Implementing AutoComplete

Summary

10. DataTable

DataTable dependencies

DataTable classes

Creating a DataTable

Cell formatting

Responding to DataTable events

More column properties and methods

Column sorting

Cell editing

Server-side updating

DataTable methods

Paging

Server-side sorting and paging

Selection and highlighting

More DataTable configuration attributes

ScrollingDataTable

Summary

11. Rich Text Editor

The two editors

A simple e-mail editor

Filtering the data

More validation

Improving the looks

Changing the toolbar

Adding a new toolbar button

Adding CSS styles

Changing the available fonts

Summary

12. Drag-and-Drop with the YUI

Dynamic drag-and-drop without the hassle

DragDrop classes

Design considerations

Allowing your visitors to drag-and-drop

The constructor

Target practice

Get a handle on things

The drag-and-drop manager

Interaction modes

Constraints

Responding to DragDrop events

Implementing drag-and-drop

Scripting DragDrop

Creating a draggable product item

Visual selection with the slider control

The constructor and factory methods

Class of two

A very simple slider

Getting started

Adding the CSS

Adding the JavaScript

The Resize utility

The Layout Manager

Summary

13. Everyday Tools

Lint-free code

The Logger

The purpose of the—debug Library files

How the Logger can help you

Debugging

Watching bits go by

Seeking performance

YSlow

YUI Compressor

Images and Sprites

YUI Profiler

YUI Testing

Testing in multiple platforms

API Docs

Summary

Index