star-rating-svg

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

Features:


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
minRating 0 Specify the lowest rating
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
ratedColor crimson Color assigned to manually rated star
ratedColors [‘#333333’, ‘#555555’, ‘#888888’, ‘#AAAAAA’, ‘#CCCCCC’] colors assigned to each level of rated stars
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
starShape ‘straight’ or ‘rounded’ Change the star shape type
baseUrl false when enabled (true), enables compatibility with the base tag in your head section
forceRoundUp false 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)

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
resize 1 to 200 Resize the stars on the fly
setReadOnly Boolean Disable or enable stars manually
// 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

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

1.2.2

1.2.1

1.2.0

1.1.1

1.1.0

1.0.1

1.0.0

0.9.4

0.9.3

0.8.2

0.8.0

License

The MIT License (MIT)