.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>
欢迎您访问本BLOG作者官方网站!!! http://www.2zhichan.cn 程序交换网