starRating, star rating jquery plugin


Github / v.1.2.0


Basic implementation

<div class="my-rating"></div>
  initialRating: 4,
  strokeColor: '#894A00',
  strokeWidth: 10,
  starSize: 25

Rounded star shape

<div> class="my-rating-4" data-rating="2.5"></div>
  totalStars: 5,
  starShape: 'rounded',
  starSize: 40,
  emptyColor: 'lightgray',
  hoverColor: 'salmon',
  activeColor: 'crimson',
  useGradient: false

Use gradients

<div> class="my-rating-5"></div>
// specify the gradient start and end for the selected stars
  starSize: 80,
  strokeWidth: 9,
  strokeColor: 'black',
  initialRating: 2,
  starGradient: {
      start: '#93BFE2',
      end: '#105694'

Execute callback when rating

<div> class="my-rating-6"></div>
  totalStars: 5,
  emptyColor: 'lightgray',
  hoverColor: 'salmon',
  activeColor: 'cornflowerblue',
  initialRating: 4,
  strokeWidth: 0,
  useGradient: false,
  callback: function(currentRating, $el){
    alert('rated ' + currentRating);
    console.log('DOM element ', $el);

read only mode

<div> class="my-rating-7"></div>
  readOnly: true

Use fullstars

// use full stars only
<div> class="my-rating-8"></div>
  useFullStars: true

On hover event

<span> class="my-rating-9"></span>
<span> class="live-rating"></span>
    initialRating: 3.5,
    disableAfterRate: false,
    onHover: function(currentIndex, currentRating, $el){
    onLeave: function(currentIndex, currentRating, $el){
See options @ github