A fantastic resource.
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 takes you straight to the bookdetailed table of contents
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.3. Button: enhancing native buttons, inputs, and links
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
