4.3.0 • Published 10 days ago
raty-js v4.3.0
Raty - A Star Rating Plugin.
Rating for Rails?
It's Rating: https://github.com/wbotelhos/rating :star:
Help
- Check the Tutorial to learn about all available features.
- If you're migrating from
v3tov4check the Upgrade document.
Usage with Image
- raty.js
- star-off.png
- star-on.png
<script src="raty.js"></script>
<div data-raty></div>const raty = new Raty(document.querySelector('[data-raty]'));
raty.init();Usage with Font
- raty.css
- raty.eot|svg|ttf|woff
- raty.js
<link rel="stylesheet" href="raty.css">
<script src="raty.js"></script>
<div data-raty></div>new Raty(document.querySelector('[data-raty]'), { starType: 'i' });Options
| Property | Default | Description |
|---|---|---|
cancelButton | false | Creates a cancel button to cancel the rating. |
cancelClass | 'raty-cancel' | Name of cancel's class. |
cancelHint | 'Cancel this rating!' | The cancel's button hint. |
cancelOff | 'cancel-off.png' | Icon used on active cancel. |
cancelOn | 'cancel-on.png' | Icon used inactive cancel. |
cancelPlace | 'left' | Cancel's button position. |
click | undefined | Callback executed on rating click. |
half | false | Enables half star selection. |
halfShow | true | Enables half star display. |
hints | ['bad', 'poor', 'regular', 'good', 'gorgeous'] | Hints used on each star. |
iconRange | undefined | Object list with position and icon on and off to do a mixed icons |
iconRangeSame | false | All icons prior to selection will be the same as the selection. |
mouseout | undefined | Callback executed on mouseout. |
mouseover | undefined | Callback executed on mouseover. |
noRatedMsg | 'Not rated yet!' | Hint for non rated elements when it's readOnly. |
number | 5 | The number of stars that will be presented. |
numberMax | 20 | Max number of stars star the option number will create. |
path | undefined | A global path where the icon will be found. |
precision | false | Enables the selection of a precise score. |
readOnly | false | Turns the rating read-only. |
round | { down: .25, full: .6, up: .76 } | Includes value attributes to do the score rounding math. |
score | undefined | Initial rating. |
scoreName | 'score' | Name of the hidden field that holds the score value. |
single | false | Enables single star selection. |
space | true | Puts space between the icons. |
starHalf | 'star-half.png' | The name of the half star image. |
starOff | 'star-off.png' | Name of the star image off. |
starOn | 'star-on.png' | Name of the star image on. |
target | undefined | Element selector where the score will be displayed. |
targetFormat | '{score}' | Template to interpolate the score in. |
targetKeep | false | If the last rating value will be kept on mouseout. |
targetScore | undefined | Score field target avoiding hidden field creation |
targetText | '' | Default text in a target. |
targetType | 'hint' | Choose if target will receive a hint or the score number |
starType | 'img' | Element used to represent a star. |
Functions
To call some function, first, save the Raty instance on a variable and then call the functions:
var raty = new Raty(document.querySelector('[data-raty]'));| Function | Description |
|---|---|
raty.score() | Get the current score. |
raty.score(number) | Set a score. |
raty.click(number) | Click on a star. |
raty.readOnly(boolean) | Change the read-only state. |
raty.cancel(boolean) | Cancel the rating. The last param force the click callback. |
raty.move(number) | Move the mouse to the given score point position. |
Build
gulp 'amd'
gulp 'umd'
gulp 'commonjs'
gulp 'systemjs'
gulp 'es6'
gulp 'es5'
gulp 'es5-test'