利用JS實(shí)現(xiàn)WEB程序中的上下文菜單
瀏覽量：4251
上下文菜單在CS結(jié)構(gòu)中經(jīng)常出現(xiàn)，現(xiàn)因項(xiàng)目需求，需要在BS結(jié)構(gòu)中實(shí)現(xiàn)上下文菜單，在網(wǎng)上查找案例，再經(jīng)過自己改進(jìn)，終于達(dá)到項(xiàng)目要求，現(xiàn)貼出代碼
html頁(yè)面加入代碼：
<div id="menu" class='DreamMenu' style="width:100px;">
<a href='javascript:void(0);' onclick='edit();' id="aedit">
編輯</a>
<ul>
</ul>
<a href='javascript:void(0);' onclick='delall();' id="adel">
刪除</a>
<ul>
</ul>
<a href='javascript:void(0);' onclick='show();' id="adetail">
詳情</a>
</div>
js頁(yè)代碼：
if(!document.all) document.captureEvents(Event.MOUSEDOWN);
var _Tmenu = 0;
var _Amenu = 0;
var _Type = 'checkbox';
var _Menu = "null";
document.onclick = _Hidden;
function _Hidden()
{
if(_Tmenu==0) return;
document.getElementById(_Tmenu).style.visibility='hidden';
_Tmenu=0;
}
{
_Hidden();
var _Obj = document.all ? event.srcElement : e.target;
_Amenu = _Obj.getAttribute('menu');
if(document.all) e = event;
_ShowMenu(_Amenu, e);
permissionkey(); //判斷權(quán)限
}
function permissionkey(){};
function _ShowMenu(Eid, event)
{
_Menu = document.getElementById(Eid);
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;
}
e=e||window.event;e.cancelBubble=true;
}
function no_context_menu(e){
e=e||window.event;
e=e||window.event;e.cancelBubble=true;
return;
}
position: absolute;
visibility: hidden;
z-index: 100;
overflow: hidden;
width: 70px;
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;
}
margin: 1px;
border-bottom: buttonhighlight 1px solid;
border-top: buttonshadow 1px solid;
}
display: block;
width: 100%;
padding: 1px 2px 2px 20px;
cursor: default;
text-decoration: none;
color: #000000;
}
background: highlight;
color: #ffffff;
}