jQuery.raty.js星星评分插件
2018-03-24 14:37:37
1023次阅读
0个评论

在做前端开发的过程中,我们经常用到星星评分插件,这里使用jquery,raty.js这个评分插件,

先看一下效果图



下载插件
https://github.com/wbotelhos/raty



在使用之前要先引入jquery。然后再引入jquery.raty.js

<script src="jquery-1.12.2.js"></script>
<script src="jquery.raty.js"></script>


html代码


<div class="evaluate">
    <div id="starts"></div><div id="title"></div>
</div>
JS代码


<script type="text/javascript">
    $(function(){
        $("#starts").raty({
            number : 5,//星星个数
            path : 'img',//图片路径
            half:true,
            starOn : 'star-on-big.png',
            starOff : 'star-off-big.png',
            target : '#title',//
            hints : ['1','2','3','4','5'],
            click : function(score, evt) {
                $("#grade").val(score);//
            }
        });
    });
</script>


然后就可以看到效果了,上面只是介绍了一下简单的使用,还可以设置星星的半角和全角,星星的个数
需要注意的是图片路径的引入,不要出错。id一定要相同。如果需要多个评分插件,只需要把id名改一下即可

提供的功能很多,例如size,可以设置星星的大小,还可以对满意度进行设置,只需要把英文换成中文就可以了

收藏00

登录 后评论。没有帐号? 注册 一个。