JQueryRating

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.

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.

Usage

Create a set of radio buttons and surround them with a div of class jqRating. When you hover over the stars, a tooltip at the right side will display the value of the radio box, or the title if present.

Formfield rating

The jquery rating plugin is used to implement a rating formfield. Here are some examples:

Name	Type	Size	Values	Tooltip message	Attributes
Rating1	rating	5
Rating2	rating	10	very low, low, substandard, standard, superior, I like it, quite good, good, very good, excellent
Rating4	rating+values	10	very low=1, low=2, substandard=3, standard=4, superior=5, I like it=6, quite good=7, good=8, very good=9, excellent=10
Rating3	rating	20	0.5, 1.0, 1.5, 2.0, 2.5, 3.0, 3.5, 4.0, 4.5, 5.0, 5.5, 6.0, 6.5, 7.0, 7.5, 8.0, 8.5, 9.0, 9.5, 10		split:2

• Rating1 defines a simple numeric rating
• Rating2 defines a simple scheme using named categories.
• Rating3 defines a selection between 0-10 using 0.5 steps
• Rating4 defines a numeric rating where each value is mapped to a named category

Note, that the Attributes column of a rating field will be used to parametrize the jquery rating plugin.

Examples

%STARTSECTION{"markup"}%
<div class="jqRating">
<input type="radio" name="test" value="1" class="rating" title="very low"/>
<input type="radio" name="test" value="2" class="rating" title="low" />
<input type="radio" name="test" value="3" class="rating" title="substandard" />
<input type="radio" name="test" value="4" class="rating" title="standard" />
<input type="radio" name="test" value="5" class="rating" title="superior" checked="checked" />
<input type="radio" name="test" value="6" class="rating" title="I like it" />
<input type="radio" name="test" value="7" class="rating" title="quite good" />
<input type="radio" name="test" value="8" class="rating" title="good" />
<input type="radio" name="test" value="9" class="rating" title="very good" />
<input type="radio" name="test" value="10" class="rating" title="excelent" />
</div>
%ENDSECTION{"markup"}%