头像

支持半颗星的jQuery star-rating.js星星评分插件

来源:http://www.sucaihuo.com/js/3546 素材火管理员 2018-03-12 14:49浏览(520) 收藏

jQuery star-rating.js星星评分插件是一款支持半颗星和小数的星级评分代码,鼠标滑过星星显示分数,点击进行打分,多种星星打分样式任你选择。
支持半颗星的jQuery star-rating.js星星评分插件
分类:其它特效 > 星星打分 难易:初级

程序员,你不是一个人;网站开发QQ群:698377651,在线充值,或联系QQ3401083589直接充值

查看演示 下载资源: 9 下载资源 下载积分: 20 积分

js代码

<script src="js/star-rating.js" type="text/javascript"></script>
    <script>
        jQuery(document).ready(function () {
            $("#input-21f").rating({
                starCaptions: function (val) {
                    if (val < 3) {
                        return val;
                    } else {
                        return 'high';
                    }
                },
                starCaptionClasses: function (val) {
                    if (val < 3) {
                        return 'label label-danger';
                    } else {
                        return 'label label-success';
                    }
                },
                hoverOnClear: false
            });
            var $inp = $('#rating-input');

            $inp.rating({
                min: 0,
                max: 5,
                step: 1,
                size: 'lg',
                showClear: false
            });

            $('#btn-rating-input').on('click', function () {
                $inp.rating('refresh', {
                    showClear: true,
                    disabled: !$inp.attr('disabled')
                });
            });


            $('.btn-danger').on('click', function () {
                $("#kartik").rating('destroy');
            });

            $('.btn-success').on('click', function () {
                $("#kartik").rating('create');
            });

            $inp.on('rating.change', function () {
                alert($('#rating-input').val());
            });


            $('.rb-rating').rating({
                'showCaption': true,
                'stars': '3',
                'min': '0',
                'max': '3',
                'step': '1',
                'size': 'xs',
                'starCaptions': {0: 'status:nix', 1: 'status:wackelt', 2: 'status:geht', 3: 'status:laeuft'}
            });
            $("#input-21c").rating({
                min: 0, max: 8, step: 0.5, size: "xl", stars: "8"
            });
        });
    </script>
最新交易
评论13
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 3401083589

  • 头像 12楼
    04-23 00:08
    Ev***无声
    非常好的一个案例,很实用
  • 头像 11楼
    03-16 17:33
    沐***李
    太强大了 ios系统显示正常
  • 头像 10楼
    03-15 11:53
    无***极
    厉害了,半颗星星挺好玩啊!
  • 头像 9楼
    03-14 09:16
    心***扬
    厉害了,我的楼主,感谢分享……
  • 头像 8楼
    03-14 08:26
    en***37
    ui样式漂亮,功能可以!!!
  • 头像 7楼
    03-13 17:48
    yz***an
    这个效果比较炫丽,非常漂亮
  • 头像 6楼
    03-13 15:14
    星*****迹
    不错的插件特效,效果较好,实用性高
  • 头像 5楼
    03-13 15:14
    An***2u
    很不错的效果,挺实用的。 谢谢
  • 头像 4楼
    03-13 14:28
    -***麟
    不错。下载下来试试。。。
  • 头像 3楼
    03-13 10:26
    舒***畅
    没想到星星点评的样式都能做得这么丰富啊!
1 2