<input>
element into a star rating widget.
The design is heavily influenced by JQueryRating by Fyneworks.com bit requries considerably less HTML markup
which is of advantage with high precision ratings.
Features:
rating
)
or writing HTML yourself.
%JQREQUIRE{"stars"}% <input class='jqStars' value='...' name='...' data-num-stars='...' data-split='...' data-values='...' disabled />
input
element with a CSS class jqStars
will be initialized automatically
value
defines the initial value of the star rating
disabled
property flags the input
element as read-only
data-num-stars
parameter specifies the maximum number of stars
data-split
parameter specifies the precision of a sub-star rating by numbers of parts each star is split up
data-values
parameter may optionally provide a json object of values to be selected
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"}]' />
rating
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 |
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.