封装tabs组件

Posted on Edited on In

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
      *{padding:0; margin:0;}
ul li{list-style: none;}
body{font-size: 12px; background-color: #323232; padding:100px;}
.tab{width: 300px; }
.tab .tab-nav{
    height: 30px;
}

.tab .tab-nav li{
    float: left;
    margin-right: 5px;
    background-color: #767676;
    border-radius: 3px 3px 0 0;
}

.tab .tab-nav li a{display: block; height: 30px;
padding: 0 20px; color: #fff; line-height: 30px;text-decoration:none;}

.tab .content-wrap{background-color: #fff; padding:5px; height: 200px; }

.tab .content-wrap .content-item{height: 200px; display: none;position: absolute;}

.tab .tab-nav li.actived{background-color: #fff;}
.tab .tab-nav li.actived a{color: #777}

.tab .content-wrap .current{display: block;}

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
   ;(function($){
   
    var Tab = function(tab){
       var _this = this;
       this.tab = tab;        
       // 默认配置参数;
       this.config = {
                "tabCls":".tab",
                "triggerType":"mouseover",  //click,mouseover
                "effect":"default",      //切换效果：default,fade
                "invoke":0,  //默认显示第几个TAB
                "auto":false  //tab是否自动切换,可以指定毫秒数
        }

        var config = $.extend(this.config, this.getConfig());

       
       // console.log(this.config)

        //保存tab标签列表,对应的内容列表
        this.tabItems = $(config.tabCls).find(".tab-nav li");
        this.tabContItems = $(config.tabCls).find(".content-wrap > div");
         
        if(config.triggerType){
            this.tabItems.on(config.triggerType,function(){                
                _this.invoke(this);
            })
        }

        if(config.auto){
            this.timer = null;
            this.loop = 0;
            this.autoPlay();

            this.tabContItems.hover(function(){
                window.clearInterval(_this.timer)
            },function(){
                 _this.autoPlay();
            })

        }


    };

    Tab.prototype = {
        //获取配置参数


        getConfig:function(){
            var config = this.tab;
            //是否有配置参数
            if(config && config!=""){
                return config
            }
            else
            {
                return null
            }
        },

        invoke:function(item){
            var index = $(item).index();
         
            $(item).addClass('actived').siblings().removeClass('actived');

            var effect = this.config.effect;

            if(effect === "default"){
               
                this.tabContItems.eq(index).addClass('current').siblings().removeClass('current');
            }

            if(effect === "fade"){                
             
                this.tabContItems.eq(index).fadeIn().siblings().fadeOut()
            }
            //如果开启了定时播放，鼠标点击标签后 下次自动播放就应该接在点击的标签后边
            if(this.config.auto){
                this.loop = index;
            }

        },

        autoPlay:function(){
            var _this = this;
            var tabLength = this.tabItems.size();
            this.timer = setInterval(function(){
                _this.loop++;
                if(_this.loop >= tabLength){
                    _this.loop = 0;
                }
                _this.tabItems.eq(_this.loop).trigger(_this.config.triggerType)

            },this.config.auto)
        }


    };

   

    window.Tab = Tab;
})(jQuery)

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <div class="tab tab1">
        <ul class="tab-nav">
            <li class="actived"><a href="#">新闻</a></li>
            <li><a href="#">娱乐</a></li>
            <li><a href="#">电影</a></li>
            <li><a href="#">科技</a></li>
        </ul>

        <div class="content-wrap">
            <div class="content-item current">1111</div>
            <div class="content-item">2222</div>
            <div class="content-item">3333</div>
            <div class="content-item">4444</div>
        </div>
    </div>

     <div class="tab tab2">
        <ul class="tab-nav">
            <li class="actived"><a href="#">新闻</a></li>
            <li><a href="#">娱乐</a></li>
            <li><a href="#">电影</a></li>
            <li><a href="#">科技</a></li>
        </ul>

        <div class="content-wrap">
            <div class="content-item current">aaa</div>
            <div class="content-item">bbb</div>
            <div class="content-item">ccc</div>
            <div class="content-item">ddd</div>
        </div>
    </div>


    <script src="jquery-1.9.0.min.js"></script>
    <script src="tab.js"></script>
    <script>
        $(function(){
            var tab1 = new Tab({
                "tabCls":".tab1",
                "triggerType":"click",
                "effect":"fade",
                "invoke":2,  //默认显示第几个TAB
                "auto":1000
            });

            var tab1 = new Tab({
                "tabCls":".tab2",
                "triggerType":"click",
                "effect":"default",
                "invoke":1,  //默认显示第几个TAB
                "auto":false
            });
         
           
        })
    </script>
</body>
</html>