Jquery ratingbar

Posted   on Wednesday, September 15 - 2010 (486 words)

This plugin is replacing a textual rating by a graphical rating using CSS. It’s easy to use, fully customizable and degrades gracefully. It also supports animations.

Consider the following markup:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<table>
  <tr> 
    <td>The Rum Diary</td>
    <td class="movie_rating">95</td> 
  </tr>
  <tr>
    <td>Gozilla ate my pants</td>
    <td class="movie_rating">25</td> 
  </tr>
</table>

By default you get two rating bars where “95” and “25” stood before:

The Rum Diary 95
Gozilla ate my pants 25

Advanced settings

Alright let’s get a little more fancy. Let’s add some easing effect. Use the following button to make the magic happen: Click

Awesome rating 8
Mediocre rating 3

Star ratings are no problem, too:

5
1
3

For more examples take a look at my movies and about pages.

Installation

Download the package.

  • Put the included js and css folder into your websites root directory.

  • Include the following code somewhere between <head> and </head> of your website:

1
2
3
4
5
6
7
8
<link rel="stylesheet" type="text/css" href="css/ratingbar.css" /> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.ratingbar.js"></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$('.rating').ratingbar();
	});
</script>
  • Put a rating-element into the body of the website. For instance:
1
<div class="rating">80</div>

That’s it. Have fun!

Options

jQuery.ratingbar is flexible. For instance the pink ratingbar above was created with the following code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
$('.fancy_rating').ratingbar({
	animate:        true,
	duration:       1000,
	ease:           "easeOutBounce",
	maxRating:      10,
	wrapperWidth:   400,
	showText:       false,
	wrapperClass:   "wrapper_fancy",
	innerClass:     "inner_fancy"
});

Options are specified as name: value pairs. Here is a list of customizable options:

animate [true|false] Expand bar on page load
duration standard: 1000 Animation length in millisecods
ease ["swing"|...] Animation easing effect
maxRating standard: 100 Highest achieveable rating
wrapperWidth standard: 100 Width of container for rating
showText [true|false] Show original rating text
wrapperClass CSS class (without dot) Custom class for rating container
innerClass CSS class (without dot) Custom class for actual rating
textClass CSS class (without dot) Custom class for rating text
wrapperMarkup HTML markup Custom markup for bar
innerMarkup HTML markup Custom markup for rating
textMarkup HTML markup Custom markup for text

License

© Matthias Endler. Dual licensed under the MIT and GPL licenses.

More? Here's a list of all posts.
Feel free to copy, share and comment.
Tweet