NET鼠标右键菜单JS[原]

来源：互联网发布：传奇霸业轮回数据库编辑：程序博客网时间：2024/06/02 03:43

在网络资料管理里因为模仿windows系统的资源管理系统,所以需要用到右键菜单,纯JS写的吧又不能用.NET里的服务器控件,所以就自己模仿别人的写了一个!
1.首先加个样式表,如下:
<style type="text/css">
/*右键菜单*/
.cMenu {BACKGROUND-COLOR:#FFFFFF; border:1px solid #ACA899; COLOR:#000000; CURSOR:default; FONT-SIZE:10px; color:#000000; line-height:150%; POSITION:absolute; VISIBILITY:hidden; WIDTH:162px; padding:2px;}
.cMenu a {color:#000000; text-decoration: none; cursor:default;} .cMenu a:link,.cMenu a:visited,.cMenu a:active {color:#000000; text-decoration: none} .cMenu a:hover {color:#000000; text-decoration: none}
.menuitems {font-size:10px;MARGIN:0px; padding:1px 3px 0px 15px;cursor:pointer}
.menuoff {font-size:10px;MARGIN:0px; padding:1px 3px 0px 15px; color:#ACA899;}
.STYLE2 { FONT-SIZE: 10px }
#popitmenu { BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; Z-INDEX: 100; VISIBILITY: hidden; FONT: 10px/18px Verdana; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid; POSITION: absolute; BACKGROUND-COLOR: white }
#popitmenu A { DISPLAY: block; PADDING-LEFT: 6px; COLOR: black; TEXT-DECORATION: none }
#popitmenu A:hover { BACKGROUND-COLOR: #ccff9d }
/*右键菜单结束*/
</style>
2.加上这个JS代码:

<script>
function showmenuie5()
{
var rightedge=window.document.documentElement.clientWidth-event.clientX
var bottomedge=window.document.documentElement.clientHeight-event.clientY
if (rightedge<ie5menu.offsetWidth)
ie5menu.style.left=window.document.documentElement.scrollLeft+event.clientX-ie5menu.offsetWidth
else
ie5menu.style.left=window.document.documentElement.scrollLeft+event.clientX

if (bottomedge<ie5menu.offsetHeight)
ie5menu.style.top=window.document.documentElement.scrollTop+event.clientY-ie5menu.offsetHeight
else
ie5menu.style.top=window.document.documentElement.scrollTop+event.clientY
ie5menu.style.visibility="visible"
return false
}

function hidemenuie5()
{
ie5menu.style.visibility="hidden"
}

function highlightie5()
{
if (event.srcElement.className=="menuitems")
{
event.srcElement.style.backgroundColor="highlight"
event.srcElement.style.color="white"
}
}

function lowlightie5()
{
if (event.srcElement.className=="menuitems")
{
event.srcElement.style.backgroundColor=""
event.srcElement.style.color="#000000"
}
}

function ChangeBG()
{
oEl=event.srcElement
}
</script>

3.这是右键菜单的详细内容
<div class="cMenu" id="ie5menu" onmouseout="lowlightie5()" onmouseover="highlightie5()" style="left: 0px; top: 0px">
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LB_Thumbnails_Click"><div class="menuitems">缩略图</div></asp:LinkButton>
<asp:LinkButton ID="LinkButton5" runat="server" OnClick="LB_tiled_Click"><div class="menuitems">平铺</div></asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="LB_icon_Click"><div class="menuitems">图标</div></asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" OnClick="LB_list_Click"><div class="menuitems">列表</div></asp:LinkButton>
<asp:LinkButton ID="LinkButton4" runat="server" OnClick="LB_particularList_Click"><div class="menuitems">详细列表</div></asp:LinkButton>
<hr noshade size="1" color="#ACA899"/>
<asp:LinkButton ID="LinkButton6" runat="server" OnClientClick="javascript:window.location.href=window.location.href;"><div class="menuitems">刷新</div></asp:LinkButton>
<a onclick="javascript:history.go(-1);"><div class="menuitems">返回</div></a>
<a href="#" onclick="newdir();" ><div class="menuitems">新建文件夹</div></a>
<a href='upload.aspx?paneid=<%= paneid%> '><div class="menuitems">上传</div></a>
<a href="#" onclick="if(ischecked()){movedir();}else{return false;}" id="movedira" ><div class="menuitems">剪切</div></a>
<a href="#" onclick="if(ischecked()){copydir();}else{return false;}" id="copydira" ><div class="menuitems">复制</div></a>
<asp:LinkButton ID="lbk_del" runat="server" OnClick="lbk_del_Click"><div class="menuitems">删除</div></asp:LinkButton>
<a href='# ' onclick="if(ischecked()){sharelink();}else{return false;}" id="sharea"><div class="menuitems">共享</div></a>
<a href="#" id="naminga" style="display:none" ><div class="menuitems">重命名</div></a>
<a id="movediraoff" ><div class="menuoff">剪切</div></a>
<a id="copydiraoff" ><div class="menuoff">复制</div></a>
<a id="lbk_deloff" ><div class="menuoff">删除</div></a>
<a id="shareaoff" ><div class="menuoff">共享</div></a>
<a id="namingoff" ><div class="menuoff">重命名</div></a>
<hr size="1pt" color="#ACA899"/>
<a href="#" onclick="closeShow_icon();" ><div class="menuitems">打开/关闭工具栏</div></a>
<hr noshade size="1" color="#ACA899"/>
<a href="http://www.beyondchina.com.cn" target="_blank" ><div class="menuoff">BeyondChina</div></a>
</div>
4.在页面的最后加上:
<script language="javascript">
if (document.all&&window.print){
ie5menu.className="cMenu"
document.oncontextmenu=showmenuie5
document.onclick=hidemenuie5
}
//-->
var disp=document.getElementById("hi_display").value;
document.getElementById("movedira").style.display=disp;
document.getElementById("lbk_del").style.display=disp;
document.getElementById("copydira").style.display=disp;
document.getElementById("sharea").style.display=disp;
if(disp=="none")
{
document.getElementById("movediraoff").style.display="";
document.getElementById("lbk_deloff").style.display="";
document.getElementById("copydiraoff").style.display="";
document.getElementById("shareaoff").style.display="";
}
else
{
document.getElementById("movediraoff").style.display="none";
document.getElementById("lbk_deloff").style.display="none";
document.getElementById("copydiraoff").style.display="none";
document.getElementById("shareaoff").style.display="none";
}
</script>
<script type="text/javascript" language="javascript">
function rightclk(tem,id,paneid)
{
var evt="";
evt = evt ? evt : (window.event ? window.event : null);
var rightnum=window.event?event.button:evt.button;
if (rightnum==2)
{
//进行弹出菜单操作...
if(id!=null&&paneid!=null)
{
document.getElementById("naminga").href="rework.aspx?id="+id+"&paneid="+paneid;
document.getElementById("namingoff").style.display="none";
document.getElementById("naminga").style.display="";
}
else
{
document.getElementById("naminga").style.display="none";
document.getElementById("namingoff").style.display="";
}
}
else
{
//进行弹出菜单操作...
document.getElementById("naminga").style.display="none";
document.getElementById("namingoff").style.display="";
}
}
</script>