转一个右键菜单,支持不同对象不同菜单,兼容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 @ 2008-11-06 21:10  架构师聊技术  阅读(268)  评论(0编辑  收藏  举报