jQuery Bar Rating Plugin

Download   Demo

jQuery Bar Rating Plugin works by transforming a standard select box into a rating widget. It’s only 4kb minified and easy to style with CSS.

1. INCLUDE CSS AND JS FILES

<link href="css/examples.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="../jquery.barrating.js"></script>

2. HTML

<div class="input select rating-a">
	<label for="example-a">Basic example:</label>
	<select id="example-a" 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>
		<option value="6">6</option>
		<option value="7" selected="selected">7</option>
		<option value="8">8</option>
		<option value="9">9</option>
		<option value="10">10</option>
	</select>
</div>

3. JAVASCRIPT

$(function () 
	$('#example-a').barrating();
);

4. OPTIONS

initialRating:null

Pass an option value to specify initial rating. If null, the plugin will try to set the initial rating by finding an option with a `selected` attribute.

showValues:false

If set to true, rating values will be displayed on the bars.

showSelectedRating:true

If set to true, user selected rating will be displayed next to the widget.

reverse:false

If set to true, the ratings will be reversed.

readonly:false

If set to true, the ratings will be read-only.

5. METHODS

$(‘select’).barrating(‘show’);

Shows the rating widget.

$(‘select’).barrating(‘clear’);

Clears the rating.

$(‘select’).barrating(‘destroy’);

Destroys the rating widget.

6. CALLBACKS

onSelect:function(value, text)

Fired when a rating is selected.

onClear:function(value, text)

Fired when a rating is cleared.

onDestroy:function(value, text)

Fired when a rating is destroyed.

jQuery Bar Rating Plugin