Simple Customizable Star Rating System - jQuery fxss-rate

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.