A basic, yet flexible star rate jQuery plugin, using SVG.
Features:
- Doesn't use images
- Customize size
- Customize colors
- Use half or full stars
- Choose the number of stars to be displayed
- Define gradient color of selected stars
- Specify a border/stroke thickness and color
- Specify initial rating via options or markup data attribute
- Execute callback after rating (ex. to notify a server)
- onHover and onLeave events
- Locked / Read-only mode
- Unload option
demo
For a working demo, see: http://nashio.github.io/star-rating-svg/demo
Usage
-
Include jQuery:
-
Include plugin's code:
-
Include plugin's css:
-
Add the markup
-
Call the plugin:
;
Options
option | default | description |
---|---|---|
totalStars | 5 | Amount of stars to show |
initialRating | 0 | Initial rating applied on load |
starSize | 40 | width in pixels of each star |
useFullStars | false | rate using whole stars, if enabled, it doesn't use half-steps |
emptyColor | lightgray | Color assigned to an empty star |
hoverColor | orange | Color assigned to hovered star |
activeColor | gold | Color assigned to active rated star |
useGradient | true | Active stars will use gradient coloring |
To use this option you need to populate the object [starGradient] | ||
starGradient | {start: '#FEF7CD', end: '#FF9511'} | Define the star and end colors for the gradient |
readOnly | false | If false any interaction is disabled |
disableAfterRate | true | Removes further events once a rate is selected |
strokeWidth | 0 | Defines the thickness of the border, 0 is disabled |
strokeColor | black | Defines the color for the border |
Methods
method | arguments | description |
---|---|---|
unload | Destroys the instance and removes events attached to it | |
setRating | 0 to max stars (int), round (Boolean) | Manually sets the rating |
getRating | Gets the current rating from instance |
// unload example// set rating example// set rating and round // 3.0// get rating example
Callbacks
name | arguments | description |
---|---|---|
callback | rating, DOM element | Executes when selecting a rate |
;
Events
method | description |
---|---|
onHover | executes a callback on mouseover |
onLeave | executes a callback on mouseout |
;
Files
Code example
demo/index.html/
Source file
src/
Minified version
dist/
Changelog
1.0.1
- Fixes Firefox hover issues
1.0.0
- Adds set rating, and get rating
- Adds onHover event
- Adds onLeave event
0.9.4
- Fixes support for enabling full stars
0.9.3
- Returns element on callback
- Fixed typos
0.8.2
- Fixed bugs related to rendering in retina
0.8.0
- Added readonly mode
License
The MIT License (MIT)