Resumé

JQuery Rating HTML5 Plugin

Cristian Merighi (Friday, August 19, 2011)

Sample jQuery plugin which also exploits HTML5 canvas drawing capabilities.

This article is obsolete. Some functionalities might not work anymore. Comments are disabled.

First article of mine about a jQuery plugin that involves HTML5 canvas (nowadays every browser is HTML5 compatible in its own fashion and every user should upgrade to one of those!).

It's the classic, ubiquitous, rating control. The one I developed and I'm about to describe is visible and usable in the footer's feedback form of each article.
Limited to the input interaction (it doesn't provides the overall rating value along with decimal figures), it also misses some other minor features that I will - eventually - implement in a near future.
An online DEMO is also available in order to experience the different capabilities.

Code is downloadable (also in a minified version) following the links at the bottom of this article.
Here it comes a bit of documentation:

Usage

// to be used as extension for a <select> combobox!
// (version 1.0) 
$('#select-combobox-id').rating({ options });

options:

useHtml5: Boolean (default: false)
maxValue: Number (number of stars, default: 5)
legendCaptions: Array (vector of rating cation strings, default: ['poor', 'weak', 'average', 'good', 'awesome'])
legendElement: DOMElement (element meant to contain the rating caption, default: null → a brand new element gets created at runtime)
legendCssClass: String (css class for the caption container when legendElement is null, default: pacem_RatingLegend)
startValue: Number (initial rating, default: 0)
resetButton: Boolean (whether show or not the button that resets the control to the startValue, default: true)
starSize: Number (width & height of a single star in pixels, default: 16)
emptyCssClass: String (css class for the unselected star, relevant only if useHtml5 is set to false. Default: pacem_StarEmpty)
overCssClass: String (css class for the selecting stars, relevant only if useHtml5 is set to false. Default: pacem_StarOver)
selectedCssClass: String (css class for the selected star, relevant only if useHtml5 is set to false. Default: pacem_StarSelected)
resetButtonCssClass: String (css class for the reset button, relevant only if useHtml5 is set to false. Default: pacem_ResetStar)
drawHtml5Star: Function (relevant only if useHtml5 is set to true, arguments: canvasContext, mode → 'empty'|'over'|'selected')
drawHtml5ResetButton: Function (relevant only if useHtml5 is set to true, arguments: canvasContext, mode → 'normal'|'over'|'pressed')