jQuery Rate星星评分插件的使用

最新推荐文章于 2024-08-14 02:14:47 发布

唯爱浅浅waqq914

最新推荐文章于 2024-08-14 02:14:47 发布

阅读量1.9k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_42028405/article/details/80018952

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、第一版

根据插件教程编写自己的星星评级，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的星星评级</title>
    <!-- JQUERY SCRIPTS -->
    <script src="../assets/js/jquery-2.2.3.min.js"></script>
    <script src="../assets/js/raty/jquery.raty.js"></script>
    <style type="text/css">
        .target-demo {
            display: inline-block;
            vertical-align: middle;
        }
        .hint{
            font-weight: bold;
            display: inline-block;
            height: 27px;
            line-height: 27px;
            font-size: 14px;
            text-align: center;
            width: auto;
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div>
    <div id="target-div-demo" class="target-demo"></div>
    <div id="target-div-hint" class="hint"></div>
</div>

<script type="text/javascript">
    $(function() {
        var scoreMess = ['不重要', '一般', '重要', '特别重要', '非常重要'];
        var messColor = ['#FF7F50', '#1C86EE', '#008B00', '#008B00', '#008B00'];
        $('#target-div-demo').raty({
            cancel: false,  //是否显示左边cancel按钮
            score: 1,   //初始化
            number: 4,  //改变星星数量
            scoreName: 'entity[score]',
            starOff  : '../assets/js/raty/img/star-off.png',  //自定义等级图案
            starOn   : '../assets/js/raty/img/star-on.png',
            mouseover: function(score, evt) {                   //自定义等级信息
                $('#target-div-hint').css("color", messColor[score-1]).html(scoreMess[score-1]);
            },
            mouseout: function(score, evt) {                    //鼠标移出信息消失
                $('#target-div-hint').html("");
            }
        });
        //alert('score: ' + $('#target-div-demo').raty('score'));//获取当前等级：默认数字
    });
</script>
</body>
</html>

2、第二版

进行简单的封装，可直接调用：

目录：（img和raty.js均在附件里面的lib目录下）

myStart.css：（可根据需要进行修改）

/**
 * Created by zl on 2017/5/16.
 */
/**
 * 给指定的div创建星星评级
 */
$.fn.createMyStar = function(){
    $(this).append('<div class="target-star"></div><div class="hint"></div>');
    var scoreMess = ['不重要', '一般', '重要', '特别重要', '非常重要'];
    var messColor = ['#FF7F50', '#1C86EE', '#008B00', '#008B00', '#008B00'];
    $(this).children().eq(0).raty({
        cancel: false,  //是否显示左边cancel按钮
        score: 1,   //初始化
        number: 4,  //改变星星数量
        scoreName: 'entity[score]',
        starOff  : '../assets/js/raty/img/star-off.png',  //自定义等级图案
        starOn   : '../assets/js/raty/img/star-on.png',
        mouseover: function(score, evt) {                   //自定义等级信息
            $(this).next('div').css("color", messColor[score-1]).html(scoreMess[score-1]);
        },
        mouseout: function(score, evt) {                    //鼠标移出信息消失
            $(this).next('div').html("");
        }
    });
    //alert('score: ' + $('#target-div-demo').raty('score'));//获取当前等级：默认数字
};
/**
 * 指定的星星评级div获取等级
 */
$.fn.getStarScore = function(){
    return $(this).children().eq(0).raty('score');
};

myStart.js：（可根据需要进行修改）

/**
 * Created by zl on 2017/5/16.
 */
/**
 * 给指定的div创建星星评级
 */
$.fn.createMyStar = function(){
    $(this).append('<div class="target-star"></div><div class="hint"></div>');
    var scoreMess = ['不重要', '一般', '重要', '特别重要', '非常重要'];
    var messColor = ['#FF7F50', '#1C86EE', '#008B00', '#008B00', '#008B00'];
    $(this).children().eq(0).raty({
        cancel: false,  //是否显示左边cancel按钮
        score: 1,   //初始化
        number: 4,  //改变星星数量
        scoreName: 'entity[score]',
        starOff  : '../assets/js/raty/img/star-off.png',  //自定义等级图案
        starOn   : '../assets/js/raty/img/star-on.png',
        mouseover: function(score, evt) {                   //自定义等级信息
            $(this).next('div').css("color", messColor[score-1]).html(scoreMess[score-1]);
        },
        mouseout: function(score, evt) {                    //鼠标移出信息消失
            $(this).next('div').html("");
        }
    });
    //alert('score: ' + $('#target-div-demo').raty('score'));//获取当前等级：默认数字
};
/**
 * 指定的星星评级div获取等级
 */
$.fn.getStarScore = function(){
    return $(this).children().eq(0).raty('score');
};

引用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的星星评级</title>
    <link href="../assets/js/raty/myStart.css" rel="stylesheet" />
    <!-- SCRIPTS -->
    <script src="../assets/js/jquery-2.2.3.min.js"></script>
    <script src="../assets/js/raty/jquery.raty.js"></script>
    <script src="../assets/js/raty/myStar.js"></script>
</head>
<body>

<div class="star"></div>
<button id="btn">取值</button>

<script type="text/javascript">


    $(function() {
        $('.star').createMyStar();
        $('#btn').click(function(){
            alert($('.star').getStarScore());
        });
    });
</script>
</body>
</html>

效果图

//初始化