jQuery Raty - A Star Rating Plugin

With default options:

$('#default').raty();

<div id="default"></div>

Started with a score and read only value:

$('#fixed').raty({
readOnly: true,
start: 2
});

<div id="fixed"></div>

A hint for no rated elements when it's read-only:

$('#anyone').raty({
readOnly: true,
noRatedMsg: 'anyone rated this product yet!'
});

<div id="anyone"></div>

With a custom score name and a number of stars:

$('#number').raty({
scoreName: 'entity.score',
number: 10
});

<div id="number"></div>

Using click function:

$('#click').raty({
  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').raty({
cancel: true
});

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

- The score value for the click on cancel button is null.

With a custom cancel button:

$('#cancel-custom').raty({
  cancel:       true
  cancelHint:   'remove my rating!',
  cancelPlace:  'right',
  click: function(score, evt) {
    alert('score: ' + score);
  }
});

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

Enabling half star:

$('#half').raty({
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:

$('#icon').raty({
  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:

$('#range').raty({
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:

$('#big').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="big"></div>

- You can specify your own width as following: width: 120.

With a group of elements:

$('.group').raty();

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

love:

happy:

your last rate:

$('.action').raty({
  half:  true,
  click: function(score, evt) {
    $.fn.raty.cancel('.action');
    $.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:

$('#target').raty({
  cancel:     true
  cancelHint: 'none'
  target:     '#hint'
});

<div id="target"></div>
<div id="hint"></div>

Displaying and keeping the score in a target element:

$('#target-number').raty({
  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>
</select>

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

$.fn.raty.start(3);

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.