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

王朝html/css/js·作者佚名  2006-01-08
宽屏版  字体: |||超大  

/////////////////////**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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
© 2005- 王朝网络 版权所有