qtabs.js
3.09 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
/**
* QTabs for Mootools 1.11
*
* @version 1.0.0
* @package qtabs
* @author Massimo Giagnoni ( http://www.latenight-coding.com )
* @copyright Copyright (C) 2008 Massimo Giagnoni. All rights reserved.
* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL
*/
var QTabs = new Class({
options:{
flexHeight:false,
def_tab:0,
autoplay:0,
scrolling:0,
delay:3000,
duration:500,
transition:'Quad',
easing:'easeInOut',
onActive: function(container, idx){
var content = this.tcontents[idx];
var s = container.getSize();
var cw = s.size.x;
if(this.options.flexHeight) {
s = content.getSize();
container.setStyle('height', s.size.y + 'px');
}
var d = (this.curTab >= 0 ? this.options.duration : 1);
var sdir = this.options.scrolling;
if(sdir == 'a') {
if(idx > this.curTab) {
sdir = 'lr';
} else {
sdir = 'rl';
}
}
var lft = [0,0];
switch(sdir) {
case 'lr':
lft = [-cw,0];
break;
case 'rl':
lft = [cw,0];
break;
}
this.fxOn = true;
if(this.options.transition == 'linear') {
var t = Fx.Transitions[this.options.transition];
} else {
var t = Fx.Transitions[this.options.transition][this.options.easing];
}
content.effects({
duration: d,
transition: t
}).start({
top: [0,0],
left: lft,
opacity: [1,1]
});
this.fxEnd.delay(d, this);
this.tabs[idx].addClass('open').removeClass('closed');
},
onBackground: function(tab, content){
content.setStyle('display', 'none');
tab.addClass('closed').removeClass('open');
}
},
initialize: function(m_id, options){
this.setOptions(options);
this.tabs = $('qtabs-'+ m_id).getElements('li')
this.container = $('current-'+ m_id);
this.tcontents = this.container.getElements('div.qtcontent');
for (var i = 0, l = this.tabs.length; i < l; i++){
var tab = this.tabs[i];
tab.addEvent('click', this.display.bind(this, i));
tab.addEvent('mouseenter', this.mouseEnter.bind(this, i));
tab.addEvent('mouseleave', this.mouseLeave.bind(this, i));
}
this.curTab = -1;
this.display(this.options.def_tab);
},
display: function(i){
if(i < 0 || i >= this.tabs.length) { i=0; }
if(this.curTab == i || this.fxOn) {return;}
$clear(this.timer);
for (var c = 0, l = this.tabs.length; c < l; c++){
if (c != i) {
this.tabs[c].addClass('closed').removeClass('open');
}
this.tcontents[c].setOpacity(0);
}
this.fireEvent('onActive', [this.container, i]);
this.curTab = i;
},
mouseEnter: function(i){
this.tabs[i].addClass('hover');
},
mouseLeave: function(i){
this.tabs[i].removeClass('hover');
},
fxEnd: function() {
this.fxOn = false;
if(this.options.autoplay) {
var i = this.curTab + 1;
if(i >= this.tcontents.length) {
i = 0;
}
this.timer = this.display.delay(this.options.delay, this, i);
}
}
});
QTabs.implement(new Events);
QTabs.implement(new Options);