nashio/star-rating-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
• Change rated star colors by level

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

• Define rated star colors per level by using an array of colors

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)