
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.
- Publication date: 01.09.2018
- Source