.NET鼠标右键菜单JS[原]

在网络资料管理里因为模仿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>