jQuery UI 1.10: The User Interface Library for jQuery电子书

jQuery UI 1.10: The User Interface Library for jQuery

Table of Contents

jQuery UI 1.10: The User Interface Library for jQuery

Credits

About the Authors

About the Reviewers

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

Reader feedback

Customer Support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Introducing jQuery UI

Downloading the library

Using the hosted versions of jQuery UI

Setting up a development environment

Understanding the structure of the library

Examining the folder structure in detail

Working with ThemeRoller

Categorizing the component categories

Introducing the widget factory and effects

Browser support

Using the book examples

Library licensing

Introducing the API

Events and callbacks

Callback arguments

Summary

2. The CSS Framework and Other Utilities

Working with the files that make up the framework

jquery.ui.all.css

jquery.ui.base.css

jquery.ui.core.css

Explaining the individual component framework files

jquery.ui.theme.css

Linking to the required framework files

Using the framework classes

Working with containers

Using interactions

Adding icons

Examining the icons in detail

Adding custom icons

Using custom icons – a note

Interaction cues

Switching themes quickly and easily

Overriding the theme

The position utility

Using the position utility

Explaining collision avoidance

Positioning with a function

Using the position widget in a real-world example

The widget factory

Summary

3. Using the Tabs Widget

Implementing a tab widget

Styling the Tabs widget

Applying a custom theme to the tabs

Configuring the Tabs widget

Working with tabs

Selecting a tab

Disabling a tab

Adding transition effects

Collapsing a tab

Working with the Tab events

Binding to events

Using tab methods

Enabling and disabling tabs

Adding and removing tabs

Simulating clicks

Destroying tabs

Getting and setting options

Working with AJAX tabs

Changing the URL of a remote tab's content

Displaying data obtained via JSONP

Summary

4. The Accordion Widget

Structuring the accordion widget

Styling the accordion

Configuring an accordion

Changing the trigger event

Changing the default active header

Filling the height of its container

Using the accordion animation

Listing the accordion events

Using the change event

Configuring the beforeActivate event

Explaining the accordion methods

Header activation

Adding or removing panels

Resizing an accordion panel

Accordion interoperability

Using multiple accordions

Summary

5. The Dialog

Creating a basic dialog

Listing the dialog options

Showing the dialog

Setting a dialog title

Configuring the modality option

Adding buttons

Adding icons to the dialog buttons

Enabling dialog animations

Configuring the dialog's dimensions

Setting the z-index order of dialogs

Controlling the focus

Handling the dialog's event callbacks

Controlling a dialog programmatically

Toggling the dialog

Getting data from the dialog

Exploring dialog interoperability

Creating a dynamic image-based dialog

Summary

6. The Slider and Progressbar Widgets

Introducing the slider widget

Custom styling

Configuring a basic slider

Creating a vertical slider

Setting the maximum and minimum values

Stepping with the slider widget

Animating the slider widget

Setting the slider's value

Using multiple handles

Working with the range option

Using the slider's event API

Using slider methods

Practical uses

Creating a color slider

Introducing the progressbar widget

Listing the progressbar's options

Setting the progressbar's value

The progressbar's event API

Using progressbar methods

Adding indeterminate support

Responding to user interaction

Implementing rich uploads with a progressbar

Summary

7. The Datepicker Widget

Implementing the datepicker widget

Selecting dates using inline calendars

Configurable options of the datepicker

Using the basic options

Minimum and maximum dates

Changing the elements in the datepicker UI

Adding a trigger button

Configuring alternative animations

Displaying multiple months

Displaying the datepicker vertically

Changing the date format

Updating an additional input element

Changing the date format

Localizing the datepicker widget

Implementing custom localization

Implementing callbacks

Localizing a datepicker dynamically via rollup

Introducing the utility methods

Listing the datepicker methods

Selecting a date programmatically

Showing the datepicker in a dialog box

Implementing an AJAX-enabled datepicker

Summary

8. The Button and Autocomplete Widgets

Introducing the button widget

Implementing the standard buttons

Creating buttons using the <input> or <button> tags

Theming

Exploring the configurable options

Adding the button icons

Input icons

Adding the Button events

Creating button sets

Checkbox button sets

Radio button sets

Working with button methods

Introducing the autocomplete widget

Working with local data sources

Using an array of objects as the data source

Configurable autocomplete options

Configuring minimum length

Appending the suggestion list to an alternative element

Working with autocomplete events

The autocomplete methods

Working with remote data sources

Retrieving content based on input

Passing a function as a source option

Displaying HTML in the list of suggestions

Summary

9. Creating Menus

Implementing a basic menu widget

Exploring the menu CSS framework classes

Configuring menu options

Styling menus

Displaying the state of the selected menu options using icons

Adding dividers to menus

Using menu methods

Enabling and disabling menu options programmatically

Adding and removing menu items

Working with menu events

Binding to events

Creating horizontal menus

Combining with other widgets

Designing context menus

Enhancing a select menu

Summary

10. Working with Tooltips

Implementing a default tooltip

Exploring the tooltip CSS framework classes

Overriding the default styles

Using prebuilt themes

Creating custom themes with ThemeRoller

Configuring tooltip options

Positioning tooltips accurately

Using the position widget

Tracking mouse movement with tooltips

Displaying certain tooltips

Displaying AJAX content in tooltips

How can we tell if it has worked?

Using effects in tooltips

Working with HTML in tooltips

The dangers of working with HTML

Using tooltip methods

Enabling and disabling tooltips

Displaying tooltips programmatically

Handling tooltip events

Binding to tooltip events

Playing videos

Filling out and validating forms

Summary

11. Drag and Drop

The deal with draggables and droppables

Getting started with the draggable widget

Implementing a basic drag

Configuring the draggable options

Using the configuration options

Resetting the dragged elements

Adding the drag handle support

Adding the helper elements

Constraining the drag

Snapping

Draggable event callbacks

Draggable's methods

Getting started with the droppable widget

Configuring droppables

Configuring accepted draggables

Configuring drop tolerance

Understanding the droppable callback options

Setting the scope options for droppable

Configuring the greedy option

Droppable methods

Creating a maze game using the widgets

Summary

12. The Resizable Component

Implementing a basic resizable widget

Listing the resizable options

Configuring the resize handles

Adding additional handle images

Defining size limits

Resizing ghosts

Containing the resize

Handling aspect ratio

Resizable animations

Simultaneous resizing

Preventing unwanted resizes

Defining resizable events

Looking at the resizable methods

Creating resizable tabs

Summary

13. Selecting and Sorting with jQuery UI

Introducing the selectable widget

Introducing the Selectee class names

Configuring the selectable component

Filtering selectables

Canceling the selection

Handling selectable events

Working with vast amounts of selectables

Working with selectable methods

Refreshing selectables

Creating a selectable image viewer

Adding the behavior

Styling the image selector

Getting started with the sortable widget

Styling the sortable widget

Configuring sortable options

Placeholders

Sortable helpers

Sortable items

Connecting lists

Reacting to sortable events

Connecting callbacks

Listing the sortable methods

Serializing

Exploring widget compatibility

Adding draggables

Summary

14. UI Effects

Using the core effects file

Using color animations

Using class transitions

Advanced easing

Highlighting specified elements

Adding additional effect arguments

Bouncing

Shaking an element

Transferring an element's outline

Scaling elements on a page

Exploding elements on a page

Creating a puff effect

Working with the pulsate effect

Adding the drop effect to elements

Implementing the sliding effect

Using easing

Understanding the blind effect

Clipping elements

Folding elements

Summary

A. Help and Support

Downloading jQuery

Updating the code samples

Getting help

Changing themes

Getting help from the community

Need to ask a question?

Getting help via IRC chat

Asking at Stack Overflow

Reporting a bug in the library

Index