Highly Customizable Rating Plugin For jQuery - Rateit.js
File Size: | 54.5 KB |
---|---|
Views Total: | 10172 |
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.5 (2021-03-11)
- Fix deprecated jQuery calls with jQuery 3.5
v1.1.4 (2020-12-01)
- Fixed for RTL mode in the CSS.
v1.1.3 (2019-11-26)
- fix bug when using <span> with mode:font
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.