JS面向对象编程 for Menu Demo
时间：2010-09-07 来源：MR CO
最近看了《JavaScript权威指南》一本书，终于清除了Js中oo的一些语法！
现在才明白了以前写的那些在一个简单的.js文件里面写的function是多么的面向过程。
今天试着写了一个菜单简单的一个Menu类实现的Demo.
望Js们指点下什么地方不对以及不足！
效果图：
HTML CODE:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
3 <html xmlns="http://www.w3.org/1999/xhtml">
4
5 <head>
6 <title>JavaScript Menu</title>
7
8 <script type="text/javascript" language="javascript" src='menu.js'></script>
9
10 <style type="text/css">
11 *{ padding : 0px ; margin : 0px ;}
12 a{ text-decoration:none; }
13 body{ font-size:12px; }
14
15 /*伸缩菜单*/
16 #dlMenu dt{ float : left ; width : 120px ; height : 40px ; text-align:center; margin:0px 1px; _margin:0px 0px; }
17 #dlMenu dt a{ width : 120px ; height:40px; font-size : 16px ; color :White ; display:block; background-color : black ;cursor:pointer; line-height:35px; _margin:0px 1px; }
18 #dlMenu dt a:hover{ background-color:White; border:1px solid black; color:Black; }
19 #dlMenu dd{ display:none; }
20 #dlMenu dd.Show{ display:block; position:absolute; width:119px; top:40px; margin-left:0.5px; left:1px; }
21 #dlMenu dd ul{ background-color:Black; width:119px; }
22 #dlMenu dd ul li{ width:119px; list-style:none; border-top:1px solid #fff; margin-bottom:5px; text-indent:5px; height:30px; line-height:30px; }
23 #dlMenu dd ul li a{ color:White; font-size:14px; }
24
25 /*摺叠菜单*/
26 #MenuOne{ width:160px;}
27 #MenuOne dt{ margin:1px 0px; }
28 #MenuOne dt a{ display:block; height:30px; width:160px; background-color:Black; color:White; font-size:24px; font-family:@新宋体; text-align:center; cursor:pointer; }
29 #MenuOne dd{ display:none; }
30 #MenuOne dd ul{ list-style:none; margin:5px 5px; }
31 #MenuOne dd ul li{ border-bottom:1px double #ccc; text-indent:5px; }
32 #MenuOne dd ul li a{ font-size:14px; }
33
34 </style>
35
36 </head>
37
38 <body>
39
40 <dl id="dlMenu">
41 <dt><a>Home</a></dt>
42 <dd>
43 <ul>
44 <li><a href="#">Today News1</a></li>
45 <li><a href="#">Hot News</a></li>
46 <li><a href="#">Interl News</a></li>
47 <li><a href="#">Man News</a></li>
48 <li><a href="#">Woman News</a></li>
49 </ul>
50 </dd>
51
52 <dt><a>News</a></dt>
53 <dd>
54 <ul>
55 <li><a href="#">Today News2</a></li>
56 <li><a href="#">Hot News</a></li>
57 <li><a href="#">Interl News</a></li>
58 <li><a href="#">Man News</a></li>
59 <li><a href="#">Woman News</a></li>
60 </ul>
61 </dd>
62
63 <dt><a>Blogs</a></dt>
64 <dd>
65 <ul>
66 <li><a href="#">Today News3</a></li>
67 <li><a href="#">Hot News</a></li>
68 <li><a href="#">Interl News</a></li>
69 <li><a href="#">Man News</a></li>
70 <li><a href="#">Woman News</a></li>
71 </ul>
72 </dd>
73
74 <dt><a>BBS</a></dt>
75 <dd>
76 <ul>
77 <li><a href="#">Today News4</a></li>
78 <li><a href="#">Hot News</a></li>
79 <li><a href="#">Interl News</a></li>
80 <li><a href="#">Man News</a></li>
81 <li><a href="#">Woman News</a></li>
82 </ul>
83 </dd>
84
85 <dt><a>About</a></dt>
86 <dd>
87 <ul>
88 <li><a href="#">Today News5</a></li>
89 <li><a href="#">Hot News</a></li>
90 <li><a href="#">Interl News</a></li>
91 <li><a href="#">Man News</a></li>
92 <li><a href="#">Woman News</a></li>
93 </ul>
94 </dd>
95
96 </dl>
97
98 <div style=" "></div>
99
100 <dl id='MenuOne'>
101 <dt><a>Home</a></dt>
102 <dd>
103 <ul>
104 <li><a href=''>aaaa</a></li>
105 <li><a href=''>aaaa</a></li>
106 <li><a href=''>aaaa</a></li>
107 <li><a href=''>aaaa</a></li>
108 <li><a href=''>aaaa</a></li>
109 </ul>
110 </dd>
111
112 <dt><a>News</a></dt>
113 <dd>
114 <ul>
115 <li><a href=''>aaaa</a></li>
116 <li><a href=''>aaaa</a></li>
117 <li><a href=''>aaaa</a></li>
118 <li><a href=''>aaaa</a></li>
119 <li><a href=''>aaaa</a></li>
120 </ul>
121 </dd>
122
123 <dt><a>Blogs</a></dt>
124 <dd>
125 <ul>
126 <li><a href=''>aaaa</a></li>
127 <li><a href=''>aaaa</a></li>
128 <li><a href=''>aaaa</a></li>
129 <li><a href=''>aaaa</a></li>
130 <li><a href=''>aaaa</a></li>
131 </ul>
132 </dd>
133
134 <dt><a>BBS</a></dt>
135 <dd>
136 <ul>
137 <li><a href=''>aaaa</a></li>
138 <li><a href=''>aaaa</a></li>
139 <li><a href=''>aaaa</a></li>
140 <li><a href=''>aaaa</a></li>
141 <li><a href=''>aaaa</a></li>
142 </ul>
143 </dd>
144
145 <dt><a>About</a></dt>
146 <dd>
147 <ul>
148 <li><a href=''>aaaa</a></li>
149 <li><a href=''>aaaa</a></li>
150 <li><a href=''>aaaa</a></li>
151 <li><a href=''>aaaa</a></li>
152 <li><a href=''>aaaa</a></li>
153 </ul>
154 </dd>
155 </dl>
156
157 </body>
158
159 </html>
JS CODE:
1 /*
2 * Menu Tools
3 * Date:2 010-09-07
4 * Author: MR Zhong
5 * QQ:453871973
6 * Email: [email protected]
7 */
8
9 var $ = function (id) {
10
11 return document.getElementById(id);
12
13 }
14
15 var Common = function () {
16
17 this.Check = function (obj, valueType) {
18
19 if (typeof (obj) != valueType) {
20
21 throw new Error("您的参数ID不正确！");
22
23 return false;
24
25 } else {
26
27 return true;
28
29 }
30
31 }
32
33 }
34
35 var Menus = function (mid) {
36
37 var _showTime = null;
38
39 var _showOrHide = null;
40
41 var _isOk = new Common().Check(mid, 'string');
42
43 if (!_isOk) return false;
44
45 this.MenuID = mid;
46
47 this.ShowTime = 100;
48
49 _showTime = this.ShowTime;
50
51 this.BindMenuEvent = function (fun) {
52
53 function HideMenuList(obj){
54
55 return setTimeout(function (){
56
57 obj.style.display = 'none';
58
59 },_showTime);
60
61 }
62
63 var _dtList = $(mid).getElementsByTagName('dt');
64
65 for (var i = 0; i < _dtList.length; i++) {
66
67 var _aList = _dtList[i].getElementsByTagName('a');
68
69 if (_aList.length > 0) {
70
71 _aList[0].onmouseover = function () {
72
73 var _dd = '';
74
75 var _scrollLeft = this.parentNode.offsetLeft;;
76
77 if(navigator.appName == 'Microsoft Internet Explorer'){
78
79 _dd = this.parentNode.nextSibling;
80
81 }else{
82
83 _dd = this.parentNode.nextSibling.nextSibling;
84
85 }
86
87 if('setAttribute' in _dd){
88
89 fun(_dd,_scrollLeft);
90
91 _dd.onmouseover = function(){ clearTimeout(_showOrHide); }
92
93 _dd.onmouseout = function(){ _showOrHide = HideMenuList(this); }
94 }
95
96 }
97
98 _aList[0].onmouseout = function(){
99
100 var obj = this;
101
102 var _dd = null;
103
104 if(navigator.appName == 'Microsoft Internet Explorer'){
105
106 _dd = obj.parentNode.nextSibling;
107
108 }
109 else{
110
111 _dd = obj.parentNode.nextSibling.nextSibling;
112
113 }
114
115 _showOrHide = HideMenuList(_dd);
116
117 }
118
119 }
120
121 }
122 }
123 }
124
125 window.onload = function () {
126
127 var menu = new Menus('dlMenu');
128
129 menu.ShowTime = 200;
130
131 menu.BindMenuEvent(function(obj,sLeft){
132
133 obj.style.display = 'block';
134 obj.style.position = 'absolute';
135 obj.style.left = sLeft + 'px';
136 obj.style.top = '40px';
137 obj.style.marginLeft = '1px';
138
139 });
140
141 menu = new Menus('MenuOne');
142
143 menu.ShowTime = 50;
144
145 menu.BindMenuEvent(function(obj){
146
147 obj.style.display = 'block';
148
149 });
150
151 }
152
各位有什么好的建议可留言交流！
相关阅读 更多 +
