用DHTML中的Popup Object实现跨框架显示菜单(from MSDN)

[入库:2005年8月18日] [更新:2007年3月25日]

本文简介:选择自 uipro 的 blog

/////////////////////**frames.htm**//////////////////////////////////////////////////

<html>
<head>
<title>网页跨框架菜单 from msdn</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>

<frameset rows="92,*" cols="*" framespacing="4" frameborder="yes" border="4">
  <frame src="top.htm" name="topframe" scrolling="no" >
  <frame src="bottom.htm" name="mainframe">
</frameset>
<noframes><body>

</body></noframes>
</html>

/////////////////////**top.htm**//////////////////////////////////////////////////

<html>
<head>
<title>msdn的示例</title>
<script>
var opopup = window.createpopup();
function richcontext()
{
    var lefter2 = event.offsety+0;
    var topper2 = event.offsetx+15;
    opopup.document.body.innerhtml = ocontext2.innerhtml;
    opopup.show(topper2, lefter2, 210, 84, contextobox);
}
</script>
</head>
<body>

 

<span id="contextobox" style="  cursor:hand; margin-left:5px; margin-right:10px; background:#e4e4e4; width:300; height:40; padding:20px;" oncontextmenu="richcontext(); return false"  >right-click inside this box.</span>

<div id="ocontext2" style="display:none">
<div style="position:relative; top:0; left:0; border:2px solid black;  border-top:2px solid #cccccc; border-left:2px solid #cccccc; background:#666666; height:110px; width:207px;">
  <div style="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.location.href='http://www.microsoft.com';">
    &nbsp;&nbsp;home</div>
  <div style="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.location.href='http://search.microsoft.com';">
    &nbsp;&nbsp;search</div>
  <div style="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.location.href='http://www.microsoft.com/ie';">
    &nbsp;&nbsp;intenet explorer</div>
  <div style="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt; cursor:hand" onmouseover="this.style.background='#ffffff'" onmouseout="this.style.background='#cccccc'" onclick="parent.location.href='http://www.microsoft.com/info/cpyright.htm';">
    &#169;2001 microsoft corporation</div>
</div>

</body>
</html>

/////////////////////**bottom.htm**//////////////////////////////////////////////////
<html>
<head>
<title>untitled document</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>

<body>
本例是从msdn中的using the popup object一文中简化而来的.
popup object还有很多强大的功能,强烈建议大家都看看using the popup object一文.
</body>
</html>

本文关键:DHTML,Popup Object,frame,菜单
  相关方案
Google
 

本站最佳浏览方式为 分辨率 1024x768 IE 6.0(或更高版本的 IE浏览器)

go top