jQuery Plugin For SVG Based Custom Rating System - jRate

Yet another rating plugin for jQuery that has support including gradient colors, SVG based custom rating shapes and fractional rating.

Available rating shapes included: STAR, RECTANGLE, SQUARE, CIRCLE, RHOMBUS and TRIANGLE.

How to use it:

1. Load jQuery library and the jRate plugin's script in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jRate.min.js"></script>

2. Create a container to place the rating system.

<div id="jRate"></div>

3. Call the plugin on the empty container you just created to initialize the rating system.

$("#jRate").jRate({

// initial rating
rating: 3,

});

4. All the default options.

$(function () {

$("#jRate").jRate({

// initial rating
rating: 0,

// STAR, RECTANGLE, SQUARE, CIRCLE, RHOMBUS, TRIANGLE
shape: "STAR",

// Number of shapes was decided by the count parameter.
count: 5,

// width and height of the rating shapes.
width: "20",
height: "20",

// Make the shapes from smaller to bigger. 
widthGrowth: 0.0,
heightGrowth: 0.0,

backgroundColor: "white",

// start color & end color
startColor: "yellow",
endColor: "green",

// SVG Stroke color
strokeColor: "black",

// gap between two shapes
shapeGap: "0px",

opacity: 1,

// Minimum and Maximum Value
min: 0,
max: 5,

// Set the precision value.
precision: 1,

// false = vertical
horizontal: true,

// make reverse
reverse: false,

// read only rating
readOnly: false,

// callbacks
onChange: null,
onSet: null

});

});

About author:

Author: Senthil Porunan

Website: http://www.toolitup.com/jRate.html

---

This awesome jQuery plugin is developed by senthilporunan. For more Advanced Usages, please check the demo page or visit the official website.