码迷,mamicode.com
首页 > 其他好文 > 详细

慕课网 星级评分原理和实现(上)

时间:2018-01-19 15:43:51      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:text   find   ons   padding   else   div   hidden   no-repeat   方式   

源码下载

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>星级评分--第一种实现方式</title>
    <style>
    body,
    ul,
    li {
        padding: 0;
        margin: 0;
        display: block;
    }

    li {
        list-style-type: none;
    }

    .rating {
        width: 165px;
        height: 40px;
        margin: 100px auto;
        overflow: hidden;
    }

    .rating-item {
        float: left;
        width: 33px;
        height: 33px;
        background: url(star.png) no-repeat;
        cursor: pointer;
    }
    </style>
</head>

<body>
    <!-- 第一种实现方式 -->
    <ul class="rating" id="rating">
        <li class="rating-item" title="很不好1"></li>
        <li class="rating-item" title="不好1"></li>
        <li class="rating-item" title="一般1"></li>
        <li class="rating-item" title="好1"></li>
        <li class="rating-item" title="很好1"></li>
    </ul>
    <ul class="rating" id="rating2">
        <li class="rating-item" title="很不好"></li>
        <li class="rating-item" title="不好"></li>
        <li class="rating-item" title="一般"></li>
        <li class="rating-item" title="好"></li>
        <li class="rating-item" title="很好"></li>
    </ul>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        
        
        var rating = (function(){
            //继承
            var extend = function(subClass,superClass){
                var F = function(){};
                F.prototype = superClass.prototype;
                subClass.prototype = new F();
                subClass.prototype.construtor = subClass;
            }

            //点亮
            var Light = function(el,options){
                this.$el = $(el);
                this.$item = this.$el.find(‘.rating-item‘);
                this.opts = options;
                this.add = 1;
                this.selectEvent = ‘mouseover‘;
            }
            Light.prototype.init = function(){
                this.lightOn(this.opts.num);
                if(!this.readOnly){
                    this.bindEvent(); 
                }
               
            }
            Light.prototype.lightOn =function(num){
                
                var num = parseInt(num);

                this.$item.each(function(index){
                    if (index < num){
                        $(this).css(‘background-position‘,‘0 -40px‘);
                    }else{
                        $(this).css(‘background-position‘,‘0 0‘);
                    }
                });
            }
            Light.prototype.bindEvent = function(e){
                var self = this,
                    itemLength = self.$item.length;

                self.$el.on(self.selectEvent, ‘.rating-item‘, function(e) {
                    var $this = $(this),
                        num = 0;

                    self.select(e,$this);
                    num = $(this).index() + self.add;
                    self.lightOn(num);

                    (typeof self.opts.select === ‘function‘) && self.opts.select.call(this,num,itemLength);
                    self.$el.trigger(‘select‘,[num,itemLength]);
                }).on(‘click‘, ‘.rating-item‘, function() {
                    self.opts.num = $(this).index() + self.add;
                    (typeof self.opts.chosen === ‘function‘) && self.opts.chosen.call(this,self.opts.num,itemLength);
                    self.$el.trigger(‘chosen‘,[self.opts.num,itemLength]);
                }).on(‘mouseout‘, function() {
                    self.lightOn(self.opts.num);
                })
            }
            Light.prototype.select = function(){
                throw new Error(‘子类必须重写此方法‘);
            }
            Light.prototype.unbindEvent = function(){
                this.$el.off();
            }


            //点亮整颗
            var LightEntire = function(el,options){
                Light.call(this,el,options)
                this.selectEvent = ‘mouseover‘;
            }

            extend(LightEntire,Light);
            LightEntire.prototype.lightOn =function(num){
                Light.prototype.lightOn.call(this,num);
            }
            LightEntire.prototype.select = function(){
                self.add = 1;
            }

            
            //点亮半颗
            var LightHalf = function(el,options){
                Light.call(this,el,options)
                this.selectEvent = ‘mousemove‘;
            }
            extend(LightHalf,Light);
            LightHalf.prototype.lightOn =function(num){
                
                var count = parseInt(num),
                isHalf = count !== num;
               

                Light.prototype.lightOn.call(this,count);
                if(isHalf){
                    this.$item.eq(count).css(‘background-position‘,‘0 -80px‘);
                }
            }
            LightHalf.prototype.select = function(e,$this){
                if(e.pageX - $this.offset().left < $this.width() / 2){
                    this.add = 0.5;
                }else{
                    this.add = 1;
                }
            }

            // 默认参数
            var defaults = {
                mode:‘LightEntire‘,
                num:0,
                readOnly:false,
                select:function(){},
                chosen:function(){}

            }
            var mode = {
                ‘LightEntire‘:LightEntire,
                ‘LightHalf‘:LightHalf
            }
            //初始化
            var init = function(el,option){
                var $el = $(el),
                rating = $el.data(‘rating‘),
                    options = $.extend({},defaults,typeof option === ‘object‘ && option);
                if(!mode[options.mode]){
                    options.mode = ‘LightEntire‘;
                }
                // new LightHalf(el,options).init();
                // new LightHalf(el,options).init();
                if(!rating){
                    $el.data(‘rating‘,(rating = new mode[options.mode](el,options)));
                    rating.init();
                }
                if(typeof option === ‘string‘){
                   rating[option]();
                } 
                
            }
            $.fn.extend({
                rating:function(option){
                    return this.each(function(){
                        init(this,option);
                    })
                }
            })
            return {
                init:init
            };

        })();
        
        rating.init(‘#rating‘,{
            mode:‘LightHalf‘,
            num: 2.5,
            chosen: function(){
                rating.init(‘#rating‘,‘unbindEvent‘);
            }
            // select:function(num,total){
            //     console.log(this);
            //     console.log(num + ‘/‘ + total)
            // }
        })
        
        // $(‘#rating‘).rating({
        //     mode:‘LightEntire‘,
        //     num : 2
        // });
        $(‘#rating2‘).rating({
            mode:‘LightHalf‘,
            num:3.5
        })
        // $(‘#rating2‘).on(‘chosen‘,function(){
        //     $(‘#rating2‘).rating(‘unbindEvent‘);
        // })

        $(‘#rating‘).on(‘select‘,function(e,num,total){
            console.log(num + ‘/‘ + total)
        }).on(‘chosen‘,function(e,num,total){
            console.log(num + ‘/‘ + total);
        })
    </script>
</body>

</html>

慕课网 星级评分原理和实现(上)

标签:text   find   ons   padding   else   div   hidden   no-repeat   方式   

原文地址:https://www.cnblogs.com/fazero/p/8316926.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!