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.
Demo Article
Author: Senthil Porunan
Website: http://www.toolitup.com/jRate.html
Available rating shapes included: STAR, RECTANGLE, SQUARE, CIRCLE, RHOMBUS and TRIANGLE.
Demo Article
Lest start how to use it:
1. Load jQuery library and the jRate plugin's script in your document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jRate.min.js"></script>2. Now Create a Wrapper to place the rating system.
<div id="jRate"></div>
3. Next step 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
});
});
Author: Senthil Porunan
Website: http://www.toolitup.com/jRate.html
No comments :
Post a Comment