, , ,

jRating: Very flexible jQuery plugin for creating quickly a star rating system

New Options :

  • canRateAgain (boolean) : if true, visitor can rate {nbRates} times (see {nbRates} option below)
  • nbRates (integer) : If {canRateAgain}, number of times that a visitor can rate (please see full documentation)

Infos containers changes : id=”18_1″ become data-average=”18″ & data-id=”1″

jRating is a very flexible jQuery plugin for quickly creating an Ajaxed star rating system. It is possible to configure every details from “the number of the stars” to “if the stars can represent decimals or not”.

There is also an option to display small or big stars and images can be changed with any other file easily.

Although jRating can be used with any scripting language, a PHP file that handles the requests is already included in the download package on github.

Download:

Demonstration:

Plugin homepage:

Implementation:

1. FIRST, INCLUDE THE CSS & JQUERY FILES

<!-- include CSS & JS files -->
<!-- CSS file -->
<link rel="stylesheet" type="text/css" href="jRating.jquery.css" media="screen" />
<!-- jQuery files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jRating.jquery.js"></script>

2. ADD YOUR HTML

<!-- 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>
 
    <!-- in this other exemple, 8 is the average and 2 is the id of the line to update in DB -->
   <div class="basic" data-average="8" data-id="2"></div>
 
</div>

3. NOW, CALL THE JRATING 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
       });
 
      // get the clicked rate !
      $(".basic").jRating({
        onClick : function(element,rate) {
         alert(rate);
        }
      });
});
</script>

Options:

Screenshots:

About me