投稿 搜索

热门文章

当前位置: 站长天下 / 按钮图标 / jQuery星星评分插件jquery.raty.js特效
jQuery星星评分插件jquery.raty.js特效
标签:

插件介绍

    一款jQuery滑动星星评分效果,代码注释全。

    浏览器兼容性

    浏览器兼容性
    时间:2018-07-24
    阅读:

jQuery星星评分插件jquery.raty.js特效

简要教程

一款jQuery滑动星星评分效果,代码注释全。

使用方法

在页面引入jquery.min.js、jquery.raty.js文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.raty.js" type="text/javascript"></script>
rat('star1','result1',1);
;
function rat(star,result,m){
 
    star= '#' + star;
    result= '#' + result;
    $(result).hide();//将结果DIV隐藏
 
    $(star).raty({
        hints: ['1', '2', '3', '4', '5'],
        number:5,
        path: "css/img",
        starOff: 'star-off-big.png',
        starOn: 'star-on-big.png',
        size: 24,
        start: 3,
        showHalf: true,
        //target: result,
        //targetKeep : false,//targetKeep 属性设置为true,用户的选择值才会被保持在目标DIV中,否则只是鼠标悬停时有值,而鼠标离开后这个值就会消失
        click: function (score, evt) {
            //第一种方式:直接取值
            alert('你的评分是'+score*m+'分');
        }
    });
 
    /*第二种方式可以设置一个隐蔽的HTML元素来保存用户的选择值,然后可以在脚本里面通过jQuery选中这个元素来处理该值。 弹出结果
    var text = $(result).text();
    $('img').click(function () {
        if ($(result).text() != text) {
            alert('你的评分是'+$(result).text()/m+'分');
            alert(result);
            return;
        }
    });*/
}


下一篇:没有了