11 Best jQuery Star Rating Plugins & Tutorials

Enjoy the best jQuery star rating plugins and tutorials we found for you on web in 2010. For most recent list of such plugins visit our post written in 2013. If you find this information useful we are sure you’ll be interested to read about top jQuery Mobile development tutorials.

jQuery Star Rating Plugin

The Star Rating Plugin is a plugin for the jQuery Javascript library that creates a non-obstrusive star rating control based on a set of radio input boxes.

• 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 or disabled property), the plugin is a neat way of displaying star-like values without any additional code.

How to Build a Star Ratings jQuery Plugin

Almost all controls and features within jQuery are now built using the plugin architecture. It’s actually a very simple system, and jQuery provides some pretty good documentation to get you started. Like always, let’s start with an example of what we’re going to build. Below I’ve got two star ratings controls with differing amounts of stars – one with 10 and one with 5.

Star Rating Plugin for jQuery

An easy to use rating control. It takes a normal select box, and turns it into a rating that your users can click on. The select box is preserved so you can still bind on change, get, and set the value in the rating control. The image is controlled with CSS and a simple gif, so you can make it look like anything you need.

jQuery Raty

jQuery Raty is a plugin for creation of voting systems (Star Rating) in a simple and automatic way, writing just two lines. And today I’ll talk a little about it.

When the jQuery wasn’t famous, I started my first rating system using pure JavaScript. It was good, but it wasn’t a plugin. By passing the technologies, I tested some plugins, but were not satisfactory. The most of time were too much code to write, or so many CSS to customize or incompatible with Internet Explorer. Then I decided to create the jQuery Raty.

New jQuery Rater Plugin

The jQuery Star Rating widget is a neat control to add to your website. It has many options that allow you to easily customize it. However, it’s usage is based on a fully degradable form submission model which means you must use markup containing an option list. Unfortunately, this means it becomes quite complex to support a rating model that fires off an ajax request to submit a new rating. Therefore, the developer is left to worry about:

• Writing code on the server to generate the option list only for users that have not already rated
• If the user has already rated, the server must generate different markup, or set the widget to disabled
• The developer must write javascript to handle the widget callback and build an ajax request
• No built in support for rating count and updated rating result
• No built in support for a failed rating

jQuery Star Rating Plugin beta

Here is my quick and dirty re-creation of a star rating plugin. This is a fully degradable plugin that creates the Star Rating interface based on a simple form structure. I would love to hear your suggestions on how this could be made better. Feel free to contact me wil[dot]stuckey[at]gmail[dot]com, thanks!

jQuery Star Ratings Plugin

I needed a very simple jQuery Star Ratings Plugin, and what I found available out there just seemed too cluttered and complicated, so I came up with my own. The idea was to create something with the small amount of code possible, that would have two features: show rating, and allow for adding star rating to any type of form simply taking over a input filed

Favorite Rating with jQuery and Ajax

how to implement Show the love rating system like amypink.com

Simple Voting for WordPress with PHP and jQuery

Pretty basic script using PHP and jQuery to allow members who are signed in to click on a simple link to add their vote to a post.

Star Rating plug-in

This jQuery plugin is based on Wil Stuckey’s and John Resig’s work. The basic star rating plugin they came up with was great, but there were just afew things missing from it. There are a few other great jQuery rating plugins already available, but they weren’t exactly what I was looking for. They either don’t degrade gracefully or they use radio buttons for the form elements. Beyond that, I have never written a jQuery plugin before, so I thought this would be a excellent learning experience. I certainly know much more about jQuery and plugins now.

This sample keeps track of the number of submissions and binds the stars accordingly. This is just a simple session store, so it is quite basic. The ASPX pages for the example are included within the zip file. If you don’t use .NET, you may be able to recreate the pages quite easily (in PHP, ASP classic, JSP, whatever) as they really are quite basic. I simply wanted to recreate a data store but without all the intracacies to show how the plugin would work.

I added some options to the plugin:
– cancelSubmit: true (default) – determines whether or not cancel submits the form.
– disabled: false (default) – determines whether or not the form is read-only. You can also set the select lists disabled attribute to make the form read-only.
– position: “-16px -16px” (default) – this is the default CSS position of “on” stars. I don;t know if this is will be used much by anyone, but I thought if another image was to be – – used (rather than the stars provided) that exposing this may be a good idea. Maybe it isn’t? Who knows…
– success – this has a default callback function that throws up an alert message. You’ll definitely want to override this option.
– disableOnSubmit: false (default) – determines whether or not the form is disabled after submitting. This is useful if you only want users to vote once.

RateIt – a jQuery (star) rating plugin

Fast, Progressive enhancement, customizable (just swap out the images, or change some CSS), Unobtrusive JavaScript (using HTML5 data-* attributes), RTL support, supports as many stars as you’d like, and also any step size.

Minified size: 3.35KB (1.15 bytes when gzipped).  Tested on: IE7-9, Chrome 7, Firefox 3.6, Opera 10.63