jQuery Raty

A Star Rating Plugin
Default

You need just to have a div to build the Raty.

Score

Used when we want stars with a saved rating.

Score callback

If you need the starting score to be based on a dynamic value, you can to use callback for it. You can pass any value for it, not necessarily a data value, for example you can use a field value.

Score Name

Changes the name of the hidden score field.

Number

Changes the number of stars.

Number callback

You can receive the number of stars dynamic using callback to set it.

Number Max

Change the max number of stars that can be created.

Read Only

You can prevent users from voting. It can be applied with or without a score and all aditional stars will show the grey "hint" stars. Move the mouse over the stars to see:

Read Only callback

You can decide if the rating will be readOnly dynamically returning true of false on callback.

Not Rated Message

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. Hover the mouse over the star to see:

Enabled

The round rules are:

  • Down: score <= x.25 the star will be rounded down;
  • Half: score >= x.26 and <= x.75 the star will be a half star;
  • Up: score >= x.76 the star will be rounded up.
Disabled

The rules become:

  • Down: score < x.6 the star will be rounded down;
  • Up: score >= x.6 the star will be rounded up;
Round

You can customize the round values of the halfShow option. We changed the default interval [x.25 .. x.76], now x.26 will round down instead being the default half star. Remember that the full attribute is used only when halfShow is disabled. You can specify just the attribute you want to change and keep the others as their defaults.

Half

Enables the half star mouseover to make voting with half values possible.
If you want to vote with more precison than a half value, please check the option precision.

Star Half

Changes the name of the half star. Pay attention, when you want specify a different icon with a different directory, you must to set the path option to null to avoid prepending the star's origintal path to your path. You will then have to specify all other icons with their explicit original path.

Click

You can write a callback to handle the score and the click event on click events.
You can reference the Raty element (DOM) itself using this.

Click Prevent

If you return false into the callback, the click event will be prevented.

Hints

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.

Star Off and Star On

Changes the star icon to lightbulbs.

Cancel

Add a cancel button on the left side of the stars to cacel the score.
Inside the click callback the argument code receives the value null when we click on cancel button.

Cancel Hint

Like the stars, the cancel button has a hint too and you can change it.
Hover the mouse over the cancel button to see:

Cancel Place

Changes the cancel button to the right side.

Cancel off and Cancel On

Changes icon of the cancel button.

Icon Range

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.