Skip to content
Gidon edited this page Oct 20, 2016 · 5 revisions

Prerequisites

In order to use RateIt you'll need:

jQuery 1.6.0 or newer. (not included in download) jquery.rateit.min.js, rateit.css, delete.gif, star.gif (included in download) Place a reference to the rateit.css stylesheet into the page head. Place a script reference to jquery.rateit.min.js before your </body> tag.

Examples

See http://gjunge.github.io/rateit.js/examples/

Options

The following options can be set. See the online examples (or the one included in the download) in order to see different configuration utilizing these options.

HTML: data-rateit-value, JS: value = initial value (default: same as min)
HTML: data-rateit-min, JS: min = min value (default: 0).
HTML: data-rateit-max, JS: max = max value (default: 5).
HTML: data-rateit-step, JS: step = step size (default: 0.5)
HTML: data-rateit-backingfld, JS: backingfld = CSS selector to the backing field (default: null)
HTML: data-rateit-readonly, JS: readonly = whether or not is readonly (default: false)
HTML: data-rateit-ispreset, JS: ispreset = whether or not the current value is a preset value (default: false)
When this value is true, the value looks visually different than a normal value (using another layer in the sprite). The ispreset value gets set to false when the user makes a selection.
HTML: data-rateit-resetable, JS: resetable = when not readonly, whether to show the reset button (default: true)
HTML: data-rateit-starwidth, JS: starwidth = width of the star picture
HTML: data-rateit-starheight, JS: starheight = height of the star picture
NEW:
HTML: data-rateit-mode, JS: mode = display mode , either bg for traditional background image or font for using icon fonts (default: bg).
HTML: data-rateit-icon, JS: icon = the icon from the icon font to be used (default ★)

You can set RateIt options in many different ways:

HTML: on the rateit div, using the data-* attributes.
HTML: RateIt will get the corresponding values from the backingfield (When it is input type=rating it will use min, max and step, when it is a select it will calculate them by itself, with any other type it will just get their value).
JS: When creating a RateIt object you can add these options as an object into the first parameter ie. $('XX').rateit( { step : 1 , min : 2 } );.
JS: When a RateIt object exists, you can get/set values in the normal jQuery way: $('XX').rateit('min') to get a value, $('XX').rateit('min',3); to set a value.
And you can mix and match. The order of importance is from high to low: Backing field, data-*, JS options, JS defaults.

Backingfield options

For now only the SELECT backing field has additional options that have to be set on the backing field.
HTML: <select data-rateit-valuesrc="value|index">: = this defines how RateIt correlates the value of the plugin with the backingfield. Default is value, meaning it looks at the numerical value in the option[value]. Setting it to index, RateIt will look at the selectedIndex.

Events

RateIt triggers the following events:

rated (when a rating happened, get the rating via $(this).rateit('value'), or if you supplied a backing field, via its value, or via the second param of the callback)
reset (when the reset button was clicked).
over ( / hover until RateIt version 1.0.3) (when hovering over the element, the hover value is the second parameter of the event callback)
beforerated occurs before the item is actually rated. When calling preventDefault() it is possible to cancel the rating.
beforereset occurs before the item is actually reset. When calling preventDefault() it is possible to cancel the reset.

Bind to the events using:

$(XXX).bind('rated', function() { alert('rating: ' + $(this).rateit('value')); });  

or

$(XXX).bind('reset', function () { alert('I was reset'); } );  

or

$(XXX).bind('over', function (event, value) { alert('Hovering over: ' + value); } );  

or

$(XXX).bind('beforereset', function (event) { if(!confirm('Are you sure?')) { event.preventDefault(); } } );  

or

$(XXX).bind('beforerated', function (event,value) { if(!confirm('Are you sure you want to rate it: ' + value + ' stars?')) { event.preventDefault(); } } );  

##Methods

reset to revert rateit to it's initial state.
Call methods using:

$(XXX).bind('reset');

See the online examples for sample implementations of these events.

Clone this wiki locally