The Rate Plugin

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:

• Example using defaults
• Example overriding defaults
• Example integrating the metadata plugin

Download

The plugin has the following options

innerElm

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'

imagePath

The path to the images

Default value: '/Content/Icons/'

imageZero

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'

imageOne

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'

imageWidth

The width of the images in pixels (without 'px')

Default value: '21'

ratingMax

The number of radio buttons to be replaced (the rating will be between 1 and this number)

Default value: '5'

[radioName - DEPRECATED - no longer used in version 1.3

The value of the name attribute of the group of radio buttons to be replaced

Default value: 'rating']