With default options:

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

<div id="fixed"></div>
A hint for no rated elements when it's read-only:
  readOnly:   true,
  noRatedMsg: 'anyone rated this product yet!'

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

<div id="number"></div>
Using click function:
  click: function(score, evt) {
    alert('ID: ' + this.attr('id') + '\nscore: ' + score + '\nevent: ' + evt);

<div id="click"></div>

- The argument score is the selected value;
- The argument evt is the click event;
- You can mension the star element itself using 'this'.
With a default cancel button:
  cancel: true

<div id="cancel"></div>

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

<div id="cancel-custom"></div>
Enabling half star:
  half:  true,
  start: 3.3

<div id="half"></div>

The interval can be:
- Rounded down: [x.00 ... x.25]
- Half star:    [x.26 ... x.75]
- Rounded up:   [x.76 ... x.99]
With a custom hint and icons:
  hintList:  ['a', '', null, 'd', '5'],
  starOn:    'medal-on.png',
  starOff:   'medal-off.png'

<div id="icon"></div>

- To display the number of the star, set null.
With a range of custom icons:
  iconRange: [['face-a.png', 2], ['face-b.png', 3], ['face-c.png', 4], ['face-d.png', 5]],
  starOff:   'face-off.png'

<div id="range"></div>

- It's a array of array where each inner array represents a custom icon;
- The second parameter is until where this icon will be displayed;
- The sequence of the range interval should be in a ascending order.
With a 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="big"></div>

- You can specify your own width as following: width: 120.
With a group of elements:

<div class="group"></div>
<div class="group"></div>
<div class="group"></div>

- The ID is optional and must be unique;
- If you don't pass a ID for the element, then it will be created.
Using directed actions with public functions:

your last rate:
  half:  true,
  click: function(score, evt) {
    $.fn.raty.start(score, '#result');

<div class="action"></div>
<div class="action"></div>

<div id="result"></div>

- All public 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.
Displaying the hint in a target element:

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

<div id="target"></div>
<div id="hint"></div>
Displaying and keeping the score in a target element:
  cancel:     true
  target:     '#score'
  targetKeep: true,
  targetType: 'number'

<select id="score">
  <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'.
Default options:
cancel:         false
If will be showed a button to cancel the rating.
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:          null
Function that returns the selected value.
half:           false
Enables half star display and selection.
hintList:       ['bad', 'poor', 'regular', 'good', 'gorgeous']
List of names that will be used as a hint on each star.
iconRange:      []
Name and position of the set icons.
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.
readOnly:       false
If the stars will be read-only.
scoreName:      'score'
Name of the hidden field that holds the score value.
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.
start:          0
Number of stars to be selected.
target:         null
Number of stars to be selected.
targetKeep:     false
If the last choose value will be keeped on mouseout.
targetType:     'hint'
What display on target element: hint or number.
width:           null
The container width of the stars.
Public functions:
Starts the last Raty with 3 stars later.
$.fn.raty.click(2, '#raty');
Click on the second star of the Raty with ID called 'raty' later.
$.fn.raty.readOnly(true, '.raty');
Adjusts all Raty with class called 'raty' for read-only later.
$.fn.raty.cancel('#raty', true);
Cancel the rating. The second parameter is optionally and enable the click callback.