• Choose a category
• All
• Classic-Fiction

4. Add the datepicker() functionality.

Use the datePicker() method to convert the text node into a datepicker. This is usually done in some type of init() function. The rest is automatic!

$(“#datePicker”).datepicker();

5. Retrieve data from the form element in the normal way.

When the user has selected the date, it is placed in the text field automatically. As far as your program is concerned, the text field is still an ordinary text field. Retrieve the data in the ordinary way.

The datepicker is a powerful tool with a large number of additional options. Look at the jQuery UI documentation to see how to use it to select date ranges, produce specific date formats, and much more.

Picking numbers with the slider

Numeric input is another significant usability problem. When you want users to enter numeric information, it can be quite difficult to ensure that the data really is a number and that it’s in the range you want. Traditional programmers often use sliders (sometimes called scroll bars) to simplify accepting numeric input. Figure 5-7 shows a slider.

Figure 5-7: The user can choose a number with the mouse using a slider.

The slider is (like many jQuery UI objects) very easy to set up. Here’s the relevant chunk of HTML code:

The Slider tab is a basic div. It contains two other divs:

♦ The slider div is actually empty. It will be replaced by the slider element when the jQuery is activated.

♦ The other div (slideOutput) in this section will be used to output the current value of the slider.

Create the slider element in the init() function with some predictable jQuery code:

$(“#slider”).slider();

The slider() method turns any jQuery element into a slider, replacing the contents with a visual slider.

Note that you can add a JSON object as a parameter to set up the slider with various options. See rgbSlider.html on this book’s Web site (www.aharrisbooks.net/xfd_2ed/ or www.dummies.com/go/htmlxhtmlandcssaiofd) for an example of sliders with customization.

You can set up a callback method to be called whenever the slider is moved. In my example, I chained this to the code that created the slider in the first place:

$(“#slider”).slider()

.bind(”slide”, reportSlider);

Use the bind method to bind the reportSlider function (described next) to the slide event.

The reportSlider() function reads the slider’s value and reports it in an output div:

function reportSlider(){

var sliderVal = $(“#slider”).slider(“value”);

$(”#slideOutput”).html(sliderVal);

} // end reportSlider

To read the value of a slider, identify the jQuery node and invoke its slider() method again. This time, pass the single word value, and you get the value of the slider. You can pass the resulting value to a variable as I did and then do anything you want with that variable.

Selectable elements

You may have a situation where you want the user to choose from a list of elements. The selectable widget is a great way to create this functionality from an ordinary list. The user can drag or Ctrl+click items to select them. Special CSS classes are automatically applied to indicate that the item is being considered for selecting or selected. Figure 5-8 illustrates the selection in process.

Figure 5-8: Selectable items are easily chosen with the mouse.

Follow these steps to make a selectable element:

1. Begin with an unordered list.

Build a standard unordered list in your HTML. Give the ul an ID so that it can be identified as a jQuery node:

2. Add CSS classes for selecting and selected states.

If you want the selectable items to change appearance when the items are being selected or have been selected, add CSS classes as shown. Some special classes (ui-selecting