延迟选项卡。
收集一段 延迟选项卡,兼容浏览器。
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5
<title>MENU</title>
6
<style type="text/css">
7
div#CMenu {
8
/*主菜单底部*/
9
width:500px;
10
border:#CCCCCC 1px solid;
11
}
12
div#CMenu h4 {
13
/*标题*/
14
width:20%;
15
float:left;
16
margin:0px;
17
text-align:center;
18
font-size:12px;
19
font-weight:normal;
20
line-height:24px;
21
background-color:#F4F4F4;
22
border-bottom:#CCCCCC 1px solid;
23
cursor:default;
24
}
25![](/Images/OutliningIndicators/InBlock.gif)
26
div#CMenu h4.Default {
27
/*标题选中后标题*/
28
background-color:#E0E0E0!important;
29
}
30![](/Images/OutliningIndicators/InBlock.gif)
31
div#CMenu div.Default {
32
/*标题选中后内容*/
33
display:block!important;
34
}
35![](/Images/OutliningIndicators/InBlock.gif)
36
div#CMenu div {
37
/*设置所有内容的样式*/
38
line-height:20px;
39
display:none;
40
background-color:#FAFAFA;
41
font-size:12px;
42
padding:0px 10px 0px 10px;
43
}
44
</style>
45
<script type="text/javascript">
46
(function (bool) {
47
//兼容FF一些方法
48
var html;
49
50
if (bool) {
51
52
html = window.HTMLElement.prototype;
53
54
window.attachEvent = document.attachEvent = html.attachEvent = function (property, func, bool) {
55
//兼容attachEvent方法
56
return this.addEventListener(property.replace(/^on/, ""), func, bool || false);
57
58
};
59
60
html.__defineSetter__("className", function (t_val) {
61
//兼容className属性(高版本FF已经兼容了)
62
return this.setAttribute("class") = t_val;
63
64
});
65
66
html.__defineGetter__("className", function () {
67
//兼容className属性(高版本FF已经兼容了)
68
return this.getAttribute("class");
69
70
});
71
72
}
73![](/Images/OutliningIndicators/InBlock.gif)
74
})(/Firefox/.test(window.navigator.userAgent));
75![](/Images/OutliningIndicators/InBlock.gif)
76
var Class = {
77
//创建类
78
create : function () {
79
return function () {
80
this.initialize.apply(this, arguments);
81
};
82
}
83
};
84![](/Images/OutliningIndicators/InBlock.gif)
85
var $A = function (a) {
86
//转换数组
87
return a ? Array.apply(null, a) : new Array;
88
};
89![](/Images/OutliningIndicators/InBlock.gif)
90
var $ = function (id) {
91
//获取对象
92
return document.getElementById(id);
93
};
94![](/Images/OutliningIndicators/InBlock.gif)
95
Function.prototype.bind = function () {
96
//绑定事件
97
var wc = this, a = $A(arguments), o = a.shift();
98
return function () {
99
wc.apply(o, a.concat($A(arguments)));
100
};
101
};
102![](/Images/OutliningIndicators/InBlock.gif)
103
var CMenu = Class.create();
104![](/Images/OutliningIndicators/InBlock.gif)
105
CMenu.prototype = {
106![](/Images/OutliningIndicators/InBlock.gif)
107
initialize : function (time) {
108
//初始化参数
109
var wc = this;
110
wc.time = time; //初始化滑动延迟时间
111
wc.timer = 0; //初始化记时器存储变量
112
wc.old = { tit : null, con : null }; //初始化当前目标成员
113
wc.style = ""; //默认样式
114
},
115
116
change : function (object) {
117
//设置样式
118
var wc = this, old = wc.old, style = wc.style;
119
if (object.tit == old.tit) return;
120
if (old.tit) old.tit.className = old.con.className = "";
121
(old.tit = object.tit).className = (old.con = object.con).className = style;
122
wc.timer = 0;
123
},
124![](/Images/OutliningIndicators/InBlock.gif)
125
over : function (obj, bool) {
126
//显示控制
127
var wc = this;
128
129
if (wc.timer != 0) window.clearTimeout(wc.timer); //如果有记时器清除
130
131
if (bool) wc.timer = window.setTimeout(wc.change.bind(wc, obj), wc.time);
132
else wc.change(obj);
133
},
134
135
out : function (obj) {
136
//鼠标移开函数
137
var wc = this;
138
if (wc.timer) {
139
window.clearTimeout(wc.timer);
140
wc.timer = 0;
141
}
142
},
143
144
add : function (obj) {
145
//添加成员
146
var wc = this;
147
obj.tit.attachEvent("onclick", wc.over.bind(wc, obj, 0));
148
obj.tit.attachEvent("onmouseover", wc.over.bind(wc, obj, 1));
149
obj.tit.attachEvent("onmouseout", wc.out.bind(wc, obj));
150
},
151![](/Images/OutliningIndicators/InBlock.gif)
152
parse : function (div, style) {
153
//解释对象
154
var wc = this, tits = div.getElementsByTagName("h4"), cons = div.getElementsByTagName("div"), i;
155
try {
156
wc.style = style;
157
wc.change({ tit : tits[0], con : cons[0] }, style);
158
for (i = 0 ; i < tits.length ; i ++)
159
wc.add({ tit : tits[i], con : cons[i] }, style);
160
} catch (exp) {}
161
}
162![](/Images/OutliningIndicators/InBlock.gif)
163
};
164![](/Images/OutliningIndicators/InBlock.gif)
165
window.onload = function () {
166
var wc = new CMenu(250);
167
wc.parse(document.getElementById("CMenu"), "Default");
168
wc = null;
169
};
170
</script>
171
</head>
172![](/Images/OutliningIndicators/None.gif)
173
<body>
174
<div id="CMenu">
175
<h4>第一栏</h4>
176
<h4>第二栏</h4>
177
<h4>第三栏</h4>
178
<h4>第四栏</h4>
179
<h4>第五栏</h4>
180
<div>内容一</div>
181
<div>内容二</div>
182
<div>内容三</div>
183
<div>内容四</div>
184
<div>内容五</div>
185
</div>
186
</body>
187
</html>
188![](/Images/OutliningIndicators/None.gif)
189![](/Images/OutliningIndicators/None.gif)
![](/Images/OutliningIndicators/None.gif)
2
![](/Images/OutliningIndicators/None.gif)
3
![](/Images/OutliningIndicators/None.gif)
4
![](/Images/OutliningIndicators/None.gif)
5
![](/Images/OutliningIndicators/None.gif)
6
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
7
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
8
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
9
![](/Images/OutliningIndicators/InBlock.gif)
10
![](/Images/OutliningIndicators/InBlock.gif)
11
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
12
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
13
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
14
![](/Images/OutliningIndicators/InBlock.gif)
15
![](/Images/OutliningIndicators/InBlock.gif)
16
![](/Images/OutliningIndicators/InBlock.gif)
17
![](/Images/OutliningIndicators/InBlock.gif)
18
![](/Images/OutliningIndicators/InBlock.gif)
19
![](/Images/OutliningIndicators/InBlock.gif)
20
![](/Images/OutliningIndicators/InBlock.gif)
21
![](/Images/OutliningIndicators/InBlock.gif)
22
![](/Images/OutliningIndicators/InBlock.gif)
23
![](/Images/OutliningIndicators/InBlock.gif)
24
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
25
![](/Images/OutliningIndicators/InBlock.gif)
26
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
27
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
28
![](/Images/OutliningIndicators/InBlock.gif)
29
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
30
![](/Images/OutliningIndicators/InBlock.gif)
31
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
32
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
33
![](/Images/OutliningIndicators/InBlock.gif)
34
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
35
![](/Images/OutliningIndicators/InBlock.gif)
36
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
37
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
38
![](/Images/OutliningIndicators/InBlock.gif)
39
![](/Images/OutliningIndicators/InBlock.gif)
40
![](/Images/OutliningIndicators/InBlock.gif)
41
![](/Images/OutliningIndicators/InBlock.gif)
42
![](/Images/OutliningIndicators/InBlock.gif)
43
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
44
![](/Images/OutliningIndicators/None.gif)
45
![](/Images/OutliningIndicators/ExpandedBlockStart.gif)
46
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
47
![](/Images/OutliningIndicators/InBlock.gif)
48
![](/Images/OutliningIndicators/InBlock.gif)
49
![](/Images/OutliningIndicators/InBlock.gif)
50
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
51
![](/Images/OutliningIndicators/InBlock.gif)
52
![](/Images/OutliningIndicators/InBlock.gif)
53
![](/Images/OutliningIndicators/InBlock.gif)
54
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
55
![](/Images/OutliningIndicators/InBlock.gif)
56
![](/Images/OutliningIndicators/InBlock.gif)
57
![](/Images/OutliningIndicators/InBlock.gif)
58
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
59
![](/Images/OutliningIndicators/InBlock.gif)
60
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
61
![](/Images/OutliningIndicators/InBlock.gif)
62
![](/Images/OutliningIndicators/InBlock.gif)
63
![](/Images/OutliningIndicators/InBlock.gif)
64
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
65
![](/Images/OutliningIndicators/InBlock.gif)
66
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
67
![](/Images/OutliningIndicators/InBlock.gif)
68
![](/Images/OutliningIndicators/InBlock.gif)
69
![](/Images/OutliningIndicators/InBlock.gif)
70
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
71
![](/Images/OutliningIndicators/InBlock.gif)
72
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
73
![](/Images/OutliningIndicators/InBlock.gif)
74
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
75
![](/Images/OutliningIndicators/InBlock.gif)
76
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
77
![](/Images/OutliningIndicators/InBlock.gif)
78
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
79
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
80
![](/Images/OutliningIndicators/InBlock.gif)
81
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
82
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
83
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
84
![](/Images/OutliningIndicators/InBlock.gif)
85
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
86
![](/Images/OutliningIndicators/InBlock.gif)
87
![](/Images/OutliningIndicators/InBlock.gif)
88
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
89
![](/Images/OutliningIndicators/InBlock.gif)
90
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
91
![](/Images/OutliningIndicators/InBlock.gif)
92
![](/Images/OutliningIndicators/InBlock.gif)
93
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
94
![](/Images/OutliningIndicators/InBlock.gif)
95
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
96
![](/Images/OutliningIndicators/InBlock.gif)
97
![](/Images/OutliningIndicators/InBlock.gif)
98
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
99
![](/Images/OutliningIndicators/InBlock.gif)
100
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
101
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
102
![](/Images/OutliningIndicators/InBlock.gif)
103
![](/Images/OutliningIndicators/InBlock.gif)
104
![](/Images/OutliningIndicators/InBlock.gif)
105
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
106
![](/Images/OutliningIndicators/InBlock.gif)
107
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
108
![](/Images/OutliningIndicators/InBlock.gif)
109
![](/Images/OutliningIndicators/InBlock.gif)
110
![](/Images/OutliningIndicators/InBlock.gif)
111
![](/Images/OutliningIndicators/InBlock.gif)
112
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
113
![](/Images/OutliningIndicators/InBlock.gif)
114
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
115
![](/Images/OutliningIndicators/InBlock.gif)
116
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
117
![](/Images/OutliningIndicators/InBlock.gif)
118
![](/Images/OutliningIndicators/InBlock.gif)
119
![](/Images/OutliningIndicators/InBlock.gif)
120
![](/Images/OutliningIndicators/InBlock.gif)
121
![](/Images/OutliningIndicators/InBlock.gif)
122
![](/Images/OutliningIndicators/InBlock.gif)
123
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
124
![](/Images/OutliningIndicators/InBlock.gif)
125
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
126
![](/Images/OutliningIndicators/InBlock.gif)
127
![](/Images/OutliningIndicators/InBlock.gif)
128
![](/Images/OutliningIndicators/InBlock.gif)
129
![](/Images/OutliningIndicators/InBlock.gif)
130
![](/Images/OutliningIndicators/InBlock.gif)
131
![](/Images/OutliningIndicators/InBlock.gif)
132
![](/Images/OutliningIndicators/InBlock.gif)
133
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
134
![](/Images/OutliningIndicators/InBlock.gif)
135
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
136
![](/Images/OutliningIndicators/InBlock.gif)
137
![](/Images/OutliningIndicators/InBlock.gif)
138
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
139
![](/Images/OutliningIndicators/InBlock.gif)
140
![](/Images/OutliningIndicators/InBlock.gif)
141
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
142
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
143
![](/Images/OutliningIndicators/InBlock.gif)
144
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
145
![](/Images/OutliningIndicators/InBlock.gif)
146
![](/Images/OutliningIndicators/InBlock.gif)
147
![](/Images/OutliningIndicators/InBlock.gif)
148
![](/Images/OutliningIndicators/InBlock.gif)
149
![](/Images/OutliningIndicators/InBlock.gif)
150
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
151
![](/Images/OutliningIndicators/InBlock.gif)
152
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
153
![](/Images/OutliningIndicators/InBlock.gif)
154
![](/Images/OutliningIndicators/InBlock.gif)
155
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
156
![](/Images/OutliningIndicators/InBlock.gif)
157
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
158
![](/Images/OutliningIndicators/InBlock.gif)
159
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
160
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
161
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
162
![](/Images/OutliningIndicators/InBlock.gif)
163
![](/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
164
![](/Images/OutliningIndicators/InBlock.gif)
165
![](/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
166
![](/Images/OutliningIndicators/InBlock.gif)
167
![](/Images/OutliningIndicators/InBlock.gif)
168
![](/Images/OutliningIndicators/InBlock.gif)
169
![](/Images/OutliningIndicators/ExpandedBlockEnd.gif)
170
![](/Images/OutliningIndicators/None.gif)
171
![](/Images/OutliningIndicators/None.gif)
172
![](/Images/OutliningIndicators/None.gif)
173
![](/Images/OutliningIndicators/None.gif)
174
![](/Images/OutliningIndicators/None.gif)
175
![](/Images/OutliningIndicators/None.gif)
176
![](/Images/OutliningIndicators/None.gif)
177
![](/Images/OutliningIndicators/None.gif)
178
![](/Images/OutliningIndicators/None.gif)
179
![](/Images/OutliningIndicators/None.gif)
180
![](/Images/OutliningIndicators/None.gif)
181
![](/Images/OutliningIndicators/None.gif)
182
![](/Images/OutliningIndicators/None.gif)
183
![](/Images/OutliningIndicators/None.gif)
184
![](/Images/OutliningIndicators/None.gif)
185
![](/Images/OutliningIndicators/None.gif)
186
![](/Images/OutliningIndicators/None.gif)
187
![](/Images/OutliningIndicators/None.gif)
188
![](/Images/OutliningIndicators/None.gif)
189
![](/Images/OutliningIndicators/None.gif)