• 自定义网页右键弹出菜单


    禁用网页右键弹出菜单的例子就见多了,其实我们还可以把右键菜单替换自定义的内容,某些时候这还是一个不错的操作方式。原理很简单,先看看核心代码:
          var oPopup = window.createPopup();                    //创建弹出式菜单实例
          var oPopBody = oPopup.document.body;                  //这两句设置菜单的内容
          oPopBody.innerHTML = "菜单内容";                       //可以合并为oPopup.document.body.innerHTML="菜单内容";
          oPopup.show(event.x, event.y, 9041, 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">
    <!--
    body td
    {
    font-size:12px;
    }
    .prompt
    {
    height:22; font-size:12px;
    background-color:lightyellow;
    border:solid red 1px;
    position:absolute;
    left:0;top:0;
    padding:4px;
    display:none;
    filter: Alpha(Opacity=80);
    }
    -->
    </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+"');\">&nbsp;&nbsp;查看该新闻 </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+"'\">&nbsp;&nbsp;删除 </td></tr><table>";
            //+"<tr><td bgcolor='threedhighlight' height=1></td></tr>"
        HidePrompt();
        oPopup.show(event.x, event.y, 9041, 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"> 左击修改资料,右击弹出操作菜单&nbsp;&nbsp;</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>

  • 相关阅读:
    鼠标移动,背景变色
    datatable 删除行
    GridView新增一行,更新所有行實現
    让层垂直居中于浏览器窗口
    extjs学习笔记(转)
    Extjs中的panel
    JDK和JRE的区别(转)
    EXTJS中form添加按钮触发事件
    web.xml详解
    Oracle数据库中的诊断文件(转)
  • 原文地址:https://www.cnblogs.com/liufei88866/p/1968025.html
Copyright © 2020-2023  润新知