PacktLib: jQuery UI 1.10: The User Interface Library for jQuery

jQuery UI 1.10: The User Interface Library for jQuery

Credits

About the Authors

About the Reviewers

www.PacktPub.com

Preface

Introducing jQuery UI

Downloading the library

Setting up a development environment

Understanding the structure of the library

Working with ThemeRoller

Categorizing the component categories

Browser support

Using the book examples

Library licensing

Introducing the API

Summary

The CSS Framework and Other Utilities

Working with the files that make up the framework

Linking to the required framework files

Using the framework classes

Switching themes quickly and easily

The position utility

Positioning with a function

Using the position widget in a real-world example

The widget factory

Summary

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

Working with the Tab 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

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

Adding or removing panels

Resizing an accordion panel

Accordion interoperability

Summary

The Dialog

Creating a basic dialog

Listing the dialog options

Adding buttons

Enabling dialog animations

Configuring the dialog's dimensions

Setting the z-index order of dialogs

Handling the dialog's event callbacks

Controlling a dialog programmatically

Getting data from the dialog

Exploring dialog interoperability

Creating a dynamic image-based dialog

Summary

The Slider and Progressbar Widgets

Introducing the slider widget

Custom styling

Configuring a basic slider

Using the slider's event API

Practical uses

Creating a color slider

Introducing the progressbar widget

Responding to user interaction

Implementing rich uploads with a progressbar

Summary

The Datepicker Widget

Implementing the datepicker widget

Configurable options of the datepicker

Minimum and maximum dates

Changing the elements in the datepicker UI

Configuring alternative animations

Updating an additional input element

Changing the date format

Introducing the utility methods

Listing the datepicker methods

Implementing an AJAX-enabled datepicker

Summary

The Button and Autocomplete Widgets

Introducing the button widget

Introducing the autocomplete widget

Configurable autocomplete options

Working with autocomplete events

The autocomplete methods

Displaying HTML in the list of suggestions

Summary

Creating Menus

Implementing a basic menu widget

Exploring the menu CSS framework classes

Configuring menu options

Styling 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

Working with Tooltips

Implementing a default tooltip

Exploring the tooltip CSS framework classes

Overriding the default styles

Configuring tooltip options

Positioning tooltips accurately

Tracking mouse movement with tooltips

Displaying certain tooltips

Displaying AJAX content in tooltips

Using effects in tooltips

Working with HTML in tooltips

Using tooltip methods

Enabling and disabling tooltips

Displaying tooltips programmatically

Handling tooltip events

Playing videos

Filling out and validating forms

Summary

Drag and Drop

The deal with draggables and droppables

Getting started with the draggable widget

Configuring the draggable options

Draggable event callbacks

Draggable's methods

Getting started with the droppable widget

Configuring droppables

Configuring drop tolerance

Understanding the droppable callback options

Droppable methods

Creating a maze game using the widgets

Summary

The Resizable Component

Implementing a basic resizable widget

Listing the resizable options

Defining resizable events

Looking at the resizable methods

Creating resizable tabs

Summary

Selecting and Sorting with jQuery UI

Introducing the selectable widget

Introducing the Selectee class names

Configuring the selectable component

Handling selectable events

Working with selectable methods

Creating a selectable image viewer

Getting started with the sortable widget

Styling the sortable widget

Configuring sortable options

Reacting to sortable events

Connecting callbacks

Listing the sortable methods

Exploring widget compatibility

Summary

UI Effects

Using the core effects file

Highlighting specified elements

Bouncing

Shaking an element

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

Understanding the blind effect

Clipping elements

Folding elements

Summary

Help and Support

Help and Support

Help and Support

Help and Support

Help and Support

Help and Support

Help and Support

Help and Support

Help and Support

Index