js實現自定義右鍵菜單


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>javascript右鍵菜單</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<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 : Dream@Dreamsoft.Ca
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';
var _Menu = "null";
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) {
_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;
_Menu.onclick
= transfer;
_Menu.oncontextmenu
= no_context_menu;
}

function transfer(e) {
e
= e || window.event; e.cancelBubble = true;
}

function no_context_menu(e) {
e
= e || window.event;
e
= e || window.event; e.cancelBubble = true;
return;
}
/***
可以支持其他標簽INPUT,IMG
**
*/
</script>
<script> _Type = 'INPUT,A,DIV,BODY,IMG';</script>
<!-----設置一個菜單層---->
<div id="menu" class='DreamMenu'>
<a href='javascript:;'>您好</a> <a href='javascript:;'>我是主菜單</a> <a href='javascript:;'>
在頁面上單擊
</a> <a href='javascript:;'>就可以看到我</a>
<ul>
</ul>
<a href='javascript:;'>打印</a>
</div>
<!-----設置一個菜單層---->
<div id="menu2" class='DreamMenu'>
<a href='javascript:;'>哈哈</a> <a href='javascript:;'>我是個鏈接</a> <a href='javascript:;'>
好開心啊
</a> <a href='javascript:;'>查看</a>
<ul>
</ul>
<a href='javascript:;'>打印</a>
</div>
<!-----設置一個菜單層---->
<div id="menu3" class='DreamMenu'>
<a href='javascript:;'>哈哈</a> <a href='javascript:;'>我是圖片</a> <a href='javascript:;'>
雖然打不開
</a> <a href='javascript:;'>查看</a>
<ul>
</ul>
<a href='javascript:;'>打印</a>
</div>
<table>
<tr>
<td height="100">
<!-----設置一個菜單menu屬性---->
<a href='javascript:;' menu='menu2'>菜單1</a> <a href='javascript:;' menu='menu2'>菜單2</a>
</td>
</tr>
</table>
<div style='height: 300;' menu='menu'>
</div>
<img src='qiougou.gif' menu='menu3' />
</body>
</html>

 

 

經過上面的改編:

if (!document.all) document.captureEvents(Event.MOUSEDOWN);
var _Tmenu = 0;
var _Amenu = 0;
var _Type = 'DIV';
document.onclick
= _Hidden;
function _Hidden() {
if (_Tmenu || _Tmenu == null || _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 || _Amenu == null || _Amenu == 'null') return;
if (document.all) e = event;
_ShowMenu(_Amenu, e);
return false;
}
function _ShowMenu(Eid, event, type) {
var _Menu = document.getElementById(Eid);
var _Left = event.clientX + document.body.scrollLeft;
var _Top = event.clientY + document.body.scrollTop;
var _menuOffsetHeight = parseInt(_Menu.offsetHeight);
if (parseInt(document.body.clientHeight) - parseInt(_Top) < _menuOffsetHeight) {//400
_Top = _Top - _menuOffsetHeight;
_Menu.style.left
= _Left.toString() + 'px';
_Menu.style.top
= _Top.toString() + 'px';
_Menu.style.visibility
= 'visible';
_Tmenu
= Eid;

}
else {
_Menu.style.left
= _Left.toString() + 'px';
_Menu.style.top
= _Top.toString() + 'px';
_Menu.style.visibility
= 'visible';
_Tmenu
= Eid;
}
}

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com