-
Notifications
You must be signed in to change notification settings - Fork 45
Home
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.
See http://gjunge.github.io/rateit.js/examples/
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.
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.
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.