在网页中自己创建右键菜单

来源：互联网发布：淘宝买瓷砖靠谱吗编辑：程序博客网时间：2024/04/30 10:36

禁用网页右键弹出菜单的例子就见多了，其实我们还可以把右键菜单替换自定义的内容，某些时候这还是一个不错的操作方式。原理很简单，先看看核心代码：
      var oPopup = window.createPopup();                    //创建弹出式菜单实例
      var oPopBody = oPopup.document.body;                  //这两句设置菜单的内容
      oPopBody.innerHTML = "菜单内容";                       //可以合并为oPopup.document.body.innerHTML="菜单内容";
      oPopup.show(event.x, event.y, 90, 41, document.body); //在需要的地方弹出菜单，90、41分别为菜单宽度和高度

　　应该很好理解吧。下面给一个实例，是我做的图片新闻的后台管理页面，左击图片修改内容，右击图片弹出操作菜单。

<HTML>
<HEAD>
<TITLE>自定义弹出菜单</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<LINK href="../css/css.css" type=text/css rel=stylesheet>
<LINK href="../css/css2.css" type=text/css rel=stylesheet>

<style type="text/css">

</style>
<script language="javascript">
var oPopup = window.createPopup();
function PopMenu(id)
{
    var oPopBody = oPopup.document.body;
    oPopBody.style.backgroundColor = "buttonface";
    oPopBody.style.border = "solid black 1px";
    oPopBody.innerHTML = ""
        +"<table cellpadding=0 cellspacing=0 border=0 width=100% style='font-size:12px;'>"
        +"<tr><td valign=middle height=20 onmouseover=/"this.bgColor='highlight';this.style.color='highlighttext';/" "
        +"onmouseout=/"this.bgColor='';this.style.color=''/" onclick=/"parent.window.open('/news/view.asp?id="+id+"');/">  查看该新闻 </td></tr>"
        +"<tr><td bgcolor='threedshadow' height=1></td></tr>"
        +"<tr><td valign=middle height=20 onmouseover=/"this.bgColor='highlight';this.style.color='highlighttext';/" "
        +"onmouseout=/"this.bgColor='';this.style.color=''/" onclick=/"parent.document.frames['main'].location="
        +"'newsimgdel.asp?id="+id+"'/">  删除 </td></tr><table>";
        //+"<tr><td bgcolor='threedhighlight' height=1></td></tr>"
    HidePrompt();
    oPopup.show(event.x, event.y, 90, 41, document.body);
    return false;
}

function ShowPrompt()
{
    pt.style.pixelLeft = event.x;
    pt.style.pixelTop = event.y;
    pt.style.display = "block";
}
function HidePrompt()
{
    pt.style.display = "none";
}
</script>
</HEAD>
<BODY leftMargin=0 topMargin=0 marginheight="0" marginwidth="0" style="text-align:center;">
<div class="prompt" id="pt"> 左击修改资料，右击弹出操作菜单  </div>
<table height="100%" width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="333333"><tr>
<td width="200" align="left" valign="top" bgcolor="#F2F2F2">
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr><td align="center">
图片新闻
</td></tr><tr><td>
</td></tr>
<tr height="100%"><td height="100%" align="center" valign="top">
<DIV style="WIDTH:200;HEIGHT:100%;overflow:auto;"><br>
<a href='javascript:void(0);' onclick="" onmouseover='ShowPrompt();' onmouseout='HidePrompt();'
oncontextmenu='PopMenu(1);return false;'><img src='news1.gif' border=0 width=150 height=110><br>
新闻图片1<br></a><br>
<a href='javascript:void(0);' onclick="" onmouseover='ShowPrompt();' onmouseout='HidePrompt();'
oncontextmenu='PopMenu(1);return false;'><img src='news1.gif' border=0 width=150 height=110><br>
新闻图片2<br></a><br>
<a href='javascript:void(0);' onclick="" onmouseover='ShowPrompt();' onmouseout='HidePrompt();'
oncontextmenu='PopMenu(1);return false;'><img src='news1.gif' border=0 width=150 height=110><br>
新闻图片3<br></a><br>
<a href='javascript:void(0);' onclick="" onmouseover='ShowPrompt();' onmouseout='HidePrompt();'
oncontextmenu='PopMenu(1);return false;'><img src='news1.gif' border=0 width=150 height=110><br>
新闻图片4<br></a><br>
<a href='javascript:void(0);' onclick="" onmouseover='ShowPrompt();' onmouseout='HidePrompt();'
oncontextmenu='PopMenu(1);return false;'><img src='news1.gif' border=0 width=150 height=110><br>
新闻图片5<br></a><br>
<a href='javascript:void(0);' onclick="" onmouseover='ShowPrompt();' onmouseout='HidePrompt();'
oncontextmenu='PopMenu(1);return false;'><img src='news1.gif' border=0 width=150 height=110><br>
新闻图片6<br></a><br>
<br></div></td></tr></table></td><td bgcolor="#FFFFFF">
<iframe name="main" frameborder=0 width=100% scrolling=auto height=100% src="newsimg.asp"></iframe>
</td></tr></table>
</body>
</html>