Default options:
$('#star').raty();
<div id="star"></div>
<div id="star"></div>
Started with a score and read only value:
$('#star').raty({
readOnly : true,
score : 2
});
<div id="star"></div>
readOnly : true,
score : 2
});
<div id="star"></div>
Starting with a callback:
$('#score').raty({
score: function() {
return $(this).attr('data-rating');
}
});
<div id="star" data-rating="3"></div>
score: function() {
return $(this).attr('data-rating');
}
});
<div id="star" data-rating="3"></div>
A hint for no rated elements when it's read-only:
$('#star').raty({
readOnly : true,
noRatedMsg : 'anyone rated this product yet!'
});
<div id="star"></div>
readOnly : true,
noRatedMsg : 'anyone rated this product yet!'
});
<div id="star"></div>
Custom score name and a number of stars:
$('#star').raty({
scoreName : 'entity.score',
number : 10
});
<div id="star"></div>
scoreName : 'entity.score',
number : 10
});
<div id="star"></div>
Using click function:
$('#star').raty({
click: function(score, evt) {
alert('ID: ' + $(this).attr('id') + '\nscore: ' + score + '\nevent: ' + evt);
}
});
<div id="star"></div>
click: function(score, evt) {
alert('ID: ' + $(this).attr('id') + '\nscore: ' + score + '\nevent: ' + evt);
}
});
<div id="star"></div>
- The argument score is the selected value;
- The argument evt is the click event;
- You can mension the star element (DOM) itself using 'this'.
Default cancel button:
$('#star').raty({
cancel: true
});
<div id="star"></div>
cancel: true
});
<div id="star"></div>
- The score value for the click on cancel button is null.
Custom cancel button:
$('#star').raty({
cancel : true,
cancelHint : 'remove my rating!',
cancelPlace : 'right',
click : function(score, evt) {
alert('score: ' + score);
}
});
<div id="star"></div>
cancel : true,
cancelHint : 'remove my rating!',
cancelPlace : 'right',
click : function(score, evt) {
alert('score: ' + score);
}
});
<div id="star"></div>
Half star voting:
$('#star').raty({
half : true,
score : 3.3
});
<div id="star"></div>
half : true,
score : 3.3
});
<div id="star"></div>
- You can disable the 'halfShow' option to just vote with half star but not show it.
- If 'halfShow' is disabled, then score >= x.6 will be rounded up visually.
- The interval can be:
-- Rounded down: [x.00 .. x.25]
-- Half star: [x.26 .. x.75]
-- Rounded up: [x.76 .. x.99]
Custom round option:
$('#star').raty({
score : 1.26,
round : { down: .25, full: .6, up: .76 }
});
<div id="star"></div>
score : 1.26,
round : { down: .25, full: .6, up: .76 }
});
<div id="star"></div>
- This example use the default round values;
- down: with halfShow enabled, score <= x.25 will be rounded down; (inclusive)
- up: with halfShow enabled, score >= x.76 will be rounded up; (inclusive)
- down-up: with halfShow enabled, score > x.25 and score < .76 will be half star; (inclusive)
- full: with halfShow disabled, score >= x.6 will be rounded up; (inclusive)
Custom hint and icons:
$('#star').raty({
hints : ['a', '', null, 'd', '5'],
starOn : 'medal-on.png',
starOff : 'medal-off.png'
});
<div id="star"></div>
hints : ['a', '', null, 'd', '5'],
starOn : 'medal-on.png',
starOff : 'medal-off.png'
});
<div id="star"></div>
- To display the number of the star, set null.
Range of custom icons:
$('#star').raty({
iconRange: [
{ range: 2, on: 'face-a.png', off: 'face-a-off.png' },
{ range: 3, on: 'face-b.png', off: 'face-b-off.png' },
{ range: 4, on: 'face-c.png', off: 'face-c-off.png' },
{ range: 5, on: 'face-d.png', off: 'face-d-off.png' }
]
});
<div id="star"></div>
iconRange: [
{ range: 2, on: 'face-a.png', off: 'face-a-off.png' },
{ range: 3, on: 'face-b.png', off: 'face-b-off.png' },
{ range: 4, on: 'face-c.png', off: 'face-c-off.png' },
{ range: 5, on: 'face-d.png', off: 'face-d-off.png' }
]
});
<div id="star"></div>
- It's a array of objects where each one represents a custom icon;
- The value range is until wich position the icon will be displayed;
- The value on is the active icon;
- The value off is the inactive icon;
- The sequence of the range interval should be in a ascending order;
- If the value on or off is omitted then the attribute starOn or starOff will be used.
Bigger icon:
$('#star').raty({
cancel : true,
cancelOff : 'cancel-off-big.png',
cancelOn : 'cancel-on-big.png',
half : true,
size : 24,
starHalf : 'star-half-big.png',
starOff : 'star-off-big.png',
starOn : 'star-on-big.png'
});
<div id="star"></div>
cancel : true,
cancelOff : 'cancel-off-big.png',
cancelOn : 'cancel-on-big.png',
half : true,
size : 24,
starHalf : 'star-half-big.png',
starOff : 'star-off-big.png',
starOn : 'star-on-big.png'
});
<div id="star"></div>
- You can specify your own width as following: width: 120.
Group of elements:
$('.star').raty();
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
- The ID is optional and must be unique;
- If you don't pass a ID for the element, then it will be created.
Displaying hint in a target element:
$('#star').raty({
cancel : true,
cancelHint : 'none',
target : '#hint'
});
<div id="star"></div>
<div id="target"></div>
cancel : true,
cancelHint : 'none',
target : '#hint'
});
<div id="star"></div>
<div id="target"></div>
Displaying and keeping the score in a target element:
$('#star').raty({
cancel : true,
target : '#score',
targetKeep : true,
targetType : 'number'
});
<select id="target">
<option value="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
cancel : true,
target : '#score',
targetKeep : true,
targetType : 'number'
});
<select id="target">
<option value="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
- You can to choose the target types 'hint' or 'number'.
Setting default value to the target on mouseout:
$('#star').raty({
target : '#hint',
targetText : '--'
});
<div id="star"></div>
<div id="target"></div>
target : '#hint',
targetText : '--'
});
<div id="star"></div>
<div id="target"></div>
Displaying hint with format template:
$('#star').raty({
cancel : true,
cancelHint : 'Sure?',
target : '#hint',
targetFormat : 'your score: {score}',
targetText : 'none',
targetKeep : true
});
<div id="star"></div>
<div id="target"></div>
cancel : true,
cancelHint : 'Sure?',
target : '#hint',
targetFormat : 'your score: {score}',
targetText : 'none',
targetKeep : true
});
<div id="star"></div>
<div id="target"></div>
Using mouseover callback:
$('#star').raty({
cancel : true,
mouseover : function(score, evt) {
var target = $('#mouseover-target');
if (score === null) {
target.html('Boring!');
} else if (score === undefined) {
target.empty();
} else {
target.html('score: ' + score);
}
}
});
<div id="star"></div>
<div id="target"></div>
- The options target, targetFormat, targetKeep, targetText and targetType are abstractions of this callback.
cancel : true,
mouseover : function(score, evt) {
var target = $('#mouseover-target');
if (score === null) {
target.html('Boring!');
} else if (score === undefined) {
target.empty();
} else {
target.html('score: ' + score);
}
}
});
<div id="star"></div>
<div id="target"></div>
Half star voting precision:
$('#star').raty({
half : true,
precision : true,
size : 24,
starHalf : 'star-half-big.png',
starOff : 'star-off-big.png',
starOn : 'star-on-big.png'
target : '#precision-target'
targetType : 'number'
});
<div id="star"></div>
<div id="target"></div>
half : true,
precision : true,
size : 24,
starHalf : 'star-half-big.png',
starOff : 'star-off-big.png',
starOn : 'star-on-big.png'
target : '#precision-target'
targetType : 'number'
});
<div id="star"></div>
<div id="target"></div>
Without space between stars:
$('#star').raty({
space: false
});
<div id="star"></div>
space: false
});
<div id="star"></div>
Single icon:
$('#star').raty({
single: true
});
<div id="star"></div>
single: true
});
<div id="star"></div>
Directed actions with public functions:
love:
happy:
your last rate:
$('.star').raty({
half : true,
click : function(score, evt) {
$(this).raty('cancel');
$('#result').raty('score', score);
}
});
<div class="star"></div>
<div class="star"></div>
<div id="result"></div>
half : true,
click : function(score, evt) {
$(this).raty('cancel');
$('#result').raty('score', score);
}
});
<div class="star"></div>
<div class="star"></div>
<div id="result"></div>
- All functions have a optional second parameter to specify which container will be executed;
- You can pass a ID or a class to be the target of the action;
- If the ID or class are not specified, then the last element Raty will be takes.
Functions Demo:
settings:
set
Changing the settings globally:
$.fn.raty.defaults.starOn = 'star-on.gif';
$.fn.raty.defaults.starOff = 'star-off.gif';
- You can change any option mention the scope $.fn.raty.defaults. + option_name;$.fn.raty.defaults.starOff = 'star-off.gif';
- This setup must be called before you bind the Raty, of course.
Default options:
cancel: false
If will be showed a button to cancel the rating.
cancelHint: 'cancel this rating!'
The hint information.
cancelHint: 'cancel this rating!'
The hint information.
cancelOff: 'cancel-off.png'
Name of the cancel image off.
cancelOn: 'cancel-on.png'
Name of the cancel image on.
cancelPlace: 'left'
Position of the cancel button.
click: undefined
Function that returns the selected value.
half: false
Enables half star selection.
halfShow: true
Enables half star display.
hints: ['bad', 'poor', 'regular', 'good', 'gorgeous']
List of names that will be used as a hint on each star.
iconRange: undefined
List of object that represent each icon with position and names.
noRatedMsg: 'not rated yet'
A hint for no rated elements when it's read-only.
number: 5
Number of stars that will be presented.
path: 'img/'
A range of custom icons that you can set.
precision: false
Enables the selection of a precision score.
readOnly: false
If the stars will be read-only.
round: { down: .25, full: .6, up: .76 }
Configuration to set the round rules.
score: undefined
Number of stars to be selected.
scoreName: 'score'
Name of the hidden field that holds the score value.
single: false
Enables the single star selection.
space: true
Puts space between the stars.
size: 16
The icons size.
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 rating will be displayed.
targetFormat: '{score}'
Template to interpolate the score with some thing.
targetKeep: false
If the last choose value will be keeped on mouseout.
targetText: ''
Default value when there is no score or targetKeep is off.
targetType: 'hint'
What display on target element hint or number.
width : undefined
The container width of the stars.
Functions:
$('#star').raty('score');
Recovers the current score or undefined for no rated. Class returns an array of score
$('#star').raty('score', 3);
Set the score with 3 stars.
$('#star').raty('click', 2);
Click on the second star of the Raty with ID called 'raty'.
$('.star').raty('readOnly', true);
Adjusts all Raty with class called 'raty' for read-only.
$('#star').raty('cancel', true);
Cancel the rating. The second optional parameter enable thes click callback.
$('#star').raty('reload');
Reload the rating with the current configuration.
$('#star').raty('set', { number: 10 });
Reload the rating applying new configurations.