RateIt plugin

Prerequisites

In order to use RateIt you'll need:

• jQuery 1.4.3 or newer.
• jquery.rateit.min.js, rateit.css, delete.gif, star.gif - Download RateIt
• Place a reference to the rateit.css stylesheet into the page head.
• Place a script reference to jquery.rateit.js before your </body> tag.

Options

Examples

• 1) Basic usage

              <div class="rateit">
              </div>
              

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

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

  Toggle Backing Field visibility

• 2b) Progressive enhancement (using select)

  Bad OK Great Excellent

              <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

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

• 4) More settings

              <input type="range" value="0" step="0.25" id="backing4">
              <div class="rateit" data-rateit-backingfld="#backing4" data-rateit-resetable="false"
                  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('hover', 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

              <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

  <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:

  Get value Set value
  Get max value Set max value
  Get step size Set step size
  Get readonly value Change readonly

  	            <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'))">Change readonly</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('hover', 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('hover', function (event, value) { $(this).attr('title', tooltipvalues[value-1]); });
              </script>