star-rating-svg是一款基于SVG的jQuery星级评分插件。该星级评分插件使用简单,并提供大量的配置参数来设置评分效果,通过回调函数来获取用户点击的星星数量。它的特点还有:
- 使用SVG制作,无图片。
- 可以自定义尺寸。
- 可以自定义颜色。
- 可以选择半颗星星或整颗星星。
- 可以设置显示的星星的数量。
- 可以为指定的星星设置渐变背景色。
- 可以设置星星的描边宽度和颜色。
- 可以通过配置参数或data属性设置初始星级数量。
- 通过回调函数获取用户点击的星星数量。
- 支持只读模式。
使用方法
使用该星级评分插件需要在页面中引入star-rating-svg.css、jquery和jquery.star-rating-svg.js文件。
HTML结构
可以使用一个 在页面DOM元素加载完毕之后,可以通过 star-rating-svg星级评分插件的github地址为:https://github.com/nashio/star-rating-svg
初始化插件
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
}
});




