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

abcd23211年前前端开发899

在做前端开发的过程中,我们经常用到星星评分插件。这里推荐一jquery,raty.js是一个专门用来做评分的。
星星显示的效果如下:
2019011625282933.png

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery.raty.js" type="text/javascript"></script>

<div id="starts"></div>
<script type="text/javascript">
    $(function(){
        $("#starts").raty({
            number : 5,//星星个数
            path : 'images',//图片路径
            half:false,//适合开启半颗星
            size:24,
            starOn : 'star-on-big.png',
            starOff : 'star-off-big.png',
            hints : ['1','2','3','4','5'],
            click : function(score, evt) {
                $(this).val(score);//赋值到input value
            }
        });
    });
</script>

 

score:需要显示的星星个数

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

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

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

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

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

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

相关文章

CSS字体font-family的正确选择方案

本文主要介绍的是CSS字体font-family的正确选择方案,由于设计稿和平台的不同,导致了制作有时候无法还原设计稿,理清各种平台字体区别,有助于做出最好的选择。大家都知道,在不同操作系统、不同游览...

kindeditor编辑器插入mp4视频不显示及不过滤video的方法

传视频是单独做了htm5的video调用,所以在电脑及移动设备上访问没问题,但是很多地方比如题目,题目解析等都在kindeditor编辑器里面添加的,因为肯定要添加图文,但是添加视频的话,因为kind...

PHP实现将textarea的值根据回车换行拆分至数组

textarea回车换行为 \r\n$keyword_list = trim($_REQUEST['keywords']); $keyword_arr ...

实现checkbox 翻页后,仍保持选中状态

使用的技术 localStorage.setItem(key,val); localStorage.getItem(key); <input...

透明度与十六进制代码转换

透明度参照表:00%=FF(不透明) 5%=F2 10%=E5 15%=D8 20%=CC 25%=BF 30%=B2 35%=A5 40%=99 45%=8c 50%=7F 55%=72 60%=6...

移动端自适应Rem自适应js

    当我们指定一个元素的font-size为2rem的时候,也就说这个元素的字体大小为根元素<html>字体大小的两倍,如果html的font-size为12p...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。