You need just to have a div to build the Raty.
<div></div>new Raty(document.querySelector('div'));Used when we want to represent a state.
new Raty(document.querySelector('div'), { score: 3 });If you need the initial score to be based on a dynamic value, you can use a callback for it. You can pass any value for it, not necessarily a data value, for example, you can use a field value.
new Raty(document.querySelector('div'), {
score: function() {
return 2 * 2;
}
});Changes the name of the hidden score field.
new Raty(document.querySelector('div'), { scoreName: 'entity[score]' });You can pass any data-* attribute via HTML and Raty will use it as an option.
<div data-read-only="true" data-score="3" data-score-name="teacher[teacher_categories][0][value]"></div>new Raty(document.querySelector('div'));Changes the number of stars.
new Raty(document.querySelector('div'), { number: 10 });You can receive the number of stars dynamic using a callback to set it.
new Raty(document.querySelector('div'), {
number: function() {
return 3;
}
});Change the max number of stars that can be created.
new Raty(document.querySelector('div'), {
numberMax: 5,
number: 100
});You can prevent users from voting. It can be applied with or without a score.
new Raty(document.querySelector('div'), { readOnly: true, score: 3 });You can decide if the rating will be readOnly dynamically returning true of false on callback.
new Raty(document.querySelector('div'), {
readOnly: function() {
return true;
}
});If readOnly is enabled and there is no score, the hint "Not rated yet!" will be shown for all stars. But you can change it.
new Raty(document.querySelector('div'), {
readOnly: true,
noRatedMsg: "I'm readOnly and I haven't rated yet!"
});You can represent a float score as a half star icon. This option is just to show the half star. If you want to enable voting with half star, check the option half.
The round options showed below are just for the icon, the score remains as a float.
The round rules are:
- Down: score <= x.25 the star will be rounded down;
- Half: score > x.25 and < x.76 the star will be a half star;
- Up: score >= x.76 the star will be rounded up.
new Raty(document.querySelector('div'), { score: 1.26 });When halfShow is disabled, only the option full (.6) is checked:
- Down: score < x.6 the star will be rounded down;
- Up: score >= x.6 the star will be rounded up;
new Raty(document.querySelector('div'), {
halfShow: false,
score: 1.59
});You can customize the round values of the halfShow option.
When halfShow is enabled, only down and up is used for round.
You can specify just the attribute you want to change and keep the others as their defaults.
new Raty(document.querySelector('div'), {
round: { down: .26, up: .76 },
score: 1.26
});Enables the half star voting. If you want to vote with more precision than a half value, check the option precision.
new Raty(document.querySelector('div'), {
half: true,
hints: [
['1/2 bad', 'bad'],
['1/2 poor', 'poor'],
['1/2 regular', 'regular'],
['1/2 good', 'good'],
['1/2 gorgeous', 'gorgeous'],
]
});Changes the name of the half star image.
When you want to specify a different icon with a different directory, you must to set the path option to null to prepending the star's original path to your path. You will then have to specify all other icons with their explicit original path.
new Raty(document.querySelector('div'), {
half: true,
starHalf: 'star-half-mono.png'
});You can change the star icons.
new Raty(document.querySelector('div'), {
cancelButton: true,
starOff: 'star-off-big.png',
starOn: 'star-on-big.png'
});You can write a callback to handle the score and the click event.
You can reference the Raty instance using this.
new Raty(document.querySelector('div'), {
click: function(score, element, evt) {
alert('score:' + score + "\nID: " + element.id + "\nevent: " + evt);
}
});If you return false into the callback, the click event will be prevented.
new Raty(document.querySelector('div'), {
click: function(score, element, evt) {
alert('Score will not change.')
return false;
}
});Changes the hint for each star by it position on array.
If you pass null, the score value of this star will be the hint.
If you pass undefined, this position will be ignored and receive the default hint.
new Raty(document.querySelector('div'), { hints: ['a', null, '', undefined, '*_*']});Changes the path where your icons are located. Set it only if you want the same path for all icons. Don't mind about the last slash of the path, if you don't put it, it will be setted for you.
new Raty(document.querySelector('div'), { path: 'assets/images' });Now we have the following full paths: assets/images/star-on.png, assets/images/star-off.png and so.
You can set the path dynamically using callback.
new Raty(document.querySelector('div'), {
path: function() {
return '/assets/vendor/raty';
}
});Changes the icons.
new Raty(document.querySelector('div'), {
starOff: 'off.png',
starOn: 'on.png'
});Adds a cancel button on the left side of the stars to cancel the score.
Inside the click callback the argument code receives the value null when we click on the cancel button.
new Raty(document.querySelector('div'), { cancelButton: true });Like the stars, the cancelButton button has a hint, and you can change it.
new Raty(document.querySelector('div'), {
cancelButton: true,
cancelHint: 'My cancel hint!'
});Changes the cancelButton button to the right side.
new Raty(document.querySelector('div'), {
cancelButton: true,
cancelPlace: 'right'
});Changes the on and off icon of the cancel button.
new Raty(document.querySelector('div'), {
cancelButton: true,
cancelOff: 'cancel-off.png',
cancelOn: 'cancel-on.png'
});Is an array of objects where each one represents a custom icon.
The range attribute is where the icon will be displayed (out of the five stars).
The on attribute is the active icon when hovering.
The off attribute is the default icon.
new Raty(document.querySelector('div'), {
iconRange: [
{ range: 1, on: '1.png', off: '0.png' },
{ range: 2, on: '2.png', off: '0.png' },
{ range: 3, on: '3.png', off: '0.png' },
{ range: 4, on: '4.png', off: '0.png' },
{ range: 5, on: '5.png', off: '0.png' }
]
});You can use an interval of the same icon jumping some number.
The range attribute must be in ascending order.
If the value on or off is omitted then the attribute starOn and starOff will be used.
new Raty(document.querySelector('div'), {
starOff: '0.png',
iconRange: [
{ range: 1, on: '1.png' },
{ range: 3, on: '3.png' },
{ range: 5, on: '5.png' }
]
});Now we have all off icons as 0.png, icons 1 and 2 as 1.png, icon 3 as 3.png and icons 4 and 5 as 5.png.
If you want to use the same icon as the selection in the prior icons, just enable this option.
new Raty(document.querySelector('div'), {
iconRange: [
{ range: 1, on: '1.png', off: '0.png' },
{ range: 2, on: '2.png', off: '0.png' },
{ range: 3, on: '3.png', off: '0.png' },
{ range: 4, on: '4.png', off: '0.png' },
{ range: 5, on: '5.png', off: '0.png' }
],
iconRangeSame: true
});Element to display the hints or the cancelButtonHint.
new Raty(document.querySelector('div'), {
cancelButton: true,
target: '[data-hint]'
});Your target can be a div.
<div data-hint></div>Your target can be a text field.
<input data-hint type="text" />Your target can be a textarea.
<textarea data-hint></textarea>Your target can be a select.
<select data-hint>
<option value="">--</option>
<option value="bad">bad</option>
<option value="poor">poor</option>
<option value="regular">regular</option>
<option value="good">good</option>
<option value="gorgeous">gorgeous</option>
</select>You can choose hint or score:
If you choose to see the score instead of the hints using the value score you will get the numerical value of the star.
For the cancelButton the value is empty.
new Raty(document.querySelector('div'), {
cancelButton: true,
target: '[data-hint]',
targetType: 'score'
});If you want the score to remain in the hint box after providing the rating, turn on this option.
new Raty(document.querySelector('div'), {
cancelButton: true,
target: '[data-hint]',
targetKeep: true
});Target will clear if you don't use the targetKeep option, after rolling the mouse away from the ratings. If you want a message to show by default you can use this option.
new Raty(document.querySelector('div'), {
target: '[data-hint]',
targetText: '--'
});You can choose a template to be merged with your hints and displayed in the target.
new Raty(document.querySelector('div'), {
target: '[data-hint]',
targetFormat: 'Rating: {score}'
});You can keep the score value inside the element, by default, or choose where to put it. If you change the score target, the default score field won't be created. It's not a target option for display only, it's the real current score data.
new Raty(document.querySelector('div'), {
targetScore: '[data-target]'
});You can handle events on mouseover. The arguments are the same as in the click callback. The options target, targetFormat, targetKeep, targetText and targetType are abstractions of this callback. You can do it by yourself.
new Raty(document.querySelector('div'), {
mouseover: function(score, element, evt) {
alert('score: ' + score + "\nID: " + element.id + "\nevent: " + evt);
}
});You can handle the action on mouseout. The arguments is the same of the mouseover callback.
new Raty(document.querySelector('div'), {
mouseout: function(score, element, evt) {
alert('score: ' + score + "\nID: " + element.id + "\nevent: " + evt);
}
});You can get the exact position of the cursor to get a precise score.
The score is still represented in full and half stars, but the score is saved as a float.
When you enable this option the half option is automatically enabled and targetType is changed to score.
new Raty(document.querySelector('div'), {
cancelButton: true,
cancelOff: 'cancel-off.png',
cancelOn: 'cancel-on.png',
path: 'raty/demo/images',
starHalf: 'star-half.png',
starOff: 'star-off.png',
starOn: 'star-on.png',
target: '#precision-hint',
targetKeep: true,
precision: true
});You can remove excess space between stars.
new Raty(document.querySelector('div'), { space: false });With this option, only the overed star will be turned on, the previous will keep as off.
new Raty(document.querySelector('div'), { single: true });Let you to change the star element type. Changing it from img to i, for example, changes from an image to a glyph. There is a sample stylesheet (src/raty.css) using a sample fonts (src/fonts/raty.[eot|svg|ttf|woff]).
To be easier to use, we replaced the dot (.) extension to a hyphen (-), so you do not need to change the original names, just set the names to your fonts.
new Raty(document.querySelector('div'), {
cancelButton: true,
half: true,
starType: 'i'
});