Resumé

JQuery Rating Plugin per HTML5

Cristian Merighi (venerdì 19 agosto 2011)

Un esempio di plugin jQuery in grado di sfruttare le potenzialità del canvas HTML5.

Questo articolo è da considerarsi obsoleto. Alcune funzionalità potrebbero non essere più disponibili e non è possibile aggiungere commenti.

Primo articolo su un plugin jQuery che contempla l'utilizzo del canvas (per i browser che supportano HTML5: ovvero ormai tutti).

Si tratta del classico, onnipresente controllino per il rating. La versione che ho sviluppato e che è oggetto della presente esposizione è lo stesso attualmente visibile nel form di feedback a pié pagina.
È limitato all'input (ovvero non mostra il rating complessivo attuale) oltre a mancare di altre funzionalità che mi riservo - eventualmente - di implementare in futuro.
Per il resto è disponibile una DEMO grazie alla quale testarne il comportamento.

Il codice è scaricabile (anche in versione minified) tramite appositi links a piede di questo articolo.
Di seguito un minimo di documentazione per l'utilizzo:

Utilizzo

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

options (english):

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')