开源的插件实现五星评级的各种效果

背景

近期项目需要实现根据数值显示某个客户的星级,实现的方法有很多。可以通过比较笨的方法,显示不同个数的html标签,也可以通过js脚本实现动态显示,也可以通过纯css的方式实现。
综合比较和很多方法,发现了一个插件不但可以满足我本次的需求,以后有其他星级的需求也可以满足。

插件 jQuery Raty

下载地址
https://github.com/wbotelhos/raty

演示地址
http://www.jq22.com/yanshi6430
也可以下载源码后,打开demo会有全部功能展示
开源的插件实现五星评级的各种效果_第1张图片

使用案例

需要下载raty.js并从images文件夹获取图片,放到文件夹。jquery用的在线的不用下载。

  • starOn:‘imgs/star-on.png’,
  • starOff:‘imgs/star-off.png’,
  • starHalf:‘imgs/star-half.png’,

修改路径,直接copy下面代码就可以运行




    






说明

score:需要显示的星星个数

starOn:鼠标放上去时显示的图标的位置

starOff:鼠标离开后显示的图标的位置

starHalf:需要显示的半星的标图的位置

readOnly:所显示的星星是否只读,默认非只读

halfShow:半个星星是否可以显示,默认可以

size:div显示的长度,太短了星星会换行

你可能感兴趣的:(前端技术)