Simple Customizable Star Rating System - jQuery fxss-rate
File Size: | 62.2 KB |
---|---|
Views Total: | 6979 |
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.
<link rel="stylesheet" href="fxss-rate.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="fxss-rate.js"></script>
2. Load the fxss-rate-iconfont.js
for the rating stars.
<script src="fxss-rate.js"></script>
3. Create a container element for the rating system.
<div id="rateBox"></div>
4. Call the function rate
on the container element to generate a basic rating system.
$("#rateBox").rate({ // options here });
5. Get the current rating value with the callback function:
$("#rateBox").rate({ callback: function(object){ console.log(object) } });
6. The full customization options that you can override as per your requirement.
$("#rateBox").rate({ // 0:svg 1:Font class 2:Unicode type: 0, // the number of stars length: 5, // initial value value: 3.5, // allows half star half: true, // supports decimal? decimal: true, // is readonly? readonly: true, // shows the current rating value on hover hover: false // shows rating text text: true, // an array of rating text textList: ['Bad', 'Poor', 'Medium', 'Good', 'Perfect'], // color theme: '#FFB800', // text/star size size: '20px', // space between stars gutter: '3px', // default CSS classes selectClass: 'fxss_rate_select', incompleteClass: '', customClass: '' });
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.