Highly Customizable Rating Plugin For jQuery - Rateit.js

Highly Customizable Rating Plugin For jQuery - Rateit.js
File Size: 54.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Rateit.js is a simple, easy jQuery plugin that helps you generate a highly customizable star rating control from any elements using HTML5 data attributes.

Key features:

  • Custom rating symbols: UTF-8 characters, SVG icons, web fonts, etc.
  • Custom step size.
  • AJAX enabled.
  • Accessible.
  • Touch-enabled and mobile friendly.
  • Progressive enhancement. Supports DIV, range slider and select elements.
  • RTL and tooltip supported as well.
  • Supports as many rating stars as possible.
  • Fully stylable via CSS.

Installation:

# NPM
npm install jquery.rateit

# Bower
bower install jquery.rateit

Basic usage:

1. Import the jquery.rateit into your project. Or directly include the following JS & CSS files on your html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<link href="rateit.css" rel="stylesheet" type="text/css">
<script src="jquery.rateit.js"></script>

2. Create an HTML element for the rating control.

<!-- BASIC -->
<span class="rateit">
</div>

<!-- OR -->
<div class="rateit">
</div>

<!-- OR -->
<input type="range" min="0" max="5" value="0" step="0.5" id="backing1">
<div class="rateit" data-rateit-backingfld="#backing1"></div>

<!-- OR -->
<select id="backing2">
    <option value="1">Bad</option>
    <option value="2">OK</option>
    <option value="3">Great</option>
    <option value="4">Excellent</option>
</select>
<div class="rateit" data-rateit-backingfld="#backing2" data-rateit-min="0"></div>

3. That's it. You're allowed to config the rating control via the HTML5 data-OPTION attributes:

<div class="rateit" 
     data-rateit-starwidth="32" 
     data-rateit-starheight="32"
></div>

4. Or using JavaScript:

$('#rateit-demo').rateit({ 

  // min value
  min: 0, 

  // max value
  max: 5, 

  // step size
  step: 0.5, 

  // 'bg', 'font'
  mode: 'bg', 

  // custom icon
  icon: '★', 

  // size of star
  starwidth: 16, 
  starheight: 16, 

  // is readonly?
  readonly: false, 

  // is resetable?
  resetable: true, 

  // is preset?
  ispreset: false
  
 });

5. API methods:

// get value
$('#rateit-demo').rateit('value')

// set value
$('#rateit-demo').rateit('value', Value)

// get max value
$('#rateit-demo').rateit('max')

// set max value
$('#rateit-demo').rateit('max', Value)

// get min value
$('#rateit-demo').rateit('min')

// set min value
$('#rateit-demo').rateit('min', Value)

// get step size
$('#rateit-demo').rateit('step')

// set step size
$('#rateit-demo').rateit('step', Value)

// get readOnly value
$('#rateit-demo').rateit('readonly')

// set readOnly value
$('#rateit-demo').rateit('readonly', Value)

// get isPreset value
$('#rateit-demo').rateit('ispreset')

// set isPreset value
$('#rateit-demo').rateit('ispreset', Value)

// reset
$('#rateit-demo').rateit('reset')

Changelog:

v1.1.2 (2019-03-27)

  • tabindex="0" gets only added in readonly mode. When keyboard tabbing, no focus is needed in readonly mode.

 


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