jQuery star-rating-svg.js Plugin Examples
// basic example
<div class="my-rating"></div>
$(".my-rating").starRating({
initialRating: 4,
starSize: 25
});
// grab rating from a data attribute
<div> class="my-rating-2" data-rating="2.5"></div>
$(".my-rating-2").starRating({
totalStars: 5,
emptyColor: 'lightgray',
hoverColor: 'salmon',
activeColor: 'cornflowerblue',
strokeWidth: 0,
useGradient: false
});
// define a gradient
<div> class="my-rating-3"></div>
// specify the gradient start and end for the selected stars
$(".my-rating-3").starRating({
starSize: 50,
strokeWidth: 3,
strokeColor: 'darkgray',
initialRating: 2,
starGradient: {
start: '#AABBCC',
end: '#002233'
},
});
// execute callback when rating
<div> class="my-rating-4"></div>
$(".my-rating-4").starRating({
totalStars: 5,
emptyColor: 'lightgray',
hoverColor: 'salmon',
activeColor: 'cornflowerblue',
initialRating: 4,
strokeWidth: 0,
useGradient: false,
callback: function(currentRating){
alert('rated ', currentRating);
}
});
// execute callback when rating
<div> class="my-rating-4"></div>
$(".my-rating-5").starRating({
readOnly: true
});
// unloading the plugin instance
$(".my-rating").starRating('unload');