开源的插件实现五星评级的各种效果-白红宇的个人博客

发布日期：2021-05-06 19:51:44 浏览次数：33 分类：原创文章

本文共 1178 字，大约阅读时间需要 3 分钟。

背景

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

插件 jQuery Raty

下载地址

演示地址

也可以下载源码后，打开demo会有全部功能展示
在这里插入图片描述

使用案例

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

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

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

<!DOCTYPE html><html><head>    <meta charset="utf-8" /></head><body><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --><script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script><script src="js/jquery.raty.js"></script><div id="star" data-num="2.5"></div><script>    $(function(){        $("#star").raty({            score:function(){                return $(this).attr("data-num");            },            starOn:'imgs/star-on.png',            starOff:'imgs/star-off.png',            starHalf:'imgs/star-half.png',            readOnly:false,            halfShow:true,            size:34,        })    });</script></body></html>

说明

score:需要显示的星星个数

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

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

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

readOnly：所显示的星星是否只读，默认非只读

halfShow：半个星星是否可以显示，默认可以

size：div显示的长度，太短了星星会换行

上一篇：JavaScript 对于数组Array的排序，给数字排序、给数字排序，对象排序，控制内容输出循序

下一篇：[搭建完整jenkins发布环境（四）]配置gogs和gitlab的webhook触发任务（免插件，脚本触发）

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

背景

插件 jQuery Raty

使用案例

说明

发表评论

最新留言

关于作者

推荐文章