jQuery插件开发--Tab

打造自己的插件库

人工参数配置

1
2
3
4
5
6
7
8
$(function() {
$('.jq-tab').tabPlugin({
//人工参数
type: 'click',
effect: 'dd',
auto: 1000
})
})

默认参数

1
2
3
4
5
this.default = {
type: 'click',
effect: 'default',
auto: false
}

tab插件,包含三个参数可配置:触发方式,效果,是否自动播放

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
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
$('.jq-tab').tabPlugin({
//人工参数
type: 'click',
effect: 'dd',
auto: 1000
})
})
;(function($, window, document) {
function Tab(opts) {
//默认参数
this.default = {
type: 'click',
effect: 'default',
auto: false
}
//合并参数
this.opt = $.extend(true, {}, this.default, opts);

this.lis = $('.nav').find('li');
this.content = $('.content').find('li');
this.num = 0;
}
Tab.prototype = {
init() {
this.clickTab();
this.autoPlay();
},
clickTab() {
var $this = this;
if(this.opt.type == 'mouseover') {
this.lis.on(this.opt.type, function() {
$this.tabType($(this));
$this.tabEffect($(this).index());
})
} else {
this.lis.on('click', function() {
$this.tabType($(this));
$this.tabEffect($(this).index());
})
}
},
tabType(cur) {
var onIndex = cur.index();
cur.addClass('on').siblings().removeClass('on');
this.num = onIndex;
},
tabEffect(ind) {
if(this.opt.effect == 'fade') {
this.content.eq(ind).fadeIn().siblings().fadeOut();
} else {
this.content.eq(ind).addClass('active').siblings().removeClass('active');
}
},
//自动播放
autoPlay() {
var $this = this;
var lis = this.lis;
//防止刚开始在第一个停留2s的问题
this.num = 1;
//部位false的情况下
if(this.opt.auto) {
setInterval(function() {
if($this.num >= lis.length) {
$this.num = 0;
}
$this.tabType(lis.eq($this.num));
$this.tabEffect($this.num);
$this.num++;
},this.opt.auto)
}
}
}
$.fn.tabPlugin = function(options) {
//创建实例
var tab = new Tab(options);
return tab.init();
}
})(jQuery, window, document)
</script>