SVG Based Star Rating Plugin For jQuery star rating svg js - Free Download SVG Based Star Rating Plugin For jQuery - star-rating-svg.js

Free Download SVG Based Star Rating Plugin For jQuery – star-rating-svg.js

Posted on

This time I will share jQuery Plugin and tutorial about SVG Based Star Rating Plugin For jQuery – star-rating-svg.js, hope it will help you in programming stack.

SVG Based Star Rating Plugin For jQuery star rating svg js - Free Download SVG Based Star Rating Plugin For jQuery - star-rating-svg.js
File Size: 30.3 KB
Views Total: 10960
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.

1 <link rel="stylesheet" thref="path/to/star-rating-svg.css">

2. Add the required CSS class ‘jq-stars’ to an empty DIV element.

1 <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.

1 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
2 <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.

1 $(".demo").starRating();

5. Available options to customize your star rating system.

01 $(".demo").starRating({
02  
03   // the number of stars
04   totalStars: 5,
05  
06   // min rating
07   minRating: 0
08  
09   // rate using whole stars
10   useFullStars: false,
11  
12   // 'straight' or 'rounded'
13   starShape: 'straight',
14  
15   // the color of empty star
16   emptyColor: 'lightgray',
17  
18   // star color on hover
19   hoverColor: 'orange',
20  
21   // star color on active
22   activeColor: 'gold',
23  
24   // star color on rated
25   ratedColor: 'crimson',
26  
27   // use gradient color
28   useGradient: true,
29  
30   // readonly mode
31   readonly: false,
32  
33   // auto disable after rate
34   disableAfterRate: true,
35    
36   // when enabled (true), enables compatibility with the base tag in your head section
37   baseUrl: false,
38  
39   // gradient color
40   starGradient: {
41     start: '#FEF7CD',
42     end: '#FF9511'
43   },
44  
45   // the thickness of the border
46   strokeWidth: 0,
47  
48   // the color for the border
49   strokeColor: 'black',
50  
51   // Initial rating
52   initialRating: 0,
53  
54   // star size
55   starSize: 40,
56  
57   // 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)
58   forceRoundUp: true
59  
60   // callback
61   callback: function(currentRating){
62     // do something after rating
63   }
64  
65   // more callbacks
66   onHover: noop,
67   onLeave: noop
68    
69 });

6. API methods.

01 // Destroys the instance and removes events attached to it
02 $('.demo').starRating('unload');
03  
04 // Gets the current rating from instance
05 $('.demo').starRating('getRating');
06  
07 // 0 to max stars (int), round (Boolean)
08 $('.demo').starRating('setRating', VALUE, ROUND);
09  
10 // Resize the stars on the fly
11 // value: 1 to 200
12 $('.demo').starRating('resize',VALUE);
13  
14 // disable/enable stars manually
15 $('.demo').starRating('setReadOnly', true);

7. Events.

1 $('.demo').starRating({
2   onHover: function(currentIndex, currentRating, $el){
3     // do something on mouseover
4   },
5   onLeave: function(currentIndex, currentRating, $el){
6     // do something after mouseout
7   }
8 });

Changelog:

2020-08-18

  • fix level colors

2018-10-08

  • adds minimum rating

2017-12-18

  • adds forceRoundUp

2017-11-28

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.