Download
User Rating: 2.2/5 ( 7 votes)
What is this?
The Star Rating Plugin is a plugin for the jQuery Javascript library that creates a non-obstrusive star rating control based on a set of radio input boxes.
What does it do?
-
It turns a collection of radio boxes into a neat star-rating control.
-
It creates the interface based on standard form elements, which means the basic functionality will still be available even if Javascript is disabled.
How do I use it?
Just add the star class to your radio boxes
<input name="star1" type="radio" class="star"/>
<input name="star1" type="radio" class="star"/>
<input name="star1" type="radio" class="star"/>
<input name="star1" type="radio" class="star"/>
<input name="star1" type="radio" class="star"/>
Use the checked property to specify the initial/default value of the control
<input name="star2" type="radio" class="star"/>
<input name="star2" type="radio" class="star"/>
<input name="star2" type="radio" class="star" checked="checked"/>
<input name="star2" type="radio" class="star"/>
<input name="star2" type="radio" class="star"/>
Use the disabled property to use a control for display purposes only
<input name="star3" type="radio" class="star" disabled="disabled"/>
<input name="star3" type="radio" class="star" disabled="disabled"/>
<input name="star3" type="radio" class="star" disabled="disabled" checked="checked"/>
<input name="star3" type="radio" class="star" disabled="disabled"/>
<input name="star3" type="radio" class="star" disabled="disabled"/>
What about split stars and 'half ratings'???
Use metadata plugin to pass advanced settings to the plugin via the class property.
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}" checked="checked"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>
<input name="adv1" type="radio" class="star {split:4}"/>
Use custom selector
$(function(){ // wait for document to load
$('input.wow').rating();
});
<input name="adv2" type="radio" class="wow {split:4}"/>
<input name="adv2" type="radio" class="wow {split:4}"/>
<input name="adv2" type="radio" class="wow {split:4}"/>
<input name="adv2" type="radio" class="wow {split:4}"/>
<input name="adv2" type="radio" class="wow {split:4}" checked="checked"/>
<input name="adv2" type="radio" class="wow {split:4}"/>
<input name="adv2" type="radio" class="wow {split:4}"/>
<input name="adv2" type="radio" class="wow {split:4}"/>
Make sure to upload these changes on to your server, this would be a great plugin for your blogs and review sites
API
API methods can be invoked this this:
$(selector).rating(
'method', // method name
[] // method arguments (not required)
);
$().rating('select', index / value)
Use this method to set the value (and display) of the star rating control via javascript. It accepts the index of the star you want to select (0 based) or its value (which must be passed as a string.