tabs.js
4.13 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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
(function ($) {
var methods = {
init : function() {
return this.each(function() {
// For each set of tabs, we want to keep track of
// which tab is active and its associated content
var $this = $(this),
window_width = $(window).width();
$this.width('100%');
var $active, $content, $links = $this.find('li.tab a'),
$tabs_width = $this.width(),
$tab_width = $this.find('li').first().outerWidth(),
$index = 0;
// If the location.hash matches one of the links, use that as the active tab.
$active = $($links.filter('[href="'+location.hash+'"]'));
// If no match is found, use the first link or any with class 'active' as the initial active tab.
if ($active.length === 0) {
$active = $(this).find('li.tab a.active').first();
}
if ($active.length === 0) {
$active = $(this).find('li.tab a').first();
}
$active.addClass('active');
$index = $links.index($active);
if ($index < 0) {
$index = 0;
}
$content = $($active[0].hash);
// append indicator then set indicator width to tab width
$this.append('<div class="indicator"></div>');
var $indicator = $this.find('.indicator');
if ($this.is(":visible")) {
$indicator.css({"right": $tabs_width - (($index + 1) * $tab_width)});
$indicator.css({"left": $index * $tab_width});
}
$(window).resize(function () {
$tabs_width = $this.width();
$tab_width = $this.find('li').first().outerWidth();
if ($index < 0) {
$index = 0;
}
if ($tab_width !== 0 && $tabs_width !== 0) {
$indicator.css({"right": $tabs_width - (($index + 1) * $tab_width)});
$indicator.css({"left": $index * $tab_width});
}
});
// Hide the remaining content
$links.not($active).each(function () {
$(this.hash).hide();
});
// Bind the click event handler
$this.on('click', 'a', function(e){
if ($(this).parent().hasClass('disabled')) {
e.preventDefault();
return;
}
$tabs_width = $this.width();
$tab_width = $this.find('li').first().outerWidth();
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $(this.hash);
$links = $this.find('li.tab a');
// Make the tab active.
$active.addClass('active');
var $prev_index = $index;
$index = $links.index($(this));
if ($index < 0) {
$index = 0;
}
// Change url to current tab
// window.location.hash = $active.attr('href');
$content.show();
// Update indicator
if (($index - $prev_index) >= 0) {
$indicator.velocity({"right": $tabs_width - (($index + 1) * $tab_width)}, { duration: 300, queue: false, easing: 'easeOutQuad'});
$indicator.velocity({"left": $index * $tab_width}, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
}
else {
$indicator.velocity({"left": $index * $tab_width}, { duration: 300, queue: false, easing: 'easeOutQuad'});
$indicator.velocity({"right": $tabs_width - (($index + 1) * $tab_width)}, {duration: 300, queue: false, easing: 'easeOutQuad', delay: 90});
}
// Prevent the anchor's default click action
e.preventDefault();
});
});
},
select_tab : function( id ) {
this.find('a[href="#' + id + '"]').trigger('click');
}
};
$.fn.tabs = function(methodOrOptions) {
if ( methods[methodOrOptions] ) {
return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
// Default to "init"
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + methodOrOptions + ' does not exist on jQuery.tooltip' );
}
};
$(document).ready(function(){
$('ul.tabs').tabs();
});
}( jQuery ));