JQueryStars

Homepage: http://foswiki.org/Extensions/JQueryPlugin
Author(s): Michael Daum
Version: 1.00

Flexible and non-obstructive star rating. This plugin turns an HTML <input> element into a star rating widget. The design is heavily influenced by System.JQueryRating by Fyneworks.com bit requries considerably less HTML markup which is of advantage with high precision ratings.

Features:

• arbitrary number of stars
• arbitrary precision of star rating by splitting each star
• mouse wheel support
• non-obstructive integration using CSS and HTML5

Usage

There are two ways to make use of this plugin, either as part of a DataForm definition (see Formfield rating) or writing HTML yourself.

%JQREQUIRE{"stars"}%

<input class='jqStars' 
       value='...'
       name='...'
       data-num-stars='...'
       data-split='...'
       data-values='...'
       disabled />

• any input element with a CSS class jqStars will be initialized automatically
• value defines the initial value of the star rating
• the disabled property flags the input element as read-only
• the data-num-stars parameter specifies the maximum number of stars
• the data-split parameter specifies the precision of a sub-star rating by numbers of parts each star is split up
• the data-values parameter may optionally provide a json object of values to be selected

The json object in data-values can either be a plain array of values such as in

<input class="jqStars" 
       value="I like it" 
       data-values='["very low", "low", "substandard", "standard", "superior", "I like it", "quite good", "good", "very good", "excellent"]' 
/>

... or an array of objects of the form {"label": "value"}:

<input class="jqStars" 
       value="e" 
       data-values='[{"very low":"a"}, {"low":"b"}, {"substandard":"c"}, {"standard":"d"}, {"superior":"e"}, {"I like it":"f"}, {"quite good":"g"}, {"good":"i"}, {"very good":"j"}, {"excellent":"k"}]' 
/>

Formfield rating

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

Name	Type	Size	Values	Description	Attributes
Rating1	rating	5
Rating2	rating	1	very low, low, substandard, standard, superior, I like it, quite good, good, very good, excellent
Rating3	rating	10			split:2
Rating4	rating+values	1	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

• Rating1 defines a simple numeric 5 star rating
• Rating2 defines a simple scheme using named categories.
• Rating3 defines a 10 star rating by increments of 0.5 steps
• Rating4 defines a numeric rating where each value is mapped to a named category

The Size column specifies the number of stars. If Values are defined as well, their number will overwrite the Size value. Note, that the Attributes column will be used to parametrize the jquery.stars plugin.

Examples

default settings

read only

10 stars

10 stars, split 10

10 stars, split 100

named values

mapped values