Star Rating Plugin With Fractional Rating Support - jsRapStar
File Size: | 5 KB |
---|---|
Views Total: | 5582 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.