The rate plugin replaces radio buttons with a more visually attractive control using images of your choice. It works with ratings systems using whole numbers on a scale of 1 - n.
With the plugin, this:
can be converted easily to this:
The plugin displays existing ratings and provides the ability to set the rating by clicking on the images. It was written by Kevin Rattan, requires jQuery 1.7+ and is distributed freely under the GNU and MIT licenses.
The plugin has a single method .rate() which accepts an object literal argument, e.g.:
$('#ratingSection').rate({ innerElm: '.ReplaceMe', imagePath: 'icons/' });
Options can also be set using the metadata plugin. Check out the following samples:
A valid jQuery selector that matches all the elements to be hidden and replaced by the images (e.g the id of a containing element such as a div or fieldset)
Default value: '#ratingRadios'
The path to the images
Default value: '/Content/Icons/'
The image to be shown for numbers greater than the current rating (either as selected, or in relation to the mouse's current position)
Default value: 'False.png'
The image to be shown for numbers less than or equal to the current rating (either as selected, or in relation to the mouse's current position)
Default value: 'True.png'
The width of the images in pixels (without 'px')
Default value: '21'
The number of radio buttons to be replaced (the rating will be between 1 and this number)
Default value: '5'
The value of the name attribute of the group of radio buttons to be replaced
Default value: 'rating']