JS面向对象编程 for Menu Demo

最近看了《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 =" height:300px;" ></ 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: co.mr.co@gmail.com
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

 

各位有什么好的建议可留言交流！

 

转载于:https://www.cnblogs.com/keke/archive/2010/09/07/1820334.html