JQueryStars

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

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	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.

JQueryStars

Usage

Formfield `rating`

Examples

default settings

read only

10 stars

10 stars, split 10

10 stars, split 100

named values

mapped values

JQueryStars

Usage

Formfield rating

Examples

default settings

read only

10 stars

10 stars, split 10

10 stars, split 100

named values

mapped values

Formfield `rating`