Star Rating Plugin v2.2

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

Previous versions: 1.1, 2.0, 2.1

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)
• NEW (20-Mar-08): Now supports half-star, third-star, quater-star, etc... Not additional code required. No additional images required.
• NEW (31-Mar-08): Two new events, hover/blur (arguments: [value, linkElement])

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

$('.auto-submit-star').rating({
  callback: function(value, link){
    alert(value);
  }
});

$('.hover-star').rating({
  focus: function(value, link){
    var tip = $('#hover-test');
    tip[0].data = tip[0].data || tip.html();
    tip.html(link.title || 'value: '+value);
  },
  blur: function(value, link){
    var tip = $('#hover-test');
    $('#hover-test').html(tip[0].data || '');
  }
});

<input class="star {half:true}"

<input class="star {split:3}"

<input class="star {split:2}"

<input class="star {split:2}"

<input class="star {split:4}"

<input class="star {split:4}"

Download

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

• Get yourself jQuery - See jQuery's Official Website
• Download the star rating plugin (compressed - 2kb) and the star rating CSS
• Save the images used by the control: (right click » save as...)

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.1
• 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...

Enter your search terms Submit search form