jQuery UI in Action
TJ VanToll
Foreword by Scott González
  • September 2014
  • ISBN 9781617291937
  • 384 pages
  • printed in black & white

A fantastic resource.

Scott González, jQuery UI

jQuery UI in Action is a practical guide to using and customizing jQuery UI library components to build rich, user-friendly web applications. By working through numerous engaging examples, you'll 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. You'll master jQuery UI's five main interactions—draggable, droppable, resizable, selectable, and sortable—and learn UI techniques that work across all devices.

Table of Contents show full

foreword

preface

acknowledgments

about this book

about the cover illustration

Part 1 Meet jQuery UI

1. Introducing jQuery UI

1.1. What is in jQuery UI?

1.2. The benefits of using jQuery UI

1.2.1. Cohesive and consistent APIs

1.2.2. Comprehensive browser support

1.2.3. Open source and free to use

1.2.4. Thorough documentation

1.2.5. Powerful theming mechanism

1.2.6. Emphasis on accessibility

1.2.7. Stable and maintenance friendly

1.3. The limitations of jQuery UI

1.3.1. Lack of widgets

1.3.2. jQuery UI and mobile devices

1.4. Getting started with the library

1.4.1. Versions of the library

1.4.2. Downloading from the jQuery UI website

1.4.3. Downloading from CDNs

1.5. The first example

1.6. Using an online testing tool

1.7. Summary

2. Enhancing UIs with widgets

2.1. Creating widgets

2.2. Customizing widgets with options

2.3. Modifying widgets with methods

2.3.1. Invoking methods

2.3.2. Using option() to modify widgets

2.3.3. Using dialogs to edit lists

2.4. Responding to widget changes with events

2.4.1. Subscribing to widget events

2.4.2. Event handlers vs. callbacks

2.4.3. Event parameters

2.5. Summary

Part 2 jQuery UI Core

3. Building complex web forms with jQuery UI

3.1. The challenges of building modern web forms

3.2. Autocomplete: suggesting input options to users

3.2.1. Using local data

3.2.2. Loading from a remote source

3.2.3. Using autocomplete with third-party services and APIs

3.4. Selectmenu: enhancing native <select> elements

3.5. Datepicker: selecting dates from a pop-up calendar

3.5.1. Parsing and formatting dates

3.5.2. Handling date globalization

3.6. Spinner: enhancing native <input> elements to collect numeric data

3.7. Completing the appointment form

3.8. HTML5 elements vs. jQuery UI widgets

3.9. Summary

4. Enhancing interfaces with layout and utility widgets

4.1. Accordion: creating toggleable content panels

4.1.1. Configuring the accordion widget

4.1.2. Adding and removing panels

4.2. Tabs: toggling between content areas

4.2.1. Loading remote content

4.2.2. Loading movie information in a tabs widget

4.3. Menu: creating web menus with semantic markup

4.4. Dialog: displaying content in a pop-up container

4.5. Progressbar: displaying the progress of a task

4.6. Slider: selecting a value using moveable handles

4.6.1. Building range sliders

4.6.2. Adding a font size range

4.7. Tooltip: enhancing native tooltips with a customizable control

4.7.1. Using custom tooltip content

4.7.2. Displaying a preview in a tooltip

4.8. Summary

5. Adding interaction to your interfaces

5.1. Draggable: allowing users to move elements

5.2. Droppable: creating containers that accept draggables

5.2.1. Building a drag-and-drop game

5.2.2. Building a shopping cart

5.3. Sortable: rearranging elements in a list

5.3.1. Building connected lists

5.3.2. Building a fruit and vegetable sorting game

5.4. Resizable: allowing users to change the size of elements

5.4.1. Using custom resize handles

5.4.2. Building an appointment scheduler

5.5. Selectable: allowing users to select elements from a group

5.6. Creating multidevice interactions: the importance of touch

5.6.1. Why doesn’t jQuery UI support touch events?

5.6.2. Introducing jQuery UI Touch Punch

5.7. Summary

6. Creating rich animations with effects

6.1. Using effects and the effect() method

6.1.1. Customizing effects with easings

6.1.2. Making visual associations with the transfer effect

6.2. Animating visibility changes

6.2.1. Customizing effects with easings

6.2.2. Making visual associations with the transfer effect

6.3. Using effects with the jQuery UI widgets

6.3.1. The show and hide options

6.3.2. Showing a message in a dialog

6.4. Animating CSS class name changes

6.4.1. Enhancing addClass(), removeClass(), and toggleClass()

6.4.2. Building an off-canvas navigation menu for mobile

6.5. Effects vs. CSS3 animations and

6.5.1. CSS3 transitions vs. the jQuery UI class name methods

6.5.2. CSS animations vs. effects

6.6. Summary

7. Theming and styling applications with jQuery UI

7.1. Using built-in and custom themes

7.2. Using the jQuery UI CSS framework to customize applications

7.2.1. Styling widget containers

7.2.2. Styling interaction states

7.2.3. Styling interaction cues

7.2.4. Building a styled confirmation dialog

7.3. Styling with widget class names

7.3.1. Building vertical tabs

7.3.2. Building a mobile-friendly datepicker

7.3.3. Adding arrows to tooltips with CSS

7.4. Summary

Part 3 Customization and advanced usage

8. Using the widget factory to build stateful plugins

8.1. Building a widget

8.1.1. Constructing widgets with $.widget()

8.1.2. Choosing a markup structure

8.1.3. Overriding _create() to initialize widgets

8.1.4. Making widgets themeable

8.1.5. Listening for events with _on()

8.2. Customizing widgets with options, methods, and events

8.2.1. Making widgets configurable with options

8.2.2. Changing the widget’s state with methods

8.2.3. Triggering widget events with _trigger()

8.3. Enabling, disabling, and destroying widgets

8.3.1. Enabling and disabling a widget

8.3.2. Undoing a widget’s effects with _destroy()

8.4. Summary

9. Extending widgets with the widget factory

9.1. Building widget extensions

9.1.1. Changing existing and adding new options to a widget

9.1.2. Redefining widgets with the widget factory

9.1.3. Extending a custom widget

9.2. Customizing widgets with extension points

9.2.1. Using undocumented extension points

9.2.2. Adding your own extension points

9.3. Extending the datepicker widget

9.3.1. Building a mobile-friendly datepicker extension

9.4. Summary

10. Preparing your application for production

10.1. The problem with third-party CDNs

10.2. Downloading jQuery UI from Download Builder

10.3. Managing JavaScript dependencies with AMD

10.3.1. Setting up RequireJS for development

10.3.2. Loading jQuery UI components with RequireJS

10.4. Building your application’s assets with the optimizer

10.4.1. Optimizing JavaScript assets

10.4.2. Optimizing CSS dependencies

10.5. Supporting AMD in custom widgets

10.6. Summary

11. Building a flight-search application

11.1. Structuring your application

11.2. Collecting user input

11.2.1. Building an airport code autocomplete

11.2.2. Polyfilling HTML5 inputs with jQuery UI

11.2.3. Validating user input with HTML5

11.3. Connecting to a RESTful API

11.3.1. Looking up flights with $.ajax()

11.3.2. Parsing XML with jQuery

11.4. Displaying the results on the screen

11.4.1. Storing and resolving templates with RequireJS

11.4.2. Showing a processing indicator while data loads

11.5. Adding a responsive design

11.6. Preparing the application for production

11.7. Getting the optimal performance with almond

11.8. Summary

12. Under the hood of jQuery UI

12.1. Positioning elements with the position utility

12.1.1. Building a UI walkthrough with the position utility and dialog widget

12.1.2. Handling collisions elegantly

12.1.3. Controlling the collision detection

12.2. Using the utility functionality in jQuery UI Core

12.2.1. Generating unique ids

12.2.2. Using key code constants

12.3. Accessing and managing widget instances

12.3.1. Detecting widget instances with :data()

12.4. Advanced widget prototype methods and properties

12.4.1. A widget’s prototype chain explained

12.4.2. Using a widget’s default element to streamline initialization

12.4.3. Supporting embedded-window use in widgets

12.4.4. Displaying elements with _show() and _hide()

12.4.5. Customizing options on the fly

12.5. Using autoinitialization to remove boilerplate code

12.5.1. How jQuery Mobile’s autoinitialization works

12.5.2. jQuery Mobile’s widget extension

12.5.3. Autoinitializing jQuery UI widgets

12.6. Summary

Appendix A: Learning jQuery

A.1. Experimentation

A.1.1. Try jQuery (try.jquery.com)

A.1.2. Online testing tools

A.1.3. The browser’s developer tools

A.2. Reading

A.2.1. jQuery Learning Center (learn.jquery.com)

A.2.2. Books

Appendix B: How jQuery UI tests jQuery UI

B.1. Testing options

B.2. Testing methods

B.3. Testing events

Appendix C: Using jQuery UI with Backbone

C.1. Building a Backbone view

C.2. Adding jQuery UI to the view

C.3. Using declarative widgets

Appendix D: Creating decimal, currency, and time pickers with Globalize

D.1. Building decimal pickers

D.2. Building currency pickers

D.3. Building time pickers

Appendix E: Contributing to jQuery UI

E.1. Help others on the forums, Stack Overflow, and IRC

E.2. Triage bugs

E.3. Write documentation and maintain the websites

E.4. Write code

E.5. Ask for help

Appendix F: Polyfilling HTML5 with jQuery UI

F.1. Using polyfills

F.1.1. Using Modernizr

F.2. Polyfilling <input type="date"> with datepicker

F.3. Polyfilling <input type="number"> with spinner

F.4. Polyfilling <input type="range"> with slider

F.5. Polyfilling <progress> with progressbar

F.6. Polyfilling <datalist> with autocomplete

index

About the book

You're only one tag away from richer user interfaces — ‹script src="jquery-ui.js"›. The jQuery UI library simplifies web UI development by providing robust widgets, interactions, and effects you can use immediately. It includes datepickers, autocompletes, tooltips, and a whole lot more. And, jQuery UI's powerful widget factory makes it a snap to customize existing components to meet your needs.

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

What's inside

  • 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

About the reader

Written for front-end developers and web designers with a basic understanding of jQuery.

About the author

A professional web developer, TJ VanToll is a member of the jQuery UI core team.


combo $44.99 pBook + eBook
eBook $35.99 pdf + ePub + kindle

FREE domestic shipping on three or more pBooks

A complete and detailed guide to writing web user interfaces.

Gregor Zurowski, Sotheby’s

Excellent, in-depth explanations of jQuery UI’s inner workings.

Linda Carver, Wicked Coursing LLC

Articulate, well-organized, easy to read, and thorough.

Philip Taffet, SOHOsoft LLC