jQuery UI widgets used in your website or application must match an established design.
Use ThemeRoller, a simple web application for editing the jQuery UI CSS Framework classes to customize the look and feel of the jQuery UI widgets.
This recipe makes the following assumptions:
You have a basic knowledge of how CSS works and, specifically, how styles cascade, take precedence, and can be scoped using selector classes, ids, or elements. (For our recommended resources, please refer to the Appendix at the end of this chapter.)
You’re already familiar with jQuery UI CSS classes. (If not, just review Understanding the Components of jQuery UI CSS.)
Let’s walk through an example.
We’re working on a new website for booking travel reservations, and specifically, we’re building out the part of the interface for booking a flight. The design consists of a set of tabs for selecting the type of reservation (flight, car rental, or package deal), and the Book a Flight tab includes a form for entering the number of passengers, selects for the departure and arrival cities, calendars to set departure and return travel dates, and a submit button (see Figure 15-1).
Figure 15-1. Final target design for travel application
For this recipe, we’ll use the jQuery UI widgets for the tabs and datepickers, and style them with a custom theme created in ...