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){
}
});
|
配置参数
| 参数 |
默认值 |
描述 |
| 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 |
定义描边的颜色 |
方法
$('your-selector').starRating('unload')
|
回调函数
| 名称 |
参数 |
描述 |
| callback |
rating, DOM元素 |
当星星被选择时触发 |
$('your-selector').starRating({
callback: function(currentRating, $el){
}
});
|
star-rating-svg星级评分插件的github地址为：https://github.com/nashio/star-rating-svg
在线预览 网盘下载
郑重声明：
1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。
2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！
3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。
4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。
