List of Figures

Chapter 1. Introducing jQuery UI

Figure 1.1. The pieces of the jQuery UI library, categorized into widgets, interactions, utilities, and effects

Figure 1.2. An example of all 12 jQuery UI widgets. Because of the jQuery UI CSS framework, each widget has a consistent look.

Figure 1.3. Using jQuery UI ThemeRoller, you can configure a custom theme by playing with CSS properties and seeing their effect on the jQuery UI widgets live.

Figure 1.4. The download prompt on http://jqueryui.com. You can download the latest stable or legacy releases of jQuery UI, or visit Download Builder to create a custom build.

Figure 1.5. The first example. A jQuery UI datepicker opens when the <input> receives focus.

Figure 1.6. jsFiddle is an online testing tool that you can use to run jQuery UI code. You place HTML, CSS, and JavaScript in their appropriate panes, and click the Run button to see the results.

Figure 1.7. The datepicker example running in jsFiddle. The jsFiddle interface takes the HTML in the HTML pane and the JavaScript in the JavaScript pane, runs them, and displays the results in the Result pane.

Chapter 2. Enhancing UIs with widgets

Figure 2.1. A jQuery UI dialog widget created using the dialog() plugin.

Figure 2.2. A jQuery UI dialog used to display a success message. The title option determines the text in the title bar, and the buttons option creates an OK button.

Figure 2.3. The dialog widget’s documentation at http://api.jqueryui.com/dialog/. The oval highlights the dialog’s 19 configurable options. Each option is a link that takes you to more detailed information.

Figure 2.4. Documentation on the dialog widget’s width option from http://api.jqueryui.com/dialog/#option-width. The documentation gives a description of the option, lists its JavaScript type, its default value, and gives some examples of how to use it.

Figure 2.5. The dialog widget’s API documentation with an oval highlighting the widget’s seven methods. Each method name is a link to a section with more thorough documentation.

Figure 2.6. Comparison of the open() and isOpen() dialog methods. The open() method is chainable because it returns a jQuery object; the isOpen() isn’t because it returns a Boolean.

Figure 2.7. An editable list of users. Administrators such as Chuck Norris can’t be edited, but regular users such as Santa Claus can be.

Figure 2.8. The dialog widget’s API documentation with an oval highlighting the widget’s eleven events. Each event name is a link to a section with additional documentation.

Figure 2.9. A terms-of-use dialog. The user must accept the terms before being allowed to close the dialog.

Figure 2.10. API documentation for the dialog widget’s drag event. The oval highlights the properties provided in the ui argument.

Chapter 3. Building complex web forms with jQuery UI

Figure 3.1. Converting form controls into a jQuery UI widget gives them a consistent look. It also makes the controls more usable. When users give focus to the Date input, they see a datepicker. When users enter text into the Insurance input, they see potential options in a menu.

Figure 3.2. How the autocomplete widget displays suggestions to the user. Here the user selects “Alligator” with the mouse, and the input is filled with the user’s selection.

Figure 3.3. When using a remote source, the autocomplete widget sends the typed value as a term request parameter, and the server returns the filtered options. On the left, the user types "j", the widget sends a request to the server with a query string of "term=j", the server responds with an array containing three matches, and the widget displays them in a menu. On the right, the user has continued to type, and the new term ("jQuery U") is sent to the server. The server responds with a single match, which the widget displays.

Figure 3.4. The button widget creates a consistent and themeable control from buttons, checkboxes, radio buttons, and links. Here, each of these controls is converted in a single call.

Figure 3.5. The importance of associating <label> elements with <input> elements: clicking the labels toggles check boxes and selects radios. This increases the clickable area of these small controls, which is especially important on mobile devices, where fingers can easily miss small targets.

Figure 3.6. Two radio buttons that have become jQuery UI button widgets. The English <input> has a checked attribute, and therefore appears as the selected button.

Figure 3.7. When the parent element of button controls—in this case two radio buttons—is converted into a buttonset, the widget automatically applies the CSS necessary to group the buttons together.

Figure 3.8. The effect of transforming a <select> with <optgroup> elements into a selectmenu widget in Google Chrome on OS X

Figure 3.9. The jQuery UI datepicker widget supports over 70 different locales. This figure shows three: French, Hebrew, and Japanese (left to right).

Figure 3.10. The spinner widget adds two buttons that allow the user to increment and decrement the value of an <input>.

Figure 3.11. The display of HTML5 date and number inputs on iOS Safari, Chrome, and Chrome for Android. Notice how the two mobile browsers—iOS Safari and Chrome for Android—optimize the UI to make it easy to input values.

Chapter 4. Enhancing interfaces with layout and utility widgets

Figure 4.1. jQuery UI accordion widget used to display movie information. The accordion widget automatically activates the first panel.

Figure 4.2. A jQuery UI tabs widget with two panels. The widget opens the first panel by default.

Figure 4.3. A tabs widget used to display information on movies. When the user clicks a movie in the list, its information is retrieved from the server and displayed in a new tab.

Figure 4.4. A menu showcasing three features of the menu widget: the ability to turn nested lists into nested menus, the ability to create dividers from empty <li> elements, and the ability to add jQuery UI icons to individual menu items.

Figure 4.5. The message composer you’ll build with the jQuery UI utility widgets. The user can compose a message, save it, load a previously saved message, and delete the message.

Figure 4.6. Prior to deleting the user’s saved message, you’ll present this confirmation dialog. This dialog allows the user to abort the action with the Cancel button, or proceed with the Yeah, Let’s Do It button. This dialog is modal, which prevents the user from interacting with the rest of the screen until the user interacts with the dialog.

Figure 4.7. A determine progressbar that advances 10% every time you click the Make Progress button.

Figure 4.8. An indeterminate progressbar displayed in a modal dialog to indicate that processing is occurring—in this case you’re loading a message.

Figure 4.9. A comparison of the spinner (top) and slider (bottom) widgets. Although both widgets accept min, max, and step options, the spinner enforces them within a textbox, and the slider enforces them using a visual range.

Figure 4.10. The three different types of range options provided by the jQuery UI slider widget. When the range option is true (top), the widget creates two handles and highlights the area between the two; when the range is "min" (middle), the widget highlights the area between the value and the min; when the range is "max" (bottom), the widget highlights the area between the value and the max.

Figure 4.11. A slider to let the user change the message’s font size

Figure 4.12. Comparison of a native tooltip (top) and the jQuery UI tooltip (bottom). The display of the native tooltip is controlled by the browser itself (this screenshot was taken in Chrome on OS X). The display of the jQuery UI tooltip is consistent across all browsers, and is highly configurable.

Figure 4.13. To give users a way to preview their stored message, you show a tooltip when they hover over the Load menu option.

Chapter 5. Adding interaction to your interfaces

Figure 5.1. The draggable widget enforces the containment of the draggable box within its parent.

Figure 5.2. A game where children must match the colored boxes on the left to the word boxes on the right. To implement this, you convert the colored boxes to draggable widgets and the word boxes to droppable widgets.

Figure 5.3. A shopping cart implemented with the jQuery UI draggable and droppable widgets

Figure 5.4. The default, active, and hover states of a droppable as applied to the shopping cart

Figure 5.5. A poll that asks users to rank five movies from best to worst. The poll is implemented with the sortable widget; meaning, the user can rearrange movies with the mouse.

Figure 5.6. The dotted, bordered box is the placeholder element that the sortable widget creates.

Figure 5.7. A fruit and vegetable sorting game implemented with the sortable widget. The user must move all fruits into the fruits list and all vegetables into the vegetables list to win.

Figure 5.8. A 100 × 100 <div> element converted to a resizable widget. By default the element can be resized to the south, east, and southeast.

Figure 5.9. The resizable widget lets you configure the directions the element can be resized with the handles option. The eight potential handles are shown on an element. The handles option also accepts "all", which uses all eight handles.

Figure 5.10. A resizable element with a custom resizing handle on its east side. You build this by explicitly providing markup for the east handle, as shown in listing 5.5.

Figure 5.11. A scheduler for creating appointments. The black box represents an appointment, and the vertical lines represent half-hour time slots. The user can drag the appointment to different days and times—and resize the appointment to change its length.

Figure 5.12. A browser representation of an OS’s file GUI implemented with the selectable widget. The user can add new files and remove any selected files. The selectable widget’s helper is styled with a dotted line, and files selected with the lasso are styled with a background in color.

Chapter 6. Creating rich animations with effects

Figure 6.1. The API documentation for each jQuery UI effect lists the options that can be used to configure the animation. For the shake effect (shown here), you can configure the direction of the shake, the distance to shake, and the number of times to shake.

Figure 6.2. A list of the easings provided by jQuery UI from http://api.jqueryui.com/easings/. Each graph plots the progress of the animation (the y-axis) against time (the x-axis). Clicking on each graph runs an animation with the corresponding easing. If you’re having trouble understanding easings, it’s worth taking a minute to run these; easings are far easier to understand visually.

Figure 6.3. A small application that builds grocery lists. You will use the transfer effect to help the user associate the Add Groceries form with the Grocery List.

Figure 6.4. Progression of the transfer effect to associate the form with the grocery list

Figure 6.5. The contact form you built in chapter 3 with a formatted list of error messages. You’ll use the jQuery UI shake effect to draw the user’s eyes to these messages.

Figure 6.6. Three portlets, or web UI elements made to look like desktop windows, built using jQuery UI. The user can expand or collapse the content of each portlet using the icon in the top-right corner.

Figure 6.7. The fruit and vegetable game you built in chapter 5. Notice that the instructions are not especially noticeable—a user can easily miss them.

Figure 6.8. Showing the instructions for the game pulls them out of the main content and makes them stand out to the user.

Figure 6.9. The updated version of the instructions dialog does two things to draw the user’s attention: it uses an effect to jump off the page, and it uses a modal dialog to gray out the rest of the content. This dialog includes an OK button, which makes it easy for the user to close the dialog to get to the game.

Figure 6.10. An off-canvas navigation menu for settings shown on a mobile device. Clicking the Settings button displays the menu. Clicking the Close button hides it.

Chapter 7. Theming and styling applications with jQuery UI

Figure 7.1. The steps needed to build a jQuery UI theme with ThemeRoller. First, select a starting theme on the Gallery tab, then customize it by playing with CSS properties in the sidebar. As a final step, download the theme with the Download theme button.

Figure 7.2. As you change CSS properties in ThemeRoller, all widgets are automatically updated to display the change. Here, the font family is changed to cursive, and all widget text changes to cursive instantly.

Figure 7.3. The theme selector on the jQuery UI Download Builder with a custom theme from ThemeRoller selected. You can use a CSS Scope to scope the theme to a specific part of a page.

Figure 7.4. The contents of a jQuery UI download with a custom theme. The jquery-ui.css and jqueryui.min.css files contain the CSS for the theme (jquery-ui.min.css is minified and jquery-ui.css is not), the images directory contains images that the theme depends on, and index.html is a demo page where you can see how all of the jQuery UI widgets look with your theme.

Figure 7.5. Locations of widget container class names ui-widget-header (solid border) and uiwidget-content (dotted border) on the tabs, dialog, accordion, and datepicker widgets. The accordion header uses neither because it is clickable; it uses the interaction states we’ll cover in the next section.

Figure 7.6. An accordion control with an erred header and a disabled header

Figure 7.7. A confirmation dialog to show before a money transfer

Figure 7.8. On the left is a simplified version of the markup the dialog widget uses. On the right is the dialog widget’s class name documentation. Notice that the nesting in the documentation matches the nesting used in the rendered HTML markup.

Figure 7.9. A sampling of the dialog-specific CSS class names available. The ui-dialog class name applies a solid border to the whole dialog; ui-dialog-title applies a larger font size to the title bar; ui-dialog-content uppercases the content’s text; and ui-dialog-titlebar applies a dotted border to the title bar.

Figure 7.10. A jQuery UI tabs widget with CSS rules applied to the tabs-specific class names to stack the tabs vertically.

Figure 7.11. An inline datepicker displayed on an iPhone

Figure 7.12. A jQuery UI tooltip with a CSS-drawn arrow

Chapter 8. Using the widget factory to build stateful plugins

Figure 8.1. The to-do list you’ll build in this chapter

Figure 8.2. An overview of what happens when creating a widget

Figure 8.3. An external form that adds items to the to-do list

Figure 8.4. Workflow of the destroy() example. The user can check off items to remove them from the list.

Chapter 9. Extending widgets with the widget factory

Figure 9.1. A confirmation dialog built with the confirmationDialog widget

Figure 9.2. Display of a tabs extension that adds an orientation option

Figure 9.3. A todo widget extension that adds remove icons

Figure 9.4. An extension of your to-do list widget that lets users reorder items in the list

Figure 9.5. The dialog widget’s extension points list on http://api.jqueryui.com/dialog/. Not all widgets have extension points, but the ones that do will always show up in this location on the API docs.

Figure 9.6. Display of the Select2 plugin with a modal dialog

Figure 9.7. Display of a dialog widget with focus placed on a link in the content

Figure 9.8. A datepicker with a button pane. The button pane contains two buttons: Today and Done.

Figure 9.9. Display of a vanilla datepicker widget when its <input> receives focus on iOS

Figure 9.10. The improved datepicker widget display on iOS—with a new placeholder, a button widget, and CSS to make the datepicker more mobile friendly

Chapter 10. Preparing your application for production

Figure 10.1. Round trips the browser must take when it parses a <script> tag from an external domain

Figure 10.2. When Accordion is checked, its dependencies are as well.

Figure 10.3. The Network tab of the Chrome developer tool showing the JavaScript files loaded by your AMD example

Chapter 11. Building a flight-search application

Figure 11.1. A flight-tracking application built using tools you’ve learned about throughout this book

Figure 11.2. Users can type either the city name or the airport IATA code to match autocomplete options.

Figure 11.3. Safari doesn’t have a native datepicker, so it uses the jQuery UI datepicker. iOS and Chrome have a native datepicker, so they use the native implementation.

Figure 11.4. From left to right: required field validation in Firefox, date validation in Chrome, and number validation in Internet Explorer

Figure 11.5. The UI shown after the user attempts to submit the form without providing a required field in Safari on OS X

Figure 11.6. A processing indicator to show while you look up and process flight results

Figure 11.7. Your data goes off the screen of an iPhone.

Figure 11.8. The display of your responsive design on three screen sizes: an iPhone 5 running iOS 7 (top left), a Nexus 7 tablet (top right), and a MacBook Pro (bottom)

Chapter 12. Under the hood of jQuery UI

Figure 12.1. Options for positioning elements with the position-utility

Figure 12.2. A UI walkthrough that Gmail gives new users

Figure 12.3. A UI walkthrough as a series of dialogs that explains parts of the interface to the user

Figure 12.4. Values for the position utility’s collision option and their effects

Figure 12.5. The tooltip displays above the <input> by default (left picture), but if you scroll to move the <input> to the top of the window, the tooltip no longer fits within the viewport, so the tooltip flips to the bottom (right picture).

Figure 12.6. Visualization of the JavaScript interpreter accessing a property or method on an instance. The first example looks for an element property and immediately finds it on the instance object. The second example looks for a destroy() method and has to go through the instance object, the custom widget’s prototype, and the dialog widget’s prototype, before finding the method on the base widget’s prototype.

Figure 12.7. View of the notification widget you’ll build

Figure 12.8. Display of a jQuery Mobile app with one button

Appendix A. Learning jQuery

Figure A.1. An example exercise from Try jQuery about selecting elements

Figure A.2. Live coding in JS Bin

Figure A.3. Live coding in jsFiddle

Figure A.4. Live coding in CodePen

Figure A.5. Adding an <h2> with Chrome’s developer tools

Figure A.6. Adding an <h2> with Internet Explorer’s developer tools

Figure A.7. Sampling of topics on the jQuery Learning Center. The screenshot is from http://learn.jquery.com/using-jquery-core/.

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

Figure D.1. Display of a decimal picker in the English and German cultures

Figure D.2. Display of currency spinners in German, English (U.S.), Japanese, and English (Great Britain)

Figure D.3. Display of four timespinner widgets. The top two use the U.S. English culture (which uses a 12-hour clock), and the bottom two use the German culture (which uses a 24-hour clock). The spinners can be initialized with a formatted string—7:00 PM or 19:00—or with a timestamp. In this example, the 1388566800000 timestamp represents a date with its hour set to 4 and its minutes set to 0.

Appendix F. Polyfilling HTML5 with jQuery UI

Figure F.1. Modernizr’s production build tool at http://modernizr.com/download/. The two checks we need for polyfilling HTML5 elements are Input Attributes and Input Types.

Figure F.2. Display of a <datalist> element in Chrome on OS X