If you like this, digg it!

Star Rating Plugin v2.0

Version: 2.0 | Download | Official Project Page | jQuery Library | Web Design London

 

This is an archived copy of this plugin, click here for the latest version

 

To Support this project just checkout a related website:

The story

As far as I know, this is how it goes...

  • It all started with Will Stuckey's jQuery Star Rating Super Interface!
  • The original then became the inspiration for Ritesh Agrawal's Simple Star Rating System, which allows for a GMail like star/un-star toggle.
  • This was followed by several spin-offs... (one of which is the Half-star rating plugin)
  • Then someone at PHPLetter.com modified the plugin to overcome the issues - then plugin was now based on standard form elements, meaning the interface would still work with Javascript disabled making it beautifully downgradable.
  • Then I came along and noticed a fundamental flaw with the latter: there could only be one star rating control per page. The rest of the story is what you will see below...
  • NEW (12-Mar-08): Then Keith Wood added some very nice functionality to the plugin: option to disable the cancel button, option to make the plugin readOnly and ability to accept any value (other than whole numbers)
 
 

What does it do?

  • It turns a collection of radio boxes into a neat star-rating control.
  • It creates the interface based on standard form elements, which means the basic functionality will still be available even if Javascript is disabled.
  • NEW (12-Mar-08): In read only mode (using the 'readOnly' option), the plugin is a neat way of displaying star-like values without any additional code
 
 

Installation

It's so easy, even my granny can do it: 

$(function(){ $('input[@type=radio].star').rating(); });
 
 

Test Suite

 
Test 1 - A blank form
Rating 1: (N/M/Y)

Rating 2: (10 - 50)

Rating 3: (1 - 7)
Rating 4: (1 - 5)

Rating 5: (1 - 5)

Rating 6 (readonly): (1 - 5)
    Test results:

Results will be displayed here
 
Test 2 - With defaults ('checked')
Rating 1: (N/M/Y, default M)

Rating 2: (10 - 50, default 30)

Rating 3: (1 - 7, default 4)
Rating 4: (1 - 5, default 1)

Rating 5: (1 - 5, default 5)

Rating 6 (readonly): (1 - 5, default 3)
    Test results:

Results will be displayed here
 
Test 3 - With callback
Rating 1: (1 - 3, default 2)
Code: 
$('.auto-submit-star').rating({
  callback: function(value, link){
    alert(value);
  }
});
     Test results:

Results will be displayed here
 
 

Download

You can download everything in one neat zip file (27kb, including this page), or...

  delete.gif:   star.gif:
 
 

What's next? Suggestions and feature requests...

Not sure... you tell me

Please report issues on the official project page: Issues for Multiple Star Rating Plugin

 
 

Credits Where credit is due

  • Diego A. - Author of this hybrid, SEO Consultant London
  • Keith Wood - The brain behind v2.0
  • Dean Edwards - Author of JS Packer used to compress the plugin
  • Will Stuckey, Ritesh Agrawal and everyone else who worked in the previous versions of the plugin - I'm not so good with research...
 
To Support this project just checkout a related website: