Submit your widget

jRating Ajaxed star rating system with jQuery plugin

Created 6 years ago   Views 37302   downloads 9452    Author myjqueryplugins
jRating  Ajaxed star rating system with jQuery plugin
View DemoDownload 34.5 KB
210
Share |

The article source:http://www.myjqueryplugins.com/jRating

jRating is a very flexible jQuery plugin for quickly creating an Ajaxed star rating system. It is possible to configure every detail 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 the plugin can be used with any scripting language, a PHP file that handles the requests is already included in the download package.

1. First, include the CSS & jQuery files

 

      <!-- jRating CSS -->
      <link rel="stylesheet" href="jRating.jquery.css" type="text/css" />
       
      <!-- jRating and jQuery files -->
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript" src="jRating.jquery.js"></script>

 

2. Add your HTML !

 

      <!-- Don't forget the 'data' attribut -->
      <!-- 'data' attribut must be written as 'average'_'id of the box' -->
       
      <div class="jRating" data="12_1"></div> <!-- In this exemple, the average is 12 and the ID is 1 -->
       
      <div class="jRating" data="8.5_2"></div> <!-- In this other exemple, the average is 8.5 and the ID is 2 -->

 

3. Now, call the jRating plugin

 

$('.jRating').jRating({options});

 

 

      $(document).ready(function(){
         // Very simple call
         $('.jRating').jRating(); 
         // Call with options - exemple
         $('.jRating').jRating({
           step : false, // no step
           length : 10, // show 10 stars at the init
           type : 'small' // show small stars instead of big default stars
         });
      });

 

Options jRating

bigStarsPath
String
Défault : 'jquery/icons/stars.png' - Relative path of the large star picture (stars.png).
smallStarsPath
String
Défault : 'jquery/icons/small.png' - Relative path of the small star picture (small.png).
phpPath
String
Défault : 'php/jRating.php' - Relative path of the PHP page for the Ajax treatment (jRating.php).
type
String
Défault : 'big' - Appearance type. Can be set to 'small' or 'big'.
step
Boolean
Défault : false - If step is set to true, filling of the stars is done star by star (step by step).
isDisabled
Boolean
Défault : false - If isDisabled is set to true, jRating is disabled.
length
Integer
Défault : 5 - Number of star to display.
decimalLength
Integer
Défault : 0 - Number of decimals in the rate.
rateMax
Integer
Défault : 20 - Maximal Rate.
rateInfosX
Integer
Défault : - 45 - In pixel - Absolute left position of the information box during the mousemove.
rateInfosY
Integer
Défault : 5 - In pixel - Absolute top position of the information box during the mousemove.

 

Tag: rating