Default options:

<div id="star"></div>
Started with a score and read only value:
  readOnly : true,
  score    : 2

<div id="star"></div>
Starting with a callback:
  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:
  readOnly   : true,
  noRatedMsg : 'anyone rated this product yet!'

<div id="star"></div>
Custom score name and a number of stars:
  scoreName : 'entity.score',
  number    : 10

<div id="star"></div>
Using click function:
  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:
  cancel: true

<div id="star"></div>

- The score value for the click on cancel button is null.
Custom cancel button:
  cancel      : true,
  cancelHint  : 'remove my rating!',
  cancelPlace : 'right',
  click       : function(score, evt) {
    alert('score: ' + score);

<div id="star"></div>
Half star voting:
  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:
  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:
  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:
  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:
  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:

<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:

  cancel     : true,
  cancelHint : 'none',
  target     : '#hint'

<div id="star"></div>
<div id="target"></div>
Displaying and keeping the score in a target element:
  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>

- You can to choose the target types 'hint' or 'number'.
Setting default value to the target on mouseout:

  target     : '#hint',
  targetText : '--'

<div id="star"></div>
<div id="target"></div>
Displaying hint with format template:

  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:

  cancel    : true,
  mouseover : function(score, evt) {
    var target = $('#mouseover-target');

    if (score === null) {
    } else if (score === undefined) {
    } 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.
Half star voting precision:

  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:
  space: false

<div id="star"></div>
Single icon:
  single: true

<div id="star"></div>
Directed actions with public functions:

your last rate:
  half  : true,
  click : function(score, evt) {
    $('#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:

Score 1 | Score 2 | Score 3 | Score 4 | Score 5
Click 1 | Click 2 | Click 3 | Click 4 | Click 5
ReadOnly (true) | ReadOnly (false)
Cancel | Cancel (trigger)
Reload | Score
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;
- 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.
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.
Reload the rating with the current configuration.
$('#star').raty('set', { number: 10 });
Reload the rating applying new configurations.