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.
- It turns a collection of radio boxes into a neat star-rating control.
- 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.
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.
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 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.
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
- No built in support for rating count and updated rating result
- No built in support for a failed rating
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!
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
how to implement Show the love rating system like amypink.com
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.
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.
Minified size: 3.35KB (1.15 bytes when gzipped). Tested on: IE7-9, Chrome 7, Firefox 3.6, Opera 10.63