HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [298]
It’s a theme park
One of the coolest tools in jQuery UI is a concept called a theme, which is simply a visual rule-set. The theme is essentially a complex CSS document designed to be used with the UI library.
Using the themeRoller to get an overview of jQuery
The jQuery Web site also features a marvelous tool called the themeRoller. The themeRoller allows you to select and modify themes, so it’s a great place to preview how themes work, as well as see the key features of the UI extension. Figure 4-1 shows this Web page, which demonstrates many of the great features of jQuery UI.
Before you use themeRoller to change themes, use it to get acquainted with the UI elements. Several useful tools are visible in Figure 4-1:
♦ Accordion: The upper-middle segment of the page has three segments (section 1, section 2, and section 3). By clicking a section heading, the user can expand that section and collapse the others.
♦ Slider: Sliders (or scroll bars) are an essential user interface element. They allow the user to choose a numeric value with an easy visual tool. jQuery sliders can be adjusted in many ways to allow easy and error-free input.
Figure 4-1: The themeRoller lets you review many jQuery UI elements and modify their look.
♦ Datepicker: It’s very difficult to ensure that users enter dates properly. The datepicker control automatically pops up a calendar into the page and lets the user manipulate the calendar to pick a date. It’s a phenomenally useful tool.
♦ Tabs: It’s common to have a mechanism for hiding and showing parts of your page. The accordion technique is one way to do so, but tabs are another very popular technique. This mechanism allows you to build a very powerful multitab document without much work.
Scrolling down the page, you see even more interesting tools. Figure 4-2 shows some of these widgets in action.
These widgets demonstrate even more of the power of the jQuery UI library:
♦ Progress bar: It’s always best to design your code so that little delay exists, but if part of your program is taking some time, a progress bar is a great reminder that something is happening.
♦ Dialog: The open dialog button pops up what appears to be a dialog box. It acts much like the JavaScript alert, but it’s much nicer looking, and it has features that make it much more advanced. In Figure 4-2, the dialog has a clever title: Dialog Title.
♦ Formatting tools: The jQuery UI includes special tools for setting apart certain parts of your page as warnings, as highlighted text, or with added shadows and transparency. If you look carefully at Figure 4-2, you’ll see several examples of special formatting, including the red alert box, drop shadows, and the UI-highlight style.
♦ Icons: jQuery UI ships with a large collection of icons that you can use on your page. Hover over each of the icons on the themeRoller to see a description of the icon. These can be easily used to allow various user interactions.
This is just a quick preview of the visual elements. Read more about how to implement the various elements in Chapter 5 of this minibook after you understand the basics of how to install and work with jQuery UI in this chapter.
Look at the left column on the themeRoller page. If you click the gallery tab (yep, it’s using a jQuery UI tab interface), you can see a list of prebuilt themes. Figure 4-3 shows the themeRoller page with an entirely different theme in place.
Figure 4-2: Even more exciting widgets.
Figure 4-3: Now themeRoller is using the Le Frog theme.
The built-in themes are pretty impressive, but of course, you can make your own. While you’re always free to edit the CSS manually, the whole point of the themeRoller application is to make this process easier.
If you go back to the Roll Your Own tab, you can see an accordion selection that you can use to pick various theme