tab.js
1.87 KB
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
/**
* Module: tab.js
*
* markup:
* <div class="tab">
* <ul class="tab-navs">
* <li class="tab-nav active">
* <a href="javascript:;" data-trigger="tab" data-target="#a"></a>
* </li>
* <li class="tab-nav">
* <a href="javascript:;" data-trigger="tab" data-target="#b"></a>
* </li>
* </ul>
* <div class="tab-panels">
* <div id="a" class="tab-panel">
* </div id="b" class="tab-panel">
* </div>
* </div>
*/
var Tab = function(elem) {
this.$elem = $(elem);
};
Tab.prototype.show = function() {
var $nav = this.$elem;
var targetSelector = (function(elem) {
var selector = elem.dataset.target;
if (!selector) {
selector = elem.getAttribute('href') || '';
selector = /^#[a-z]/i.test(selector) ? selector : null;
}
return selector;
}($nav[0]));
var $target = $(targetSelector);
if ($nav.hasClass('active')) {
return;
}
function active($elem, $parent) {
$parent.children('.active').removeClass('active');
$elem.addClass('active');
}
active($nav.parent('.tab-nav'), $nav.closest('.tab-navs'));
active($target, $target.closest('.tab-panels'));
};
function Plugin(option) {
this.each(function() {
var $this = $(this);
var data = $this.data('yoho.tab');
var options = typeof option === 'object' && option;
if (!data) {
$this.data('yoho.tab', (data = new Tab(this, options)));
}
if (typeof option === 'string') {
data[option]();
}
});
}
$.fn.yoTab = Plugin;
$.fn.yoTab.constructor = Tab;
$(document).on('click', '[data-trigger=tab]', function(event) {
event.preventDefault();
event.stopPropagation();
var $nav = $(event.target);
Plugin.call($nav, 'show');
});