jQuery评分插件实现星型评分

最新推荐文章于 2024-06-06 10:05:55 发布

紫冰Nan

最新推荐文章于 2024-06-06 10:05:55 发布

阅读量749

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/NN_nan/article/details/70807437

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>jquery星星评分插件</title>
    <script src="/static/jquery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/static/star/jquery.raty.js"></script>

    <style>
        #function-demo {
            float: left;
        }
        #function-demo1{
            float: left;
        }
    </style>
</head>
<body>
<div style="width:500px; margin:100px auto;">
    <div class="demo">
        <div id="function-demo" class="target-demo"></div>
        <div id="function-hint" class="hint"></div>
    </div>
    <div style="clear: both"></div>
    <div class="demo" style="margin-top: 20px">
        <div id="function-demo1" class="target-demo"></div>
        <div id="function-hint1" class="hint"></div>
    </div>
</div>
</body>
<script type="text/javascript">
    $(function() {
        $.fn.raty.defaults.path = '/static/star';
        $('#function-demo').raty({
            number: 3,//多少个星星设置
            targetType: 'hint',//类型选择，number是数字值，hint，是设置的数组值
            path      : '/static/star',
            hints     : ['差','一般','好'],
            cancelOff : 'cancel-off-big.png',
            cancelOn  : 'cancel-on-big.png',
            size      : 24,
            starHalf  : 'star-half-big.png',
            starOff   : 'star-off-big.png',
            starOn    : 'star-on-big.png',
            target    : '#function-hint',
            cancel    : false,
            targetKeep: true,
            targetText: '请选择评分',

            click: function(score, evt) {
                alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type);
            }
        });

        $('#function-demo1').raty({
            number: 10,//多少个星星设置
            score: 2,//初始值是设置
            targetType: 'number',//类型选择，number是数字值，hint，是设置的数组值
            path      : '/static/star',
            cancelOff : 'cancel-off-big.png',
            cancelOn  : 'cancel-on-big.png',
            size      : 24,
            starHalf  : 'star-half-big.png',
            starOff   : 'star-off-big.png',
            starOn    : 'star-on-big.png',
            target    : '#function-hint1',
            cancel    : false,
            targetKeep: true,
            precision : false,//是否包含小数
            click: function(score, evt) {
                alert('ID: ' + $(this).attr('id') + "\nscore: " + score + "\nevent: " + evt.type);
            }
        });
    });
</script>
</html>

参考源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1pJ3CN7X 密码: afow

紫冰Nan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery评分插件实现星型评分

<!DOCTYPE html><html lang="en" dir="ltr"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>jquer
复制链接

扫一扫

专栏目录