Star Rating Plugin With Fractional Rating Support - jsRapStar

jsRapStar is a lightweight, flexible, interactive, customizable jQuery star rating plugin which can be used to display fractional star ratings.

Select rating values with mouse hover & move and rate your products/images/articles by clicking.

1. Include jQuery and the jQuery jsRapStar plugin's files on the html page.

<link rel="stylesheet" href="jsRapStar.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jsRapStar.js"></script>

2. Create a placeholder for the rating control. You're able to specify the initial rating value in the start attribute:

<div id="example" start="3"></div>

3. Call the function to generate a default star rating control.

$('#example').jsRapStar();

4. Specify the number of rating stars. Default: 6.

$('#example').jsRapStar({
  length: 5
});

5. Customize the rating symbol.

$('#example').jsRapStar({
  star:'★'
});

6. Customize the appearance of the ring symbol.

$('#example').jsRapStar({
  // color
  colorFront: 'yellow',
  // background color
  colorBack: 'white',
  // size in pixels
  starHeight: 32
  
});

7. Enable/disable the Fractional Rating Support. Default: false.

$('#example').jsRapStar({
  step: true
  
});

8. Enable/disable the rating control. Default: true.

$('#example').jsRapStar({
  enabled: false
  
});

9. Event handlers.

$('#example').jsRapStar({
  onClick:function(score){
    $(this)[0].StarF.css({color:'red'});
    alert(score);
  },
  onMousemove:function(score){
    $(this).attr('title','Rating: '+score);
  }
    
});

This awesome jQuery plugin is developed by Thibor. For more Advanced Usages, please check the demo page or visit the official website.