HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [310]
Improving Usability
While the UI widgets are good looking and fun, another important aspect is how they can improve usability. Web pages are often used to get information from users. Certain kinds of information can be very difficult for the user to enter correctly. The jQuery UI elements include a number of tools to help you with this specific problem. The UItools.html page, shown in Figure 5-5, illustrates some of these techniques.
Figure 5-5: The UItools page uses a tabbed interface to demonstrate many input tools.
A lot is going on in this page, but the tabbed interface really cleans it up and lets the user concentrate on one idea at a time. Using the tabbed interface can really simplify your user’s life.
This page is a bit long because it has a number of sections. I demonstrate the code in chunks to make it easier to manage. Be sure to look on the Web site for the complete code.
Here’s the main HTML code so that you can see the general structure of the page:
UI tools
You see a main div named tabs. This contains a list of links to the various divs that will contain the demonstrations. I describe each of these divs in the section that demonstrates it. The page also imports jQuery, jQuery UI, and the theme CSS. The init() method contains most of the jQuery code:
$(init);
function init(){
$(“h1”).addClass(“ui-widget-header”);
$(“#tabs”).tabs();
$(“#datePicker”).datepicker();
$(“#slider”).slider()
.bind(“slide”, reportSlider);
$(“#selectable”).selectable();
$(“#sortable”).sortable();
$(“#dialog”).dialog();
//initially close dialog
$(“#dialog”).dialog(“close”);
} // end init
The init section initializes the various components. The details of the init() function are described in each section as they are used.
Most of these special widgets require the standard jquery link, jqueryui, and one of the templates to be installed. Many of the widgets use features from the template library. Of course, you can start with a default template and tune it up later. You just have to have a template available to see all the effects.
Playing the dating game
Imagine that you’re writing a program that requires a birth date. Getting date information from the user can be an especially messy problem, because so many variations exist. Users might use numbers for the month, month names, or abbreviations. Some people use month/day/year, and others use day/month/year. They may enter the year as two or four characters. (That silly Y2K thing hasn’t really died yet. I still have the bunker in the backyard.) Worse, it’s really hard to pick a date without a calendar in front of you.
The datepicker dialog box is one of the coolest elements in the entire jQuery UI library. When you add datepicker() functionality to a textbox, that textbox becomes a datepicker. When the user selects the date box, a calendar automatically pops up, as shown in Figure 5-6.
Figure 5-6: The datePicker element turns any text field into a calendar!
The user can select a date on the calendar, and it will be placed in the textbox in a standard format. You have no better way to get date input from the user. Building a datepicker can’t be much easier:
1. Begin with a jQuery UI page.
You need jQuery, jQuery UI, and a theme to use the datepicker.
2. Build a form with a text field.
Any standard text input element will do. Be sure to give the element an ID so that you can refer to it in JavaScript:
date picker
id = “datePicker” />
3. Isolate the text input element with jQuery.
Build a standard