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