Control.Rating attaches to any div, span or table cell on your page in one line of code to create a fully customizable CSS based ratings widget. Each control can optionally post an Ajax request when it's value is set, or can interact with text inputs or select elements that are already on your page. It uses four (customizable) class names to determine each link's state:

• rating_off
• rating_half
• rating_on
• rating_selected

HTML

    <!-- you can pre-populate a rating with the HTML the rating will generate-->  
    <div id="rating_one" class="rating_container">  
        <a href="#" class="rating_on"></a>  
        <a href="#" class="rating_on"></a>  
        <a href="#" class="rating_half"></a>  
       <a href="#" class="rating_off"></a>  
        <a href="#" class="rating_off"></a>  
    </div>     
   <!-- or just provide an empty container -->  
   <div id="rating_two" class="rating_container"></div>  

JavaScript

var rating_one = new Control.Rating('rating_one');
 var rating_two = new Control.Rating('rating_two',{value: 2.4});
 var rating_four = new Control.Rating('rating_four',{value: 4,rated: true});
 var rating_five = new Control.Rating('rating_five',{value: 6,rated: false,max:9});
 var rating_six = new Control.Rating('rating_six',{
  value: 6,
  rated: false,
  min: 3,
  max: 12,
  multiple: true,
  reverse: true
 });
 var rating_seven = new Control.Rating('rating_seven',{
  input: 'rating_seven_input',
  multiple: true
 });
 var rating_eight = new Control.Rating('rating_eight',{
  input: 'rating_eight_select',
  multiple: true
 });

  });

CSS

 .rating_container {
  clear:both;
 }

 .rating_container a {
  float:left;
  display:block;
  width:25px;
  height:25px;
  border:0;
  background-image:url("rating.gif");
 }
 
 .rating_container a.rating_off {
  background-position:0 0px;
 }
 
 .rating_container a.rating_half {
  background-position:0 -25px;
 }
 
 .rating_container a.rating_on {
  background-position:0 -50px;
 }
 
 .rating_container a.rating_selected {
  background-position:0 -75px;
 }

DOM Modifications

Control.Rating.initialize() will insert a series of a elements inside of the container you pass in, if the a elements to not already exist.

Class

Instance

Options