Homepage:
http://foswiki.org/Extensions/JQueryPlugin
Author(s): Michael Daum
Version: 2.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"}]'
/>
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