在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

jQuery星级评分插件

分类:插件代码 更新时间:2019-03-04 浏览次数:1191

代码简介

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

浏览器兼容

Chrome、Firefox、Opera、Safari、IE9+

使用方法

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

<linkrel="stylesheet"type="text/css"href="star-rating-svg.css">
<scriptsrc="jquery.min.js"></script>

<scriptsrc="jquery.star-rating-svg.js"></script>


可以使用一个<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
    }
});  

问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!