Resumé

JQuery Rating HTML5 Plugin

Cristian Merighi () 0.00

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
  1. // to be used as extension for a <select> combobox!
  2. // (version 1.0)
  3. $('#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')
js file « pacem.rating.js (source code, ~17.7 kB)
js file « pacem.rating.min.js (minified, ~7.58 kB)

Take care. Bye.

feedback
 

Syndicate

Author

Cristian Merighi facebook twitter google+ youtube

Latest articles

Top rated

Archive

Where am I?

Author

Cristian Merighi facebook twitter google+ youtube

I'm now reading

Feeds