JQuery_ Novice to Ninja - Earle Castledine [103]
The hard part, of course, is replacing these radio buttons with our star control. You can try to grapple with styling the HTML controls with only CSS, but it will be much easier and more flexible if you split the control into two parts: the underlying model that stores the data, and the shiny view with stars. The model, in this case, is the original HTML radio button group. Our plan of attack is to hide the radio buttons, and display a list of links that we’ve added via jQuery, styled to look like stars. Interacting with the links will switch the selected radio button. Users without JavaScript will simply see the radio buttons themselves, which is fine by us.
For the stars themselves, we will again rely on CSS sprites. This way our control will only be reliant on a single image (shown in Figure 7.5), which saves on HTTP requests and makes it easier for our graphic designers to edit.
Figure 7.5. Star CSS sprite image
Our CSS will apply the CSS sprite image to the links we create that represent half-stars. To move between the different image states, we just need to update the background-position property:
chapter_07/11_star_ratings/stars.css (excerpt)
.stars div a {
background: transparent url(../../css/images/sprite_rate.png)
↵0 0 no-repeat;
display: inline-block;
height: 23px;
width: 12px;
text-indent: -999em;
overflow: hidden;
}
.stars a.rating-right {
background-position: 0 -23px;
padding-right: 6px;
}
.stars a.rating-over { background-position: 0 -46px; }
.stars a.rating-over.rating-right { background-position: 0 -69px; }
.stars a.rating { background-position: 0 -92px; }
.stars a.rating.rating-right { background-position: 0 -115px; }
We’ve decided to make the user select a rating out of four stars, rather than the usual five. Why? User psychology! Offer a person a middle road and they’ll take it; by having no middle we make the users think a bit more about their selection. We achieve better results, and we’ll be better able to present users with the best content (as chosen by them)!
But four is a limited scale—that’s why we want to allow for half-star ratings. This is implemented via an optical illusion—you probably noticed that our star images are chopped in half. Our HTML will contain eight radio buttons, and they’ll each be worth half a star. There’s two parts to the code for transforming our eight radio buttons into four stars. First, the createStars function will take a container with radio buttons and replace it with star links. Each star will then be supplemented with the proper event handlers (in the addHandlers method) to let the user interact with the control. Here’s the skeleton of our starRating object:
chapter_07/11_star_ratings/script.js (excerpt)
var starRating = {
create: function(selector) {
$(selector).each(function() {
// Hide radio buttons and add star links
});
},
addHandlers: function(item) {
$(item).click(function(e) {
// Handle star click
})
.hover(function() {
// Handle star hover over
},function() {
// Handle star hover out
});
}
}
The create method iterates through each container matching the selector we pass in, and creates a list of links that act as a proxy for the radio buttons. These links are what we’ll style to look like stars. It will also hide the original form elements, so the user only sees our lovely stars:
chapter_07/11_star_ratings/script.js (excerpt)
$(selector).each(function() {
var $list = $('
');// loop over every radio button in each container
$(this)
.find('input:radio')
.each(function(i) {
var rating = $(this).parent().text();
.attr('title', rating)
.addClass(i % 2 == 1 ? 'rating-right' : '')
.text(rating);
starRating.addHandlers($item);
$list.append($item);
if ($(this).is(':checked')) {
$item.prevAll().andSelf().addClass('rating');
}
});
We start by creating a container for the new links (a div element); we’ll be creating one new link for each of the radio buttons we’re replacing. After selecting all the radio buttons with the :radio selector