RateIt

1a) Basic usage

1 2	`<div` `class="rateit">` `</div>`

1a) Basic usage (inline element)

1 2	`<span` `class="rateit">` `</span>`

2a) Progressive enhancement (using HTML5 range input type)

1 2	`<input` `type="range"` `min="0"` `max="7"` `value="0"` `step="0.5"` `id="backing2">` `<div` `class="rateit"` `data-rateit-backingfld="#backing2"></div>`

2b) Progressive enhancement (using select)

<select id="backing2b">
    <option value="0">Bad</option>
    <option value="1">OK</option>
    <option value="2">Great</option>
    <option value="3">Excellent</option>
</select>
<div class="rateit" data-rateit-backingfld="#backing2b"></div>

3) Readonly and preset value

1	`<div` `class="rateit"` `data-rateit-value="2.5"` `data-rateit-ispreset="true"` `data-rateit-readonly="true"></div>`

4) More settings

<input type="range" value="4" step="0.25" id="backing4">
<div class="rateit" data-rateit-backingfld="#backing4" data-rateit-resetable="false"  data-rateit-ispreset="true"
    data-rateit-min="0" data-rateit-max="10">
</div>

5) Javascript interaction

<div class="rateit" id="rateit5" data-rateit-min="2">
</div>
<div>
    <span id="value5"></span>
    <span id="hover5"></span>
</div>
 
<script type="text/javascript">
    $("#rateit5").bind('rated', function (event, value) { $('#value5').text('You\'ve rated it: ' + value); });
    $("#rateit5").bind('reset', function () { $('#value5').text('Rating reset'); });
    $("#rateit5").bind('over', function (event, value) { $('#hover5').text('Hovering over: ' + value); });
</script>            

6) Javascript invocation

<input type="hidden" id="backing6">
<div id="rateit6">
</div>
 
<script type="text/javascript">
    $(function () { $('#rateit6').rateit({ max: 20, step: 2, backingfld: '#backing6' }); });
</script>

7a) Styling

You can change the styles of the plugin in a two ways.

You can change change the star.gif and delete.gif pictures (and perhaps the default starwidth, and starheight values in the javascript file). This will change the style everywhere.
You can change individual items, by adding a stylesheet with a few rules.

Here I've opted for the second option.

Inline code

1	`<div` `class="rateit bigstars"` `data-rateit-starwidth="32"` `data-rateit-starheight="32"></div>`

Style sheet

div.bigstars div.rateit-range
{
    background: url(star-white32.png);
    height: 32px;
}
 
div.bigstars div.rateit-hover
{
    background: url(star-gold32.png);
}
 
div.bigstars div.rateit-selected
{
    background: url(star-red32.png);
}
 
div.bigstars div.rateit-reset
{
    background: url(star-black32.png);
    width: 32px;
    height: 32px;
}
 
div.bigstars div.rateit-reset:hover
{
    background: url(star-white32.png);
}

7b) More styling

Here we use one big image (actually 3), with different dimensions. Not very pretty, but it conveys the message I hope.

Inline code

1	`<div` `class="rateit antenna"` `data-rateit-starwidth="11"` `data-rateit-starheight="25"></div>`

Style sheet

div.antenna div.rateit-range
{
    background: url(antenna-black.png) no-repeat;
    height: 25px;
}
 
div.antenna div.rateit-hover
{
    background: url(antenna-yellow.png) no-repeat;
}
 
div.antenna div.rateit-selected
{
    background: url(antenna-red.png) no-repeat;
}            

8) RTL support

Now we are in RTL mode. No changes needed to make this work.

9) Setting and Getting values

All properties can also be set on the fly. Here are a few examples:

<div class="rateit" id="rateit9">
</div>
<div>
    <button onclick="alert($('#rateit9').rateit('value'))">Get value</button>
    <button onclick="$('#rateit9').rateit('value', prompt('Input numerical value'))">Set value</button>
</div>
<div>
    <button onclick="alert($('#rateit9').rateit('max'))">Get max value</button>
    <button onclick="$('#rateit9').rateit('max', prompt('Input numerical value'))">Set max value</button>
</div>
<div>
    <button onclick="alert($('#rateit9').rateit('step'))">Get step size</button>
    <button onclick="$('#rateit9').rateit('step', prompt('Input numerical value'))">Set step size</button>
</div>
<div>
    <button onclick="alert($('#rateit9').rateit('readonly'))">Get readonly value</button>
    <button onclick="$('#rateit9').rateit('readonly',!$('#rateit9').rateit('readonly'))">Toggle readonly</button>
</div>   
<div>
    <button onclick="alert($('#rateit9').rateit('ispreset'))">Get ispreset value</button>
    <button onclick="$('#rateit9').rateit('ispreset',!$('#rateit9').rateit('ispreset'))">Toggle ispreset</button>
</div>   
<div>
    <button onclick="$('#rateit9').rateit('reset')">Reset</button>
</div>                           

10) Tooltip example

Using tooltips is easy. Just bind to the hover event, and do your thing. Shown here is the basic tooltip, but of course you can use any tooltip you'd like.

Basic numbers

<div class="rateit" id="rateit10">
</div>
 
<script type="text/javascript">
    $("#rateit10").bind('over', function (event,value) { $(this).attr('title', value); });
</script>       

Custom text

<div class="rateit" id="rateit10b" data-rateit-step="1">
</div>
 
<script type="text/javascript">
    var tooltipvalues = ['bad', 'poor', 'ok', 'good', 'super'];
    $("#rateit10b").bind('over', function (event, value) { $(this).attr('title', tooltipvalues[value-1]); });
</script>

11) AJAX example

Most times RateIt will be used using some Ajax. There are different ways of implementing it (with/without backing field, using data-* attributes etc.)

Server response:

Product X (id: 312)
RateIt:
Product Y (id: 423)
RateIt:
Product Z (id: 653)
RateIt:

Client

<div id="products">
   <div style="float:right; width:350px; border:1px solid #ccc; padding:1em;">
     <strong>Server response:</strong>
     <ul id="response">
      
     </ul>
     </div>
     <ul>
         <li><h4>Product X (id: 312)</h4>
         RateIt: <div data-productid="312" class="rateit"></div>
         </li>
         <li><h4>Product Y (id: 423)</h4>
         RateIt: <div data-productid="423" class="rateit"></div></li>
         <li><h4>Product Z (id: 653)</h4>
         RateIt: <div data-productid="653" class="rateit"></div>
         </li>
     </ul>
    
 </div>
 
 <script type ="text/javascript">
     //we bind only to the rateit controls within the products div
     $('#products .rateit').bind('rated reset', function (e) {
         var ri = $(this);
 
         //if the use pressed reset, it will get value: 0 (to be compatible with the HTML range control), we could check if e.type == 'reset', and then set the value to  null .
         var value = ri.rateit('value');
         var productID = ri.data('productid'); // if the product id was in some hidden field: ri.closest('li').find('input[name="productid"]').val()
 
         //maybe we want to disable voting?
         ri.rateit('readonly', true);
 
         $.ajax({
             url: 'rateit.aspx', //your server side script
             data: { id: productID, value: value }, //our data
             type: 'POST',
             success: function (data) {
                 $('#response').append('<li>' + data + '</li>');
 
             },
             error: function (jxhr, msg, err) {
                 $('#response').append('<li style="color:red">' + msg + '</li>');
             }
         });
     });
 </script>

Server (ASPX) super simplified

<%@ Page Language="C#" %>
<%
    //Get value
    float value = float.Parse(Request.Form["value"]);
    int productID = int.Parse(Request.Form["id"]);
 
    Response.Write(string.Format("You voted {0} on product: {1}.<br/>Time on server: {2}", value, productID, DateTime.Now.ToString()));
 
%>

12) Resizing

Sometimes we would like to resize the rating controls (perhaps based on screen size).
This is as easy as
a) adding a class to the rateit control, which would change the background image.
b) modifying the starwidth and starheigth properties.

The alternative styling is taken from example 7a) styling.

Pick a size:

  <div class="rateit" id="rateit12"></div>
  <p>Pick a size: 
    <select id="size_12">
        <option data-class="" data-size="16" selected>normal</option>
        <option data-class="bigstars" data-size="32">big</option>
    </select>
  </p>
 
  <script type="text/javascript">
    $('#size_12').change(function () {
      var option = $(this.options[this.selectedIndex]);
      $('#rateit12').removeClass('bigstars') //remove old class
                    .addClass(option.data('class'))  //add new class
                    .rateit('starwidth', option.data('size')) //change width
                    .rateit('starheight', option.data('size')); //change height
 
    });
</script>  

RateIt plugin

Prerequisites

Options

Examples

1a) Basic usage

1a) Basic usage (inline element)

2a) Progressive enhancement (using HTML5 range input type)

2b) Progressive enhancement (using select)

3) Readonly and preset value

4) More settings

5) Javascript interaction

6) Javascript invocation

7a) Styling

Inline code

Style sheet

7b) More styling

Inline code

Style sheet

8) RTL support

9) Setting and Getting values

10) Tooltip example

Basic numbers

Custom text

11) AJAX example

Product X (id: 312)

Product Y (id: 423)

Product Z (id: 653)

Client

Server (ASPX) super simplified

12) Resizing