star-rating-svg

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

1. Include jQuery:

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
   

2. Include plugin's code:

   <script src="jquery.star-rating-svg.js"></script>
   

3. Include plugin's css:

   <link rel="stylesheet" type="text/css" href="star-rating-svg.css">
   

4. Add the markup

   <div class="my-rating"></div>
   

5. Call the plugin:

   $(".my-rating").starRating({
       starSize: 25,
       callback: function(currentRating, $el){
           // make a server call here
       }
   });
   

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
$('your-selector').starRating('unload')
// set rating example
$('your-selector').starRating('setRating', 2.5)
// set rating and round
$('your-selector').starRating('setRating', 2.8, true) // 3.0
// get rating example
$('your-selector').starRating('getRating')

Callbacks

name	arguments	description
callback	rating, DOM element	Executes when selecting a rate

$('your-selector').starRating({
    callback: function(currentRating, $el){
    	// do something after rating
    }
});

Events

method	description
onHover	executes a callback on mouseover
onLeave	executes a callback on mouseout

$('your-selector').starRating({
    onHover: function(currentIndex, currentRating, $el){
			// do something on mouseover
    },
    onLeave: function(currentIndex, currentRating, $el){
			// do something after 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)