Raty是一个简单、灵活的JavaScript插件，它可以将任何DIV元素变成一个完全可配置的星级组件，并具有以下高级功能：

特征：

• 分数星形填充。
• 允许将任何图像或图标字体用于星形符号。
• 评级回调。
• 允许无限数量的星星。
• 无分级消息。
• 跨浏览器。
• 大量定制选项和API。
• 兼容jQuery和Vanilla JavaScript（v4.0+）。

参见：

• JavaScript和纯CSS中的10个最佳评级系统

如何使用：

1.要使用此插件，您必须首先在网页中加载Raty插件的文件。

<!-- 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.创建一个容器，用于放置星级评定组件。

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

3.调用插件会将您刚刚创建的DIV容器变成具有默认设置的基本星级组件。

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

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

4.通过覆盖默认选项来自定义星级评定组件，如下所示：

// 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方法。

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

更新日志：

版本4.1.0（2023-01-15）

• jQuery依赖项被删除，因此启动Raty的语法被更改

预览截图

jQuery和Vanilla JavaScript 全功能星级评定插件 Raty