Full-featured Star Rating Plugin For jQuery & Vanilla JavaScript - Raty

File Size: 400 KB
Views Total: 9923
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Full-featured Star Rating Plugin For jQuery & Vanilla JavaScript - Raty

Raty is an easy, flexible JavaScript plugin that 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 an unlimited number of stars.
  • No Rated Message.
  • Cross-browser.
  • Lots of customization options and API.
  • Compatible with both jQuery and Vanilla JavaScript (v4.0+).

See Also:

How to use it::

1. To use this plugin, you first have to load the Raty plugin's files in the webpage.

<!-- Vanilla JS Version (V4+) -->
<link rel="stylesheet" href="raty.css">
<script src="raty.js"></script>

<!-- jQuery Version (V3) -->
<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.

// Vanilla JS Version (V4+)
new Raty(document.querySelector('.demo'), { 
    // options
});

// jQuery Version (V3)
$('.demo').raty({
  // options
});

4. Customize the star rating component by overrding the default options as shown below:

// shows a cancel button to cancel the rating.
cancelButton: 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: function(score, element, evt) {
  var objectInstance = this;
},

// 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, 
iconRangeSame: false,

// fired on mouseout.
mouseout: function(score, element, evt) {
  var objectInstance = this;
},

// fired on mouseover
mouseover: function(score, element, evt) {
  var objectInstance = this;
},

// 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',

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

// 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',

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);

Changelog:

v4.1.0 (2023-01-15)

  • The jQuery dependency was dropped, so the syntax to start Raty was changed

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