jQuery.raty.js星星评分插件的使用

来源:互联网 发布:免费服装库存软件 编辑:程序博客网 时间:2024/05/18 02:22

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

用来做评分的,先看一下效果图


它的用法很简单,因为jquery.raty.js是基于jquery的,所以在使用之前要先引入jquery。然后在引入

jquery.raty.js.

第1步,声明一个空盒子的id用来要显示星星的

<div class="evaluate">    <div id="starts"></div><div id="title"></div></div>
第2步,使用jquery.raty.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>
第3步

<script src="jquery-1.12.2.js"></script><script src="jquery.raty.js"></script><script src="jquery.raty.min.js"></script>
然后就可以看到效果了,上面只是介绍了一下简单的使用,还可以设置星星的半角和全角,星星的个数

需要注意的是图片路径的引入,不要出错。id一定要相同。如果需要多个评分插件,只需要把id名改一下即可

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

原创粉丝点击