转一个右键菜单,支持不同对象不同菜单,兼容IE、Firefox

<html>
<head>
<title>ddd</title>

<style>
.DreamMenu {
    position:absolute;
    visibility:hidden;
    z-index:100;
    overflow:hidden;
    width:150px;
    background-color:buttonface;
    border:dimgray 1px solid !important;
    border:buttonhighlight menu menu buttonhighlight 2px outset;
    padding:1px !important;
    padding:1px 1px 1px 0px;
    font-size:12px;
}

.DreamMenu ul {
    margin:1px;
    border-bottom:buttonhighlight 1px solid;
    border-top:buttonshadow 1px solid;
}

.DreamMenu a {
    display:block;
    width:100%;
    padding:1px 2px 2px 20px;
    cursor:default;
    text-decoration:none;
    color:#000000;
}

.DreamMenu a:hover {
    background:highlight;
    color:#ffffff;
}
</style>

</head>
<body menu='menu'>

<!---这段js最好写进文件方便用,为了在51能运行就直接写进来了--->
<script>
/***
DreamCore - JsLib/Menu
Date     : Dec 03, 2006
Copyright: DreamSoft Co.,Ltd.
Mail     : [email]Dream@Dreamsoft.Ca[/email]
Author   : Egmax
Browser : IE5.0&+,Firefox1.5&+,Netscape7.0&+
Update:
***/

if(!document.all) document.captureEvents(Event.MOUSEDOWN);
var _Tmenu = 0;
var _Amenu = 0;
var _Type = 'A';
document.onclick = _Hidden;
function _Hidden()
{
    if(_Tmenu==0) return;
    document.getElementById(_Tmenu).style.visibility='hidden';
    _Tmenu=0;
}

document.oncontextmenu = function (e)
{
    _Hidden();
    var _Obj = document.all ? event.srcElement : e.target;
    if(_Type.indexOf(_Obj.tagName) == -1) return;
    _Amenu = _Obj.getAttribute('menu');
    if(_Amenu == 'null') return;
    if(document.all) e = event;
    _ShowMenu(_Amenu, e);
    return false;
}

function _ShowMenu(Eid, event)
{
    var _Menu = document.getElementById(Eid);
    var _Left = event.clientX + document.body.scrollLeft;
    var _Top = event.clientY + document.body.scrollTop;
    _Menu.style.left = _Left.toString() + 'px';
    _Menu.style.top = _Top.toString() + 'px';
    _Menu.style.visibility = 'visible';
    _Tmenu = Eid;
}

/***
可以支持其他标签INPUT,IMG
***/
</script>
<script>_Type='INPUT,A,DIV,BODY,IMG';</script>

<!-----设置一个菜单层---->
<div id="menu" class='DreamMenu'>
<a href='0'>您好</a>
<a href='1'>我是主菜单</a>
<a href='2'>在页面上单击</a>
<a href='3'>就可以看到我</a>
<ul></ul>
<a href='4'>打印</a>
</div>

<!-----设置一个菜单层---->
<div id="menu2" class='DreamMenu'>
<a href='0'>哈哈</a>
<a href='1'>我是个链接</a>
<a href='2'>好开心啊</a>
<a href='3'>查看</a>
<ul></ul>
<a href='4'>打印</a>
</div>

<!-----设置一个菜单层---->
<div id="menu3" class='DreamMenu'>
<a href='0'>哈哈</a>
<a href='1'>我是图片</a>
<a href='2'>虽然打不开</a>
<a href='3'>查看</a>
<ul></ul>
<a href='4'>打印</a>
</div>

<table><tr><td height=100>
<!-----设置一个菜单menu属性---->
<a href='test.php' menu='menu2'>菜单1</a>
<a href='test.php' menu='menu2'>菜单2</a>
</td></tr></table>

<div style='height:300;' menu='menu'></div>

<img src='http://bbs.51js.com/images/default/logo.gif' menu='menu3'>

在图片、链接、和窗口点右键看效果,可以定义其他元素,只要设定好菜单,也可以每个元素一个菜单
posted @   架构师聊技术  阅读(268)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端
点击右上角即可分享
微信分享提示