Flexible Star Rating System with jQuery - jRating

jRating is a flexible jQuery plugin that makes it easy to create a smart star rating system for your project.  jRating can works with any scripting language, in this tutorial it uses PHP to handle the requests.

Basic Usage:

1.  Include jQuery Library and jRating.js

<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="jquery/jRating.jquery.js"></script>

2. Include jRating CSS

<link rel="stylesheet" href="jquery/jRating.jquery.css" type="text/css" />

3. Markup

!-- basic exemple -->
<div class="exemple">
 
   <!-- in this exemple, 12 is the average and 1 is the id of the line to update in DB -->
   <div class="basic" data-average="12" data-id="1"></div>
 
</div>

4. Call the plugin

<script type="text/javascript">
$(document).ready(function(){
      // simple jRating call
      $(".basic").jRating();
 
      // more complex jRating call
      $(".basic").jRating({
         step:true,
         length : 20, // nb of stars
         onSuccess : function(){
           alert('Success : your rate has been saved :)');
         }
       });
 
      // you can rate 3 times ! After, jRating will be disabled
      $(".basic").jRating({
         canRateAgain : true,
         nbRates : 3
       });
});
</script>

5. Options

showRateInfoBoolean Default : true - Disable the rate info. Can be set to true or false
bigStarsPathString Default : 'jquery/icons/stars.png' - Relative path of the large star picture (stars.png).
smallStarsPathString Default : 'jquery/icons/small.png' - Relative path of the small star picture (small.png).
phpPathString Default : 'php/jRating.php' - Relative path of the PHP page (jRating.php).
typeString Default : 'big' - Appearance type. Can be set to 'small' or 'big'.
stepBoolean Default : false - If set to true, filling of the stars is done star by star (step by step).
isDisabledBoolean Default : false - If set to true, jRating is disabled
lengthInteger Default : 5 - Number of star to display.
decimalLengthInteger Default : 0 - Number of decimals in the rate
rateMaxInteger Default : 20 - Maximal rate
rateInfosXInteger Default : 45 - In pixel - Absolute left position of the information box during mousemove.
rateInfosYInteger Default : 5 - In pixel - Absolute top position of the information box during mousemove.
canRateAgainBoolean Default : false - if true, visitor can rate {nbRates} times (see {nbRates} option below)
nbRatesInteger Default : 1 - If {canRateAgin}, number of times that a visitor can rate

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.