一是采用,ajax实现,二是采用js+div实现,出于对于功能菜单一般都是不是很变动的数据,据于决定采用,js+div实现此功能.
网络上也有很多此类的代码,在写时也参考了些这些代码,最终发现有些过于烦琐,一大堆的代码.让我们看起来头痛,管理起来也麻烦.我查了些java对像的相关属性及参考这个源码.写了以下菜单.
发出来在网络上,与大家共享,不足之处,多多指教.
功能要点:
1.取出页面上一个对像的X,Y位置,用于把DIV显示在此处
2.利用DIV的属性显示或隐藏DIV
以下为详细代码,可直接运行.
| 以下为引用的内容： <html> <head><title></title> </head> <body> <script language="javascript"> <!-- /** * 取得X坐标 */ function getXPosition(id){ var e=document.getElementById(id); var x=e.offsetLeft; while(e=e.offsetParent){ x+=e.offsetLeft; } return x; } /** * 取得Y坐标 */ function getYPosition(id){ var e=document.getElementById(id); var y=e.offsetTop; while(e=e.offsetParent){ y+=e.offsetTop; } return y; } /** if(showMenuId!="0" && showMenuId!=menuId){ popClose(showMenuId); } showMenuId=menuId; } /** -->
<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" > <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" > |
原文地址:http://blog.csdn.net/y_mo/archive/2008/08/18/2790411.aspx