Star Rating jQuery Plugin using SVG

A basic, yet flexible star rate jQuery plugin, using SVG.

Features:

• Doesn't use external 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
• Change star shape (rounded or straight)
• Resize stars

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

Methods

// unload/destroy 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') // resize $('your-selector').starRating('resize', 50) // disable/enable stars manually $('.your-selector').starRating('setReadOnly', true); 

Callbacks

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

Events

$('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.2.2

• Specify the lowest rating with 'minRating'

1.2.1

• Adds color for manually rated stars 'ratedColor'

1.2.0

• Adds public method to disable & enable stars manually

1.1.1

• Fixes issue when using SVG + base tag

1.1.0

• Change the star type
• Adds method to resize star on the fly

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)