摘自：http://blog.csdn.net/y_mo/archive/2008/08/18/2790411.aspx
系统改造,把原来的功能菜单从新修改成windows系统菜单形式,实现的方法有很多种,
一是采用,ajax实现,二是采用js+div实现,出于对于功能菜单一般都是不是很变动的数据,据于决定采用,js+div实现此功能.
网络上也有很多此类的代码,在写时也参考了些这些代码,最终发现有些过于烦琐,一大堆的代码.让我们看起来头痛,管理起来也麻烦.我查了些java对像的相关属性及参考这个源码.写了以下菜单.
发出来在网络上,与大家共享,不足之处,多多指教.
功能要点:
1.取出页面上一个对像的X,Y位置,用于把DIV显示在此处
2.利用DIV的属性显示或隐藏DIV
以下为详细代码,可直接运行.
Code
1 <html>
2 <head><title></title>
3 </head>
4 <body>
5 <script language="javascript">
6 <!--
7 /**
8 * 取得X坐标
9 */
10 function getXPosition(id){
11 var e=document.getElementById(id);
12 var x=e.offsetLeft;
13 while(e=e.offsetParent){
14 x+=e.offsetLeft;
15 }
16 return x;
17 }
18 /**
19 * 取得Y坐标
20 */
21 function getYPosition(id){
22 var e=document.getElementById(id);
23 var y=e.offsetTop;
24 while(e=e.offsetParent){
25 y+=e.offsetTop;
26 }
27 return y;
28 }
29
30 /**
31 * 显示DIV功能菜单
32 */
33 var showMenuId=0;
34 function popUp(xyId,menuId) {
35 var x = getXPosition(xyId);
36 var y = getYPosition(xyId)+20;
37 newX = x;// document.getElementById(menu).style.left;//window.event.clientX;
38 newY = y;//document.getElementById(menu).style.top;//event.clientY;
39 menu = document.getElementById(menuId);
40 menu.style.visibility = "visible"
41 menu.style.top = newY;
42 menu.style.left = newX ;
43 if(showMenuId!="0" && showMenuId!=menuId){
44 popClose(showMenuId);
45 }
46 showMenuId=menuId;
47 }
48
49 /**
50 * 关闭DIV功能菜单
51 */
52 function popClose(menuId){
53 menu = document.getElementById(menuId);
54 menu.style.visibility = "hidden"
55 }
56
57 -->
58 </script>
59
60
61 <table border=1>
62 <tr>
63 <td>
64 <div id="xy1" onclick="popUp('xy1','menu1')" style="height:35px;border:#000000 solid 0px"><a href="####">内容管理</a>
65 </div>
66 </td>
67 <td>
68 <div id="xy2" onclick="popUp('xy2','menu2')" style="height:35px;border:#000000 solid 0px"><a href="####">系统管理</a>
69 </div>
70 </td>
71 </tr>
72 </table>
73 <!---menu difined--->
74
75 <div id='menu1' onmouseover="popUp('xy1','menu1')" onmouseout = "popClose('menu1')"style=" z-index:3;position:absolute;top:0;left:0;visibility:hidden;padding:3px;border:1px solid #528AC6;background-color:#FFFFFF" >
76 <center><b>内容信息管理</b><center><br>
77 <center><b>内容类别管理</b><center><br>
78 </div>
79
80 <div id='menu2' onmouseover="popUp('xy2','menu2')" onmouseout = "popClose('menu2')" style=" z-index:3;position:absolute;top:0;left:0;visibility:hidden;padding:3px;border:1px solid #528AC6;background-color:#FFFFFF" >
81 <center><b>内容信息管理</b><center><br>
82 <center><b>内容类别管理</b><center><br>
83 </div>
84
扫一扫
2075
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
