jQuery Raty - A Star Rating Plugin (current version: 0.5) | TricksWay Contributed
jQuery Raty is a plugin that generates a customizable star rating automatically.
With default options:
$('#star').raty();
<div id="star"></div>
Started with a score and read only value:
$('#fixed').raty({
readOnly: true,
start: 2
});
<div id="fixed"></div>
With a custom score name and a number of stars:
$('#custom').raty({
scoreName: 'entity.score',
number: 10
});
<div id="custom"></div>
With a custom hint and icons:
$('#target').raty({
hintList: ['a', '', null, 'd', '5'],
starOn: 'medal-on.png',
starOff: 'medal-off.png'
});
<div id="target"></div>
Using onClick function:
$('#click').raty({
onClick: function(score) {
alert('score: ' + score);
}
});
<div id="click"></div>
Displaying half star:
$('#half').raty({
start: 3.3,
showHalf: true
});
<div id="half"></div>
With a default cancel button:
$('#cancel').raty({
showCancel: true
});
<div id="cancel"></div>
With a custom cancel button:
$('#cancel-custom').raty({
cancelHint: 'remove my rating!',
cancelPlace: 'right',
showCancel: true
onClick: function(score) {
alert('score: ' + score);
}
});
<div id="cancel-custom"></div>
Default options:
cancelHint: 'cancel this rating!'
The hint information.
cancelOff: 'cancel-off.png'
Name of the cancel image off.
cancelOn: 'cancel-on.png'
Name of the cancel image on.
cancelPlace: 'left'
Position of the cancel button.
hintList: ['bad', 'poor', 'regular', 'good', 'gorgeous']
List of names that will be used as a hint on each star.
number: 5
Number of stars that will be presented.
path: 'img/'
Path where are the images of the stars.
readOnly: false
If the stars will be read-only.
scoreName: 'score'
Name of the hidden field that holds the score value.
showCancel: false
If will be showed a button to cancel the rating.
showHalf: false
If will show half star if come a float number as score.
starHalf: 'star-half.png'
The name of the half star image.
start: 0
Number of stars to be selected.
starOff: 'star-off.png'
Name of the star image off.
starOn: 'star-on.png'
Name of the star image on.
Function that returns the selected value.
Public functions: *
$.fn.raty.start(3);
Starting the rating with 3 stars later. Half star not supported.
$.fn.raty.readOnly(true);
Adjusts the rating for read-only later.
$.fn.raty.click(2);
Click in the star number 2 later.
* Should come after the current raty and before the anothers one. Because it takes the last called raty.