Flexible Star Rating System with jQuery - jRating
File Size: | 46.6 KB |
---|---|
Views Total: | 18029 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.