Displaying Product Ratings With jQuery - jStars

File Size: 4.47 KB
Views Total: 3996
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Displaying Product Ratings With jQuery - jStars

jStars is an ultra-small jQuery plugin which displays customizable star ratings on products, articles, posts, services, shops, etc. 

Please note that this plugin is only used to display ratings. Your user CANNOT change the rating value you set.

See Also:

How to use it:

1. Load the main JavaScript jstars.min.js after jQuery JavaScript library and we're ready to go.

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

2. Add the CSS class jstars to the container in which you want to display the star ratings and specify the rating value in the data-value attribute:

<div class="jstars" data-value="3.0"></div>

3. Fractional star fill is supported as well.

<div class="jstars" data-value="3.5"></div>

4. Customize the rating stars using the following data attributes.

  • data-total-stars: The number of rating stars. Default: 5.
  • data-color: Star color. Default: #4285F4.
  • data-empty-color: Empty color. Default: #dddddd.
  • data-size: Star size. Default: 1.5rem.
<div class="jstars" 
     data-value="4.5" 
     data-total-stars="5" 
     data-color="#22D118" 
     data-empty-color="black" 
     data-size="30px">
</div>

Changelog:

2019-12-20

  • Fixed an issue with Document ready in jQuery 3.4.1

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