
Bootstrap Rating Input is a lightweight jQuery plugin that transform a standard input filed into a simple star rating system with Twitter's Bootstrap 3. The plugin also comes with a function to remove the selected rating.
See also:
How to use it:
1. Include jQuery javascript library and jQuery bootstrap rating input plugin on the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="bootstrap-rating-input.min.js"></script>
2. Include Twitter's bootstrap 3 framework on the page.
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
3. Create a number input field with 'rating' class name on the page. Using data-clearable
attribute to define the remove text.
<input type="number" name="My Rating System" id="Demo" class="rating" data-clearable="remove"/>
4. Default plugin options.
$('input.my_class').rating({ 'min': 1, 'max': 5, 'empty-value': 0, 'iconLib': 'glyphicon', 'activeIcon': 'glyphicon-star', 'inactiveIcon': 'glyphicon-star-empty', 'clearable': false, 'clearableIcon': 'glyphicon-remove', 'inline': false, 'readonly': false, 'copyClasses': true });
Change log:
2018-03-13
- Option to disable copying of input classes to rating container
2016-06-08
- Cleanup and bugfixing, bump to version 0.4.0 with readonly and inline features
2016-05-05
- Fixed Clear does not reset to minimum assigned value, it resets to 0
2014-08-23
- Fixed for 0x800a139e - JavaScript runtime error
2014-08-13
- Added a check to avoid issues with AJAX
2014-02-10
- Fixed a bug and prettified some code
v0.2.1 (2014-01-14)
- Added some improvements to the pr for "empty value" use case
This awesome jQuery plugin is developed by javiertoledo. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 13.03.2018
- Source