Viewing file:  index.html (3.97 KB) -rwxrwxr-x
Select action/file-type:
 (+) | (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
Rater Js Example
Rater Js Example
Back to home page
Basic 5 star rater
{
starSize:32,
element:document.querySelector("#rater"),
rateCallback:function rateCallback(rating, done) {
this.setRating(rating);
done();
}
}
5 star rater with step
{
element:document.querySelector("#rater"),
rateCallback:function rateCallback(rating, done) {
this.setRating(rating);
done();
},
starSize:32,
step:0.5
}
Custom messages
{
max:5,
rating:4,
element:document.querySelector("#rater2"),
disableText:"Custom disable text!",
ratingText:"My custom rating text {rating}",
showToolTip:true,
rateCallback:function rateCallback(rating, done) {
starRating.setRating(rating);
starRating.disable();
done();
}
}
You can have unlimited number of stars. Example with 16 stars. readOnly option is set to true.
{
max:16,
readOnly:true,
rating:4.4,
element:document.querySelector("#rater3")
}
5 Star rater with custom isBusyText and simulated backend. A random number betweeen 1 and 5 is set as the rating.
{
isBusyText: "Rating in progress. Please wait...",
element:document.querySelector("#rater4"),
rateCallback: function rateCallback(rating, done) {
starRating.setRating(rating);
myDataService.rate().then(function (avgRating) {
starRating.setRating(avgRating);
done();
});
}
}
On hover event
{
element:document.querySelector("#rater5"),
rateCallback:function rateCallback(rating, done) {
this.setRating(rating);
done();
},
onHover: function(currentIndex, currentRating){
document.querySelector('.live-rating').textContent = currentIndex;
},
onLeave: function(currentIndex, currentRating){
document.querySelector('.live-rating').textContent = currentRating;
}
}
Clear/reset rater
{
element:document.querySelector("#rater6"),
rateCallback:function rateCallback(rating, done) {
this.setRating(rating);
done();
}
}
document.querySelector('#rater6-button').addEventListener("click", function() {
starRating6.clear();
}, false);
Right to left support
{
max:6,
reverse:true, //this enable rtl
element:document.querySelector("#rater7"),
rateCallback:function rateCallback(rating, done) {
this.setRating(rating);
done();
}
)
|