jQuery ratingbar

Introduction

This plugin is replacing a textual rating by a rating bar (like a level indicator) using CSS. It degrades gracefully to simple text and is fully customizable (star ratings are a subset). It supports jQuery easing animations.

Have a look into the examples folder.

Consider the following markup:

	<table id="movies">
		<tr> 
		 <td>An awesome movie title</td> 
		 <td>2005</td> 
		 <td>Some guy looses his hat</td>
		 <td class="movie_rating">95</td> 
		</tr>
		<tr> 
		 <td>What a bad movie title</td> 
		 <td>1985</td> 
		 <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.

Features

• Custom layout (colors, images,...)
• Animation
• Dynamic update of ratings
• Graceful degradation

Demo

Take a look at the demos on the project site.

Installation

1. Put the included js and css folder into your projects root folder.

2. Include the following code somewhere between and of your website:

    <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>
   

3. Put a rating-element into the body of the website. For instance:

    <div class="rating">80</div>
   

That's it. Have fun!

License

Copyright (c) 2010 Matthias Endler http://matthias-endler.de

Dual licensed under the MIT and GPL licenses: http://www.opensource.org/licenses/mit-license.php http://www.gnu.org/licenses/gpl.html

See LICENSE.txt for details