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
   
Minimal jQuery Rating Widget Plugin - Bar Rating

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.