• Choose a category
• All
• Classic-Fiction

// Set the ratings

$allLinks.children().removeClass('rating');

$star.prevAll().andSelf().addClass('rating');

// prevent default link click

e.preventDefault();

The important part of handling the click event is to update the underlying radio button model. We do this by selecting the correct radio button with the :radio filter and an attribute selector, which searches for the radio button whose value matches the current link’s text.

With the model updated, we can return to messing around with the CSS sprites. First, we clear the rating class from any links that currently have it, then add it to all of the links on and before the one the user selected. The last touch is to cancel the link’s default action, so clicking the star doesn’t cause it to fire a location change.

Controls

That takes care of our client’s primary concern: form usability. Now we can start doing some of the really fun stuff. jQuery and jQuery UI are the perfect tools for moving beyond the primitive HTML form controls we all know and accept. Once we leave the stuffy confines of the Web’s ancient history behind, we find that the ability to create amazing new controls is limited only by our imagination. After all, there should be more ways to interact with a web site than entering some text in a box!

Date Picker

Our client wants to add a “CelebSpotter” section to the site, where his users will be able to report celebrity spottings. Of course, they’ll need to report the date and time of the spotting. Early tests of this functionality showed that users were often confused by the date format they were required to enter. This problem was partially offset by adding sample data and format hinting, but the client wants to take it further and add a fancy date picker to the form.

If you’ve ever sat down and created a reasonably functional date picker in JavaScript, you’d be inclined to avoid ever doing it again. It’s a lot of hard work for a control that’s, in the end, just a date picker. Mind you, date pickers are crucially important controls that can be insanely frustrating when done wrong. The problem is that because they’re so involved, there are a lot of places for them to go wrong. Fortunately for our sanity, jQuery UI contains a highly customizable and fully-featured date picker control that lets us avoid many of the potential pitfalls of building one ourselves. An example of this control is shown in Figure 7.6.

Figure 7.6. jQuery UI date picker control

We’ll start with the input field currently being used for the date:

chapter_07/12_date_picker/index.html (excerpt)

If you’re just looking for the basic date picker, the jQuery code can be no more complicated than a single line:

$("#date").datepicker();

The date picker is triggered when the input box receives focus, and slides into view with the current month and day selected. When the text box loses focus, or when a date is selected, it disappears. Sure, it looks very nice, and works with the jQuery smoothness we expect—but what does it offer us over and beyond competing date pickers? (Remember, just because you’re using jQuery, it doesn’t mean you should ignore other suitable JavaScript components.)

The date picker component in jQuery UI is feature-packed. Packed! It is fully localizable, can handle any date formats, lets you display multiple months at once, has a nifty date range mechanism, allows configurable buttons, is keyboard navigable (you can move around with ctrl + arrow keys), and more.

All told, there are over 50 options and events available to you to tweak—almost every tiny aspect of the date picker! To make the calendar you see in Figure 7.6, we’ve used just a few of them:

chapter_07/12_date_picker/script.js (excerpt)

$('#date').datepicker({

showOn: 'button',

buttonText: 'Choose a date',

buttonImage: 'calendar.png',

buttonImageOnly: true,

numberOfMonths: 2,

maxDate: '0d',

minDate: '-1m -1w',

showButtonPanel: true

});

The showOn lets us choose when the calendar will pop up. The available options are 'focus' (when the