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
