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.

How to use it:

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

<link rel="stylesheet" href="jsRapStar.css">
<script src="/path/to/cdn/jquery.slim.min.js"></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);
  },

  onMouseleave: function(score){
    $(this).attr('title','Rating: '+score);
  },
    
});

Changelog:

2021-01-19

• JS updated

2021-01-18

• Add animation

2021-01-10

• JS updated

2021-01-09

• code simplification

2020-12-21

• Update

2020-03-12

• Adde mouseLeave event

2018-11-18

• JS & CSS update

2018-09-26

• JS Update

---

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