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.
- Custom layout (colors, images,...)
- Animation
- Dynamic update of ratings
- Graceful degradation
Take a look at the demos on the project site.
-
Put the included js and css folder into your projects root folder.
-
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>
-
Put a rating-element into the body of the website. For instance:
<div class="rating">80</div>
That's it. Have fun!
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