star-rating-svg是一款基于SVG的jQuery星级评分插件。该星级评分插件使用简单，并提供大量的配置参数来设置评分效果，通过回调函数来获取用户点击的星星数量。它的特点还有：

  • 使用SVG制作，无图片。
  • 可以自定义尺寸。
  • 可以自定义颜色。
  • 可以选择半颗星星或整颗星星。
  • 可以设置显示的星星的数量。
  • 可以为指定的星星设置渐变背景色。
  • 可以设置星星的描边宽度和颜色。
  • 可以通过配置参数或data属性设置初始星级数量。
  • 通过回调函数获取用户点击的星星数量。
  • 支持只读模式。

使用方法

使用该星级评分插件需要在页面中引入star-rating-svg.css、jquery和jquery.star-rating-svg.js文件。

<link rel="stylesheet" type="text/css" href="star-rating-svg.css">
<script src="jquery.min.js"></script>
<script src="jquery.star-rating-svg.js"></script>
HTML结构

可以使用一个<div>作为该星级评分的容器。

<div class="my-rating"></div>
初始化插件

在页面DOM元素加载完毕之后，可以通过starRating()方法来初始化该星级评分插件。

$(".my-rating").starRating({
    starSize: 25,
    callback: function(currentRating, $el){
        // make a server call here
    }
});

配置参数

参数 默认值 描述
totalStars 5 显示的星星的数量
initialRating 0 初始化时选择的星星的数量
starSize 40 星星的尺寸，单位像素
useFullStars false 是否只能选择整颗星星，如果为true，则不能选择半颗星星
emptyColor lightgray 空星星的颜色
hoverColor orange 鼠标滑过星星时的颜色
activeColor gold 鼠标点击后星星的颜色
useGradient true 激活的星星使用渐变色
starGradient {start: '#FEF7CD',
end: '#FF9511'}		 定义渐变的开始和结束颜色
readOnly false 是否为只读状态
disableAfterRate true 在星星被选择之后移除该星星的所有事件
strokeWidth 0 定义描边的宽度，0表示无描边
strokeColor black 定义描边的颜色

方法

方法 描述
unload 卸载插件和它的所有事件 
$('your-selector').starRating('unload')

回调函数

名称 参数 描述
callback rating, DOM元素 当星星被选择时触发 
$('your-selector').starRating({
    callback: function(currentRating, $el){
        // do something after rating
    }
});

star-rating-svg星级评分插件的github地址为：https://github.com/nashio/star-rating-svg