This time I will share jQuery Plugin and tutorial about Simple Customizable Star Rating System – jQuery fxss-rate, hope it will help you in programming stack.
File Size: | 62.2 KB |
---|---|
Views Total: | 5714 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
fxss-rate is a small yet fully customizable jQuery rating system that enables your visitor to rate your article/product/post with SVG based stars. Supports half star and fractional rating.
How to use it:
1. Insert jQuery JavaScript library and the jQuery fxss-rate plugin’s files into the HTML file.
1 |
< link rel = "stylesheet" href = "fxss-rate.css" > |
2 |
< script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" |
3 |
integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
4 |
crossorigin = "anonymous" ></ script > |
5 |
< script src = "fxss-rate.js" ></ script > |
2. Load the fxss-rate-iconfont.js
for the rating stars.
1 |
< script src = "fxss-rate.js" ></ script > |
3. Create a container element for the rating system.
1 |
< div id = "rateBox" ></ div > |
4. Call the function rate
on the container element to generate a basic rating system.
1 |
$( "#rateBox" ).rate({ |
2 |
// options here |
3 |
}); |
5. Get the current rating value with the callback function:
1 |
$( "#rateBox" ).rate({ |
2 |
callback: function (object){ |
3 |
console.log(object) |
4 |
} |
5 |
}); |
6. The full customization options that you can override as per your requirement.
01 |
$( "#rateBox" ).rate({ |
02 |
03 |
// 0:svg 1:Font class 2:Unicode |
04 |
type: 0, |
05 |
06 |
// the number of stars |
07 |
length: 5, |
08 |
09 |
// initial value |
10 |
value: 3.5, |
11 |
12 |
// allows half star |
13 |
half: true , |
14 |
15 |
// supports decimal? |
16 |
decimal: true , |
17 |
18 |
// is readonly? |
19 |
readonly: true , |
20 |
21 |
// shows the current rating value on hover |
22 |
hover: false |
23 |
24 |
// shows rating text |
25 |
text: true , |
26 |
27 |
// an array of rating text |
28 |
textList: [ 'Bad' , 'Poor' , 'Medium' , 'Good' , 'Perfect' ], |
29 |
30 |
// color |
31 |
theme: '#FFB800' , |
32 |
33 |
// text/star size |
34 |
size: '20px' , |
35 |
36 |
// space between stars |
37 |
gutter: '3px' , |
38 |
39 |
// default CSS classes |
40 |
selectClass: 'fxss_rate_select' , |
41 |
incompleteClass: '' , |
42 |
customClass: '' |
43 |
|
44 |
}); |
Changelog:
2019-01-10
- Bugfix
This awesome jQuery plugin is developed by fxss5201. For more Advanced Usages, please check the demo page or visit the official website.
source : jquery.net