jQuery Ratings
Plugin that can be configured via data- attributes or JavaScript. See it in action!
Quick Start | Configuration | Methods | Events
Quick Start
By default, the plugin will find any elements that have the data-ratings attribute.
<div> <span id="ratings-1" data-ratings='{"max": 5, "value": 0}'></span> </div>
Configuration
The configuration object accepts the following properties:
| Property | Type | Default |
|---|---|---|
| allowDecimals | Boolean | false |
| enabled | Boolean | true |
| max | Number | 5 |
| icons | Object | {"empty": "[SVG]", "full": "[SVG]"} |
| value | Number | 0 |
allowDecimals (Boolean)
Determines if the ratings will allow halves (.5) values. Default: false.
enabled (Boolean)
Determines if the ratings are clickable/draggable. Default: true.
max (Number)
The max number the rating can have. Default: 5.
icons (Object)
empty (String)
HTML string or selector that points to an element to use as the template. This value is used when displaying a rating that has not been selected.
full (String)
HTML string or selector that points to an element to use as the template. This value is used when displaying a rating that has been selected.
value (Number)
The initial value of the ratings.
Quick Start | Configuration | Methods | Events
Methods
| Method | Parameters | Description |
|---|---|---|
| disable | silent (Boolean) | Sets the configuration property enabled to false. |
| enable | silent (Boolean) | Sets the configuration property enabled to true. |
| get | property (String) | Retrieves the specified configuration property. |
| max | value (Number), silent (Boolean) | Sets the configuration property max. |
| redraw | silent (Boolean) | Redraws the ratings UI. |
| value | value (Number), silent (Boolean) | Set the configuration property value. |
disable
silent (Boolean) Call without triggering events.
Sets the configuration property enabled to false. Triggers the ratings:disabled event. Specifying silent to true will prevent the event trigger.
$('#my-ratings').on('ratings:disabled', function () { console.log('#my-ratings disabled'); }); $('#my-ratings').ratings('disable');enable
silent (Boolean) Call without triggering events.
Sets the configuration property enabled to true. Triggers the ratings:enabled event. Specifying silent to true will prevent the event trigger.
$('#my-ratings').on('ratings:enabled', function () { console.log('#my-ratings enabled'); }); $('#my-ratings').ratings('enable');get
property (String) The property to retrieve.
Retrieves the specified configuration property.
console.log($('#my-ratings').ratings('get', 'value'));max
value (Number)
silent (Boolean) Call without triggering events.
Sets the configuration property max. Triggers the ratings:update and ratings:update.max events. Specifying silent to true will prevent the event triggers.
$('#my-ratings').ratings('max', 6);redraw
silent (Boolean) Call without triggering events.
Clears the HTML of the rating and redraws it. Trigges the ratings:redrawn event. Specifying silent to true will prevent the event trigger.
$('#my-ratings').on('ratings:redrawn', function () { console.log('#my-ratings redrawn'); }); $('#my-ratings').ratings('redraw');value
value (Number)
silent (Boolean) Call without triggering events.
Sets the configuration property value. Triggers the ratings:update and ratings:update.value events. Specifying silent to true will prevent the event triggers.
$('#my-ratings').ratings('value', 3);Quick Start | Configuration | Methods | Events
Events
ratings:change
Triggered after calling the value method. Passes the new value to the callback.
ratings:enabled
Triggered after calling the enable method. Passes the configuration object to the callback.
ratings:disabled
Triggered after calling the disable method. Passes the configuration object to the callback.
ratings:redrawn
Triggered after calling the redraw method. Passes the configuration object to the callback.
ratings:update
Triggered after calling the max or value method. Passes the configuration object to the callback.
Quick Start | Configuration | Methods | Events
