SVG Based Star Rating Plugin For jQuery - star-rating-svg.js
File Size: | 30.3 KB |
---|---|
Views Total: | 15315 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A lightweight jQuery plugin for rendering a SVG based star rating system on your webpage that supports for arbitrary star fractions, variable star sizes and colors.
How to use it:
1. Import the star-rating-svg.css
stylesheet for the basic CSS styles.
<link rel="stylesheet" thref="path/to/star-rating-svg.css">
2. Add the required CSS class 'jq-stars' to an empty DIV element.
<div class="demo jq-stars"></div>
3. Import jQuery library and the jQuery star-rating-svg.js script at the bottom of your web page.
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> <script src="/path/to/jquery.star-rating-svg.js"></script>
4. Call the function to render a basic star rating inside the container you just created.
$(".demo").starRating();
5. Available options to customize your star rating system.
$(".demo").starRating({ // the number of stars totalStars: 5, // min rating minRating: 0 // rate using whole stars useFullStars: false, // 'straight' or 'rounded' starShape: 'straight', // the color of empty star emptyColor: 'lightgray', // star color on hover hoverColor: 'orange', // star color on active activeColor: 'gold', // star color on rated ratedColor: 'crimson', // use gradient color useGradient: true, // readonly mode readonly: false, // auto disable after rate disableAfterRate: true, // when enabled (true), enables compatibility with the base tag in your head section baseUrl: false, // gradient color starGradient: { start: '#FEF7CD', end: '#FF9511' }, // the thickness of the border strokeWidth: 0, // the color for the border strokeColor: 'black', // Initial rating initialRating: 0, // star size starSize: 40, // if true, forces rounding the initial rating to the nearest upper half even if the value is closer to the lower (1.1 -> 1.5 rather than 1.1 -> 1.0) forceRoundUp: true // callback callback: function(currentRating){ // do something after rating } // more callbacks onHover: noop, onLeave: noop });
6. API methods.
// Destroys the instance and removes events attached to it $('.demo').starRating('unload'); // Gets the current rating from instance $('.demo').starRating('getRating'); // 0 to max stars (int), round (Boolean) $('.demo').starRating('setRating', VALUE, ROUND); // Resize the stars on the fly // value: 1 to 200 $('.demo').starRating('resize',VALUE); // disable/enable stars manually $('.demo').starRating('setReadOnly', true);
7. Events.
$('.demo').starRating({ onHover: function(currentIndex, currentRating, $el){ // do something on mouseover }, onLeave: function(currentIndex, currentRating, $el){ // do something after mouseout } });
Changelog:
2020-08-18
- fix level colors
2018-10-08
- adds minimum rating
2017-12-18
- adds forceRoundUp
2017-11-28
- JS update
2017-01-05
- Adding fix for baseUrl having a hash
2016-08-22
- adds public method to setReadOnly dynamically
2016-08-07
- Fixed issues with SVG and <base> tag
2016-07-20
- Adds method to resize stars on the fly
2016-06-20
- Fixed: When activating full stars it is not possible to return to zero stars.
2016-05-18
- Fixed: Need option to round up or down, when using "setRating"
2016-05-17
- prevent setting out of bounds rating
2016-05-16
- Fixed unload method
2016-04-10
- Update jquery.star-rating-svg.js
2016-04-03
- adds support for full stars
- Disables rating after initial rate selected
2015-12-12
- v3.5.0
2015-08-31
- indentation fix
This awesome jQuery plugin is developed by nashio. For more Advanced Usages, please check the demo page or visit the official website.