Minimal jQuery Rating Widget Plugin - Bar Rating
File Size: | 110 KB |
---|---|
Views Total: | 17740 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Bar Rating is a minimal and lightweight jQuery plugin that turns a standard select box into a flexible bar rating widget. It is fully customizable and can be easy to style with CSS.
See also:
How to use it:
1. Include jQuery library and jQuery Bar Rating on the website
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="../jquery.barrating.js"></script>
2. Create the html for a star rating system
<select id="demo" name="rating"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select>
3. The CSS
#demo .bar-rating a { background: url('../img/star.png'); width: 24px; height: 24px; display: block; float: left; } #demo .bar-rating a:hover, #demo .bar-rating a.active, #demo .bar-rating a.selected { background-position: 0 24px; } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio : 1.5), (min-resolution: 192dpi) { #demo .bar-rating a { background: url('../img/[email protected]'); background-size: 24px 48px; } }
3. The javascript.
$('#demo').barrating({ // Specify a theme theme:'', // initial rating initialRating:null, // allow empty ratings? allowEmpty:null, // this is the expected value of the empty rating emptyValue:'', // display rating values on the bars? showValues:false, // append a div with a rating to the widget? showSelectedRating:true, // allow to deselect ratings? deselectable:true, // reverse the rating? reverse:false, // make the rating ready-only? readonly:false, // remove 300ms click delay on touch devices? fastClicks:true, // change state on hover? hoverState:true, // supress callbacks when controlling ratings programatically silent: false, // trigger change event when ratings are set or reset triggerChange:true, // callback fired when a rating is selected onSelect:function (value, text, event) {}, // callback fired when a rating is cleared onClear:function (value, text) {}, // callback fired when a widget is destroyed onDestroy:function (value, text) {} });
4. Callbacks
// callback fired when a rating is selected onSelect:function (value, text) { }, // callback fired when a rating is cleared onClear:function (value, text) { }, // callback fired when a widget is destroyed onDestroy:function (value, text) { }
5. Methods.
// Shows the rating widget. $('select').barrating('show'); // Sets the value of rating widget. $('select').barrating('set', value); // Clears the rating. $('select').barrating('clear'); // Toggles the read-only state. State can be true or false. $('select').barrating('readonly', state); // Destroys the rating widget. $('select').barrating('destroy');
Changelog:
v1.2.3 (2017-02-28)
- bugfix: fastClicks option check fixed
- new option added: triggerChange
v1.2.2 (2017-02-19)
- new option added: allowEmpty
- new option added: emptyValue
- new option added: triggerChange
- bugfix: accept empty string in set method
- bugfix: little CSS fix
- bugfix: syntax error within example in documentation
- added optimal travis config
v1.2.1 (2016-09-16)
- Adding allowEmpty and emptyValue settings
- fixed variable declaration
v1.2.0 (2016-06-03)
- support for displaying of fractional star ratings (2.5, 3.7, 4.9)
- reset select field when ratings are cleared
- deselectable option added
- readonly ratings - cursor: default rule added to all themes
- deprecated wrapperClass option removed
v1.1.4 (2016-02-17)
- bugfix: when using "set" method the colors are reversed
- update selected rating value when tabbing
- bugfix: click doesn't fire onSelect after changing readonly to true and then to false
v1.1.3 (2015-11-26)
- new option added: silent
- readonly method added
- namespaced events
- rating widget - redundant span elements dropped
- wrapperClass option deprecated
- pass event object to onSelect callback
- print styles added
- new option added: hoverState
v1.1.2 (2015-09-05)
- triggering onSelect callback when using set method
- AMD and CommonJS compatibility
v1.1.1 (2015-07-27)
- themes for basic stars in flavors for css, fontawesome and bootstrap
- switch to using karma and phantomjs for testing
- gulp tasks added
- minified version with source map file stored in dist directory
v1.1.0 (2015-06-21)
- new & improved demo page
- plugin will create a wrapper div by itself
- new option added: wrapperClass
- new option added: fastClicks
- no need to check wrapperClass value
v1.0.6 (2015-05-02)
- allow html in ratings, example added
- vertical rating example added
- bugfix: Knockout doesn't recognize values set by the widget unless we call change() on the select tag. (@akshaykarle, #25)
- documentation updated with detailed installation instructions
- set method added
- bugfix: onClear and onDestroy callbacks fixed
- new & improved demo page
- plugin will create a wrapper div by itself
- new option added: wrapperClass >
v1.0.5 (2014-08-03)
- bugfix: selected option changed by propterties, not attributes (fixes issue #7)
- .bar-rating changed to .br-widget
- .current-rating changed to .br-current-rating
- .active changed to .br-active
- .selected changed to .br-selected
- .current changed to .br-current
- read-only and reversed rating marked with .br-readonly and .br-reverse classes respectively
- bugfix: removed touch detection - improved cross-browser compatibility
- bower.json added
v1.0.3 (2013-08-05)
- destroy method will destroy a single instance of the plugin
- clear method added
- onClear and onDestroy callbacks added
This awesome jQuery plugin is developed by antennaio. For more Advanced Usages, please check the demo page or visit the official website.