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

最新推荐文章于 2024-08-09 07:40:40 发布

原创最新推荐文章于 2024-08-09 07:40:40 发布 · 717 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#五星评级 #jquery

前端技术专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用jQueryRaty插件来实现动态星级显示的方法，该插件不仅能满足当前需求，还适用于未来的星级相关功能。文章提供了插件的下载地址、演示链接及详细的使用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

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

插件 jQuery Raty

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

演示地址
http://www.jq22.com/yanshi6430
也可以下载源码后，打开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>