延迟选项卡。
收集一段 延迟选项卡，兼容浏览器。
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
}
12div#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
26div#CMenu h4.Default {
27/*标题选中后标题*/
28 background-color:#E0E0E0!important;
29}
30
31div#CMenu div.Default {
32/*标题选中后内容*/
33 display:block!important;
34}
35
36div#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
74})(/Firefox/.test(window.navigator.userAgent));
75
76var Class = {
77//创建类
78 create : function () {
79 return function () {
80 this.initialize.apply(this, arguments);
81 };
82 }
83};
84
85var $A = function (a) {
86//转换数组
87 return a ? Array.apply(null, a) : new Array;
88};
89
90var $ = function (id) {
91//获取对象
92 return document.getElementById(id);
93};
94
95Function.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
103var CMenu = Class.create();
104
105CMenu.prototype = {
106
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
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
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
163};
164
165window.onload = function () {
166 var wc = new CMenu(250);
167 wc.parse(document.getElementById("CMenu"), "Default");
168 wc = null;
169};
170</script>
171</head>
172
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
189
<!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 {
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
26
div#CMenu h4.Default {27
/*标题选中后标题*/28
background-color:#E0E0E0!important;29
}30
31
div#CMenu div.Default {32
/*标题选中后内容*/33
display:block!important;34
}35
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
74
})(/Firefox/.test(window.navigator.userAgent));75
76
var Class = {77
//创建类78
create : function () {79
return function () {80
this.initialize.apply(this, arguments);81
};82
}83
};84
85
var $A = function (a) {86
//转换数组87
return a ? Array.apply(null, a) : new Array;88
};89
90
var $ = function (id) {91
//获取对象92
return document.getElementById(id);93
};94
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
103
var CMenu = Class.create();104
105
CMenu.prototype = {106
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
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
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
163
};164
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
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
189
