Full-featured Star Rating Plugin For jQuery - Raty

Raty is an easy, flexible jQuery plugin which turns any DIV elements into a fully configurable star rating component with the following advanced features:

Features:

• Fractional star fill.
• Allows to use any image or icon font for star symbols.
• Rating callbacks.
• Allows unlimited number of stars.
• No Rated Message.
• Cross-browser.
• Lots of customization options and API.

Basic usage:

1. To use this plugin, you first have to include jQuery library and then place the jQuery Raty plugin's files in the webpage.

<link rel="stylesheet" href="jquery.raty.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.raty.js"></script>

2. Create a container where you want to place the star rating component.

<div class="demo"></div>

3. Calling the plugin will turn the DIV container you just created into a basic star rating component with default settings.

$('.demo').raty();

4. Customize the star rating component by change/override the default options as shown below:

$('.demo').raty({

  // shows a cancel button to cancel the rating.
  cancel      : false        

  // CSS class for cancel button                                  
  cancelClass : 'raty-cancel' 

  // hint of cancel button
  cancelHint  : 'Cancel this rating!' 

  // icons for cancel button
  cancelOff   : 'cancel-off.png'
  cancelOn    : 'cancel-on.png'

  // position of cancel button
  cancelPlace : 'left'

  // fired on rating click
  click       : undefined 

  // enable half star selection
  half        : false 

  // enable half star
  halfShow    : true 

  // default hints of stars
  hints       : ['bad', 'poor', 'regular', 'good', 'gorgeous'] 

  // Object list with position and icon on and off to do a mixed icons.
  iconRange   : undefined  

  // fired on mouseout.
  mouseout    : undefined 

  // fired on mouseover
  mouseover   : undefined 

  // hint for no rated elements when it's readOnly.
  noRatedMsg  : 'Not rated yet!'       

  // number of stars             
  number      : 5       

  // max number of stars                                 
  numberMax   : 20                

  // a global locate where the icon will be looked.                           
  path        : undefined

  // enables the selection of a precision score.
  precision   : false          

  // enables readonly mode                                
  readOnly    : false 

  // included values attributes to do the score round math.
  round       : { down: .25, full: .6, up: .76 } 

  // initial rating
  score       : undefined 

  // name of the hidden field that holds the score value.
  scoreName   : 'score'

  // enables just a single star selection.
  single      : false                 

  // space between icons                         
  space       : true  

  // custom icons
  starHalf    : 'star-half.png' 
  starOff     : 'star-off.png'
  starOn      : 'star-on.png'

  // target container
  target      : undefined     

  // template to interpolate the score in.
  targetFormat: '{score}'   

  // if the last rating value will be keeped after mouseout.  
  targetKeep  : false

  // element selector where the score will be filled, instead of creating a new hidden field (scoreName option).
  targetScore : undefined       

  // default text setted on target.                               
  targetText  : ''             

  // choose if target will receive hint or 'score' type.                                
  targetType  : 'hint'

  // element used to represent a star.
  starType    : 'img'    

});

5. API methods.

// get the curren rating value
$('.demo').raty('score');

// set the value
$('.demo').raty('score', number);

// click on some value
$('.demo').raty('click', number); 


// toggle readonly mode
$('.demo').raty('readOnly', boolean); 

// cancel the rating
// The last param force the click callback.
$('.demo').raty('cancel', boolean); 

// reload the  plugin
$('.demo').raty('reload'); 

// update the options
$('.demo').raty('set', { option: value }); 

// destroy the plugin
$('.demo').raty('destroy'); 

// move the mouse to the given score point position.
$('.demo').raty('move', number);

Change log:

2018-01-09

• v2.8.0: Add support to configure options via $.data();

---

This awesome jQuery plugin is developed by wbotelhos. For more Advanced Usages, please check the demo page or visit the official website.