Radio buttons are introduced in html to get predefined answers from users. It is perfect for feedback forms, product ratings and surveys etc. Star ratings are more convenient and attractive way of grabbing users inputs. Most of the eCommerce sites uses the star rating technique which is more comfortable than conventional radio buttons.
Use JQuery 1.7.2 or higher version for this procedure.
Use JQuery 1.7.2 or higher version for this procedure.
<html> <head>Html Explorer: Star Rating Demo </head> <body> The overall rating : 3.8 </body> </html>
Following CSS will be used for this procedure.
span.star-prototype, span.star-prototype > * {
height: 16px;
background: url(http://i.imgur.com/YsyS5y8.png) 0 -16px repeat-x;
width: 80px;
display: inline-block;
}
span.star-prototype > * {
background-position: 0 0;
max-width:80px;
}
According to the user input, it is required to change the position of the sprite image to display golden and grey colored stars. Following JQuery will do the trick:
$.fn.generateStars = function() {
return this.each(function(i,e){$(e).html($('<span/>').width($(e).text()*16));});
};
// Function call to convert the rating number to stars.
$('.star-prototype').generateStars();
0 comments:
Post a Comment