jQuery UI IN ACTION

ABOUT THE BOOK

jQuery UI in Actionis a practical guide to
using and customizing jQuery UI library
components. By working through numerous
examples, youll quickly master jQuery
UIs twelve widgets and five interactions
draggable, droppable, resizable, selectable,
and sortable. The engaging examples
illustrate techniques that work across all
devices. Youll use the widget factory to
create reusable plugins and discover jQuery
UIs CSS theming system that allows you to
create a custom, cohesive look for your sites
and your applications.

FEATURES
Create interactions that work on
any device
Customizable widgets for web and
mobile apps
Written by a member of the core
jQuery UI team
Covers jQuery UI 1.11

` 799/-

ISBN: 9789351197447 Pages: 380 Author: TJ VanToll

SUMMARY
jQuery UI in Actionis a practical guide to using and customizing jQuery UI library components to build rich,
user-friendly web applications. By working through numerous engaging examples, youll move quickly from
placing a datepicker on the page to building a complete user interface that includes features like a contact
form and shopping cart. Youll master jQuery UIs five main interactionsdraggable, droppable, resizable,
selectable, and sortableand learn UI techniques that work across all devices.

ABOUT THE AUTHOR

A professional web developer,TJ VanTollis a member of the jQuery UI
core team.
/dtechpress

/dtechpress

/dreamtechpress

dreamtechpress.wordpress.com

/company/dreamtech-press

TABLE OF CONTENTS
PART 1 MEET JQUERY UI
1 Introducing jQuery UI
yy What is in jQuery UI?
yy The benefits of using jQuery UI
Cohesive and consistent APIs
Comprehensive browser support
yy The limitations of jQuery UI
Lack of widgets
jQuery UI and mobile devices
yy Getting started with the library
Versions of the library
Downloading from the jQuery UI website
yy The first example
yy Using an online testing tool
2 Enhancing UIs with Widgets
yy Creating widgets
yy Customizing widgets with options
yy Modifying widgets with methods
Invoking methods
Using dialogs to edit lists
yy Responding to widget changes with events
Subscribing to widget events
Event handlers vs. callbacks

PART 2 JQUERY UI CORE

3 Building complex web forms with jQuery UI
yy The challenges of building modern web
forms
yy Autocomplete: suggesting input options to
users
Using local data
Loading from a remote source
yy Button: enhancing native buttons, inputs,
and links
yy Selectmenu: enhancing native <select>
elements
yy Datepicker: selecting dates from a pop-up
calendar
Parsing and formatting dates
Handling date globalization
yy Spinner: enhancing native <input> elements
to collect numeric data
yy Completing the appointment form
yy HTML5 elements vs. jQuery UI widgets
4 Enhancing Interfaces with Layout and Utility
Widgets
yy Accordion: creating toggleable content
panels
Configuring the accordion widget
Adding and removing panels
yy Tabs: toggling between content areas
Loading remote content
Published by:

/dtechpress

yy Menu: creating web menus with semantic

markup
yy Dialog: displaying content in a pop-up
container
yy Progressbar: displaying the progress of a task
5 Adding Interaction to Your Interfaces
yy Draggable: allowing users to move elements
yy Droppable: creating containers that accept
draggables
Building a drag-and-drop game
Building a shopping cart
yy Resizable: allowing users to change the size
of elements
Using custom resize handles
Building an appointment scheduler

Triggering widget events with _trigger()

yy Enabling, disabling, and destroying widgets
Enabling and disabling a widget
9 Extending widgets with the widget factory
yy Building widget extensions
Changing existing and adding new
options to a widget
Extending a custom widget
yy Customizing widgets with extension points
Using undocumented extension points
Adding your own extension points
yy Extending the datepicker widget
Building a mobile-friendly datepicker
extension

10
6 Creating rich animations with effects
yy Using effects and the effect() method
Customizing effects with easings
Making visual associations with the
transfer effect
yy Using effects with the jQuery UI widgets
The show and hide options
Showing a message in a dialog
yy Animating CSS class name changes
Enhancing addClass(), removeClass(), and
toggleClass()
Building an off-canvas navigation menu
for mobile
7 Theming and Styling Applications with
jQuery UI
yy Using built-in and custom themes
yy Using the jQuery UI CSS framework to
customize applications
Styling widget containers
Styling interaction states
yy Styling with widget class names
Building vertical tabs
Building a mobile-friendly datepicker

PART 3 CUSTOMIZATION AND

ADVANCED USAGE
8 Using the Widget Factory to Build Stateful
Plugins
yy Building a widget
Constructing widgets with $.widget()
Choosing a markup structure
Listening for events with _on()
yy Customizing widgets with options, methods,
and events
Making widgets configurable with
options
Changing the widgets state with
methods

Preparing your application for production

yy The problem with third-party CDNs
yy Downloading jQuery UI from Download
Builder
yy Managing JavaScript dependencies with
AMD
Setting up RequireJS for development
Loading jQuery UI components with
RequireJS
yy Building your applications assets with the
optimizer
Optimizing JavaScript assets
Optimizing CSS dependencies
yy Supporting AMD in custom widgets

11 Building a flight-search application

yy Structuring your application
yy Collecting user input
Building an airport code autocomplete
Polyfilling HTML5 inputs with jQuery UI
yy Displaying the results on the screen
Storing and resolving templates with
RequireJS
Showing a processing indicator while
data loads
yy Adding a responsive design
yy Preparing the application for production
12 Under the hood of jQuery UI
yy Positioning elements with the position utility
Handling collisions elegantly
Controlling the collision detection
yy Using the utility functionality in jQuery UI
Core
Generating unique ids
Using key code constants
yy Accessing and managing widget instances
Detecting widget instances with :data()
yy Using autoinitialization to remove boilerplate
code 
... and more

DREAMTECH PRESS
WILEY INDIA PVT. LTD.
19-A, Ansari Road, Daryaganj
4435-36/7, Ansari Road, Daryaganj
New Delhi-110 002, INDIA
New Delhi-110 002, INDIA
Tel: +91-11-2324 3463-73, Fax: +91-11-2324 3078
Tel: +91-11-4363 0000, Fax: +91-11-2327 5895
Email: feedback@dreamtechpress.com
Email: csupport@wiley.com
Website: www.dreamtechpress.com
Website: www.wileyindia.com
Regional Offices: Bangalore: Tel: +91-80-2313 2383, Fax: +91-80-2312 4319, Email: blrsales@wiley.com
Mumbai: Tel: +91-22-2788 9263, 2788 9272, Telefax: +91-22-2788 9263, Email: mumsales@wiley.com
/dtechpress

/dreamtechpress

dreamtechpress.wordpress.com

Execlusively
Distributed by:

/company/dreamtech-press