弹出菜单层二
在网找资料的时候发现了很有用的js代码。它实现了弹出菜单的功能。
一、下面是js代码:
// JScript 文件
Code
1// JScript 文件
2var menuTimer =null;
3function showmenu(obj1,obj2,state,location){
4 var btn=document.getElementById(obj1);
5 var obj=document.getElementById(obj2);
6 var h=btn.offsetHeight;
7 var w=btn.offsetWidth;
8 var x=btn.offsetLeft;
9 var y=btn.offsetTop;
10
11 obj.onmouseover =function(){
12 showmenu(obj1,obj2,'show',location);
13 }
14 obj.onmouseout =function(){
15 showmenu(obj1,obj2,'hide',location);
16 }
17
18 while(btn=btn.offsetParent){y+=btn.offsetTop;x+=btn.offsetLeft;}
19
20 var hh=obj.offsetHeight;
21 var ww=obj.offsetWidth;
22 var xx=obj.offsetLeft;//style.left;
23 var yy=obj.offsetTop;//style.top;
24 var obj2state=state.toLowerCase();
25 var obj2location=location.toLowerCase();
26
27 var showx,showy;
28
29 if(obj2location=="left" || obj2location=="l" || obj2location=="top" || obj2location=="t" || obj2location=="u" || obj2location=="b" || obj2location=="r" || obj2location=="up" || obj2location=="right" || obj2location=="bottom"){
30 if(obj2location=="left" || obj2location=="l"){showx=x-ww;showy=y;}
31 if(obj2location=="top" || obj2location=="t" || obj2location=="u"){showx=x;showy=y-hh;}
32 if(obj2location=="right" || obj2location=="r"){showx=x+w;showy=y;}
33 if(obj2location=="bottom" || obj2location=="b"){showx=x;showy=y+h;}
34 }else{
35 showx=xx;showy=yy;
36 }
37 obj.style.left=showx+"px";
38 obj.style.top=showy+"px";
39 if(state =="hide"){
40 menuTimer =setTimeout("hiddenmenu('"+ obj2 +"')", 500);
41 }else{
42 clearTimeout(menuTimer);
43 obj.style.visibility ="visible";
44 }
45}
46function hiddenmenu(psObjId){
47 document.getElementById(psObjId).style.visibility ="hidden";
48}
49
50
1// JScript 文件
2var menuTimer =null;
3function showmenu(obj1,obj2,state,location){
4 var btn=document.getElementById(obj1);
5 var obj=document.getElementById(obj2);
6 var h=btn.offsetHeight;
7 var w=btn.offsetWidth;
8 var x=btn.offsetLeft;
9 var y=btn.offsetTop;
10
11 obj.onmouseover =function(){
12 showmenu(obj1,obj2,'show',location);
13 }
14 obj.onmouseout =function(){
15 showmenu(obj1,obj2,'hide',location);
16 }
17
18 while(btn=btn.offsetParent){y+=btn.offsetTop;x+=btn.offsetLeft;}
19
20 var hh=obj.offsetHeight;
21 var ww=obj.offsetWidth;
22 var xx=obj.offsetLeft;//style.left;
23 var yy=obj.offsetTop;//style.top;
24 var obj2state=state.toLowerCase();
25 var obj2location=location.toLowerCase();
26
27 var showx,showy;
28
29 if(obj2location=="left" || obj2location=="l" || obj2location=="top" || obj2location=="t" || obj2location=="u" || obj2location=="b" || obj2location=="r" || obj2location=="up" || obj2location=="right" || obj2location=="bottom"){
30 if(obj2location=="left" || obj2location=="l"){showx=x-ww;showy=y;}
31 if(obj2location=="top" || obj2location=="t" || obj2location=="u"){showx=x;showy=y-hh;}
32 if(obj2location=="right" || obj2location=="r"){showx=x+w;showy=y;}
33 if(obj2location=="bottom" || obj2location=="b"){showx=x;showy=y+h;}
34 }else{
35 showx=xx;showy=yy;
36 }
37 obj.style.left=showx+"px";
38 obj.style.top=showy+"px";
39 if(state =="hide"){
40 menuTimer =setTimeout("hiddenmenu('"+ obj2 +"')", 500);
41 }else{
42 clearTimeout(menuTimer);
43 obj.style.visibility ="visible";
44 }
45}
46function hiddenmenu(psObjId){
47 document.getElementById(psObjId).style.visibility ="hidden";
48}
49
50
二、应用
示例前台代码
1<head runat="server">
2 <title>无标题页</title>
3
4 <script language="javascript" type="text/javascript" src="jscript.js"></script>
5
6 <style>
7 #mdiv{}{
8 position: absolute;
9 border: 1px solid #92B7E5;
10 top: 0px;
11 left: 0px;
12 width: 150px;
13 height: 170px;
14 background-color: #FFFFFF;
15 visibility: hidden;
16 padding: 5px;
17 overflow: hidden;
18 }
19 </style>
20</head>
21<body>
22 <p>
23 调用:</p>
24 <p>
25 showmenu(thisobjid,menuobjid,state,position)
26 </p>
27 <p>
28 thisobjid =控件本身id</p>
29 <p>
30 menuobjid =弹出菜单层的id</p>
31 <p>
32 state 有两个值可选,show即显示菜单 hidden即隐藏菜单</p>
33 <p>
34 position 有四个值可选,top菜单显示于顶部 bottom菜单显示于底部 left菜单显示于左侧 right菜单显示于右侧</p>
35 <p>
36 </p>
37 <p>
38 <a href="" id="m1" onmouseover="showmenu('m1','mdiv','show','right')" onmouseout="showmenu('m1','mdiv','hide','right')"
39 style="cursor: pointer;">鼠标移到这里来看看</a>
40 <div id="mdiv" runat="server">
41 菜单内容。。。
42 </div>
43</body>
1<head runat="server">
2 <title>无标题页</title>
3
4 <script language="javascript" type="text/javascript" src="jscript.js"></script>
5
6 <style>
7 #mdiv{}{
8 position: absolute;
9 border: 1px solid #92B7E5;
10 top: 0px;
11 left: 0px;
12 width: 150px;
13 height: 170px;
14 background-color: #FFFFFF;
15 visibility: hidden;
16 padding: 5px;
17 overflow: hidden;
18 }
19 </style>
20</head>
21<body>
22 <p>
23 调用:</p>
24 <p>
25 showmenu(thisobjid,menuobjid,state,position)
26 </p>
27 <p>
28 thisobjid =控件本身id</p>
29 <p>
30 menuobjid =弹出菜单层的id</p>
31 <p>
32 state 有两个值可选,show即显示菜单 hidden即隐藏菜单</p>
33 <p>
34 position 有四个值可选,top菜单显示于顶部 bottom菜单显示于底部 left菜单显示于左侧 right菜单显示于右侧</p>
35 <p>
36 </p>
37 <p>
38 <a href="" id="m1" onmouseover="showmenu('m1','mdiv','show','right')" onmouseout="showmenu('m1','mdiv','hide','right')"
39 style="cursor: pointer;">鼠标移到这里来看看</a>
40 <div id="mdiv" runat="server">
41 菜单内容。。。
42 </div>
43</body>
可以从后台代码控制菜单的内容和样式:
示例后台代码
1 protected void Page_Load(object sender, EventArgs e)
2 {
3 mdiv.InnerHtml = "<b>菜单内容</b>";
4 mdiv.Style.Add("width", "50px");
5 mdiv.Attributes.Add("style", "background-color:red;");
6 }
1 protected void Page_Load(object sender, EventArgs e)
2 {
3 mdiv.InnerHtml = "<b>菜单内容</b>";
4 mdiv.Style.Add("width", "50px");
5 mdiv.Attributes.Add("style", "background-color:red;");
6 }
小结:时间太紧,先应用,回头在研究搞明白。
人的一生应该这样度过:当他回首往事的时候,不会因为虚度年华而悔恨,也不会因为碌碌无为而羞愧。