A Highly Customizable Star Rating Plugin for jQuery

JQuery evaluation plugin is fast and progressive optimization, touch support, icon font support, unobtrusive and highly customizable JavaScript (with * HTML5 * data attributes), RTL support, support for any number of stars you want, as well as any step size.

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

Key Features:

Custom Label Icons: UTF-8 characters, SVG icons, web fonts, etc.
Custom step size.
Supports AJAX.
Can reach.
Touch screen and compatible with mobile devices.
Incremental improvement. Supports DIV, range slider, and component identification.
RTL and tooltip are also supported.
Supports the largest possible number of rating stars.
Fully reworked via CSS.

How to make use of it:

Installation:

# NPM
npm install jquery.rateit

# Bower
bower install jquery.rateit

1. Import the jquery.rateit into your undertaking. Or immediately embrace the next JS & CSS files in your HTML web 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 component 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. You’re allowed to config the rating management through the HTML5 data-OPTION attributes:

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

4. Or utilizing 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 strategies:

// 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')

Highly Customizable Rating Plugin, rateit.js Github