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

  1. 在网络资料管理里因为模仿windows系统的资源管理系统,所以需要用到右键菜单,纯JS写的吧又不能用.NET里的服务器控件,所以就自己模仿别人的写了一个!
  2. 1.首先加个样式表,如下:
  3.     <style type="text/css">
  4.     /*右键菜单*/
  5.     .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;}
  6.     .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}
  7.     .menuitems {font-size:10px;MARGIN:0px; padding:1px 3px 0px 15px;cursor:pointer} 
  8.     .menuoff {font-size:10px;MARGIN:0px; padding:1px 3px 0px 15px; color:#ACA899;} 
  9.         .STYLE2 { FONT-SIZE: 10px }
  10.     #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 }
  11.     #popitmenu A { DISPLAY: block; PADDING-LEFT: 6px; COLOR: black; TEXT-DECORATION: none }
  12.     #popitmenu A:hover { BACKGROUND-COLOR: #ccff9d }
  13.     /*右键菜单结束*/
  14.     </style>
  15. 2.加上这个JS代码:
  16.     <!--右键菜单!-->
  17.     <script>
  18.         function showmenuie5()
  19.         {
  20.             var rightedge=window.document.documentElement.clientWidth-event.clientX 
  21.             var bottomedge=window.document.documentElement.clientHeight-event.clientY 
  22.             if (rightedge<ie5menu.offsetWidth) 
  23.                 ie5menu.style.left=window.document.documentElement.scrollLeft+event.clientX-ie5menu.offsetWidth 
  24.             else 
  25.                 ie5menu.style.left=window.document.documentElement.scrollLeft+event.clientX
  26.                 
  27.             if (bottomedge<ie5menu.offsetHeight) 
  28.                 ie5menu.style.top=window.document.documentElement.scrollTop+event.clientY-ie5menu.offsetHeight 
  29.             else 
  30.                 ie5menu.style.top=window.document.documentElement.scrollTop+event.clientY 
  31.                 ie5menu.style.visibility="visible" 
  32.                 return false 
  33.         } 
  34.         
  35.         function hidemenuie5()
  36.         { 
  37.             ie5menu.style.visibility="hidden" 
  38.         } 
  39.         
  40.         function highlightie5()
  41.         { 
  42.             if (event.srcElement.className=="menuitems")
  43.             { 
  44.                 event.srcElement.style.backgroundColor="highlight" 
  45.                 event.srcElement.style.color="white" 
  46.             } 
  47.         }
  48.          
  49.         function lowlightie5()
  50.         { 
  51.             if (event.srcElement.className=="menuitems")
  52.             { 
  53.                 event.srcElement.style.backgroundColor="" 
  54.                 event.srcElement.style.color="#000000" 
  55.             } 
  56.         }
  57.         
  58.         function ChangeBG()
  59.         {
  60.              oEl=event.srcElement 
  61.         } 
  62.     </script>
  63.     <!--右键菜单结束!-->
  64. 3.这是右键菜单的详细内容
  65.         <div class="cMenu" id="ie5menu" onmouseout="lowlightie5()" onmouseover="highlightie5()" style="left: 0px; top: 0px"
  66.             <asp:LinkButton ID="LinkButton1" runat="server" OnClick="LB_Thumbnails_Click"><div class="menuitems">缩 略 图</div></asp:LinkButton>
  67.             <asp:LinkButton ID="LinkButton5" runat="server" OnClick="LB_tiled_Click"><div class="menuitems">平 铺</div></asp:LinkButton>
  68.             <asp:LinkButton ID="LinkButton2" runat="server" OnClick="LB_icon_Click"><div class="menuitems">图 标</div></asp:LinkButton>
  69.             <asp:LinkButton ID="LinkButton3" runat="server" OnClick="LB_list_Click"><div class="menuitems">列 表</div></asp:LinkButton>
  70.             <asp:LinkButton ID="LinkButton4" runat="server" OnClick="LB_particularList_Click"><div class="menuitems">详细列表</div></asp:LinkButton>
  71.             <hr noshade size="1" color="#ACA899"/>
  72.             <asp:LinkButton ID="LinkButton6" runat="server" OnClientClick="javascript:window.location.href=window.location.href;"><div class="menuitems">刷 新</div></asp:LinkButton>
  73.             <a onclick="javascript:history.go(-1);"><div class="menuitems">返 回</div></a>
  74.             <a href="#" onclick="newdir();" ><div class="menuitems">新建文件夹</div></a>
  75.             <a href='upload.aspx?paneid=<%= paneid%> '><div class="menuitems">上 传</div></a>
  76.             <a href="#" onclick="if(ischecked()){movedir();}else{return false;}" id="movedira" ><div class="menuitems">剪 切</div></a>
  77.             <a href="#" onclick="if(ischecked()){copydir();}else{return false;}" id="copydira" ><div class="menuitems">复 制</div></a>
  78.             <asp:LinkButton ID="lbk_del" runat="server" OnClick="lbk_del_Click"><div class="menuitems">删 除</div></asp:LinkButton>
  79.             <a href='# ' onclick="if(ischecked()){sharelink();}else{return false;}" id="sharea"><div class="menuitems">共 享</div></a>
  80.             <a href="#" id="naminga" style="display:none" ><div class="menuitems">重 命 名</div></a>
  81.             <a id="movediraoff" ><div class="menuoff">剪 切</div></a>
  82.             <a id="copydiraoff" ><div class="menuoff">复 制</div></a>
  83.             <a id="lbk_deloff" ><div class="menuoff">删 除</div></a>
  84.             <a id="shareaoff" ><div class="menuoff">共 享</div></a>
  85.             <a id="namingoff" ><div class="menuoff">重 命 名</div></a>
  86.             <hr size="1pt" color="#ACA899"/>
  87.             <a href="#" onclick="closeShow_icon();" ><div class="menuitems">打开/关闭工具栏</div></a>
  88.             <hr noshade size="1" color="#ACA899"/>
  89.             <a href="http://www.beyondchina.com.cn" target="_blank" ><div class="menuoff">BeyondChina</div></a>
  90.         </div>
  91. 4.在页面的最后加上:
  92. <script language="javascript"
  93. if (document.all&&window.print){ 
  94. ie5menu.className="cMenu" 
  95. document.oncontextmenu=showmenuie5 
  96. document.onclick=hidemenuie5 
  97. //--> 
  98. var disp=document.getElementById("hi_display").value;
  99. document.getElementById("movedira").style.display=disp;
  100. document.getElementById("lbk_del").style.display=disp;
  101. document.getElementById("copydira").style.display=disp;
  102. document.getElementById("sharea").style.display=disp;
  103. if(disp=="none")
  104. {
  105.     document.getElementById("movediraoff").style.display="";
  106.     document.getElementById("lbk_deloff").style.display="";
  107.     document.getElementById("copydiraoff").style.display="";
  108.     document.getElementById("shareaoff").style.display="";
  109. }
  110. else
  111. {
  112.     document.getElementById("movediraoff").style.display="none";
  113.     document.getElementById("lbk_deloff").style.display="none";
  114.     document.getElementById("copydiraoff").style.display="none";
  115.     document.getElementById("shareaoff").style.display="none";
  116. }
  117. </script>
  118. <script type="text/javascript" language="javascript">
  119.     function rightclk(tem,id,paneid)   
  120.     {   
  121.         var evt="";
  122.         evt = evt ? evt : (window.event ? window.event : null);   
  123.         var rightnum=window.event?event.button:evt.button;   
  124.         if (rightnum==2)   
  125.         {   
  126.             //进行弹出菜单操作...   
  127.             if(id!=null&&paneid!=null)
  128.             {
  129.                 document.getElementById("naminga").href="rework.aspx?id="+id+"&paneid="+paneid;
  130.                 document.getElementById("namingoff").style.display="none";
  131.                 document.getElementById("naminga").style.display="";
  132.             }
  133.             else
  134.             {
  135.                 document.getElementById("naminga").style.display="none";
  136.                 document.getElementById("namingoff").style.display="";
  137.             }
  138.         }
  139.         else
  140.         {   
  141.             //进行弹出菜单操作... 
  142.             document.getElementById("naminga").style.display="none";
  143.             document.getElementById("namingoff").style.display="";
  144.         }
  145.     }
  146. </script>
 
posted @ 2008-11-18 13:24  可可NET  阅读(450)  评论(0编辑  收藏  举报