首页 > 编程语言> 文章详细

JS面向对象编程 for Menu Demo

2019-07-21 23:03:22 阅读：162 来源： 互联网

标签：function style obj Menu dd 面向对象编程 Demo var News

原文链接：http://www.cnblogs.com/keke/archive/2010/09/07/1820334.html

最近看了《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

标签：function,style,obj,Menu,dd,面向对象编程,Demo,var,News
来源： https://blog.csdn.net/weixin_30252155/article/details/96772821

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JS面向对象编程 for Menu Demo