이벤트 코드 를 우 클릭(asp.net 배경)

9454 단어 우 클릭
js 코드 는 다음 과 같 습 니 다
 
<script type="text/javascript"> 
//       
document.oncontextmenu=ContextMenu; 
//       
function ContextMenu() 
{ 
//      ,          
var x; 
var y; 
//      Div(      ) 
var FramePanel=document.getElementById("FrameDiv"); 
//          
var PanelWidth=parseInt(FramePanel.style.width.replace("px","")); 
var PanelHeight=parseInt(FramePanel.style.height.replace("px","")); 
//       
var MouseX=event.clientX; 
var MouseY=event.clientY; 
//            
var WindowWidth=document.body.offsetWidth; 
var WindowHeight=document.documentElement.offsetHeight; 
//    X  +    >      ,        
if((MouseX+PanelWidth)>=WindowWidth) 
{ 
x=MouseX-PanelWidth-20; 
} 
else 
{ 
x=MouseX; 
} 
//    Y  +    >      ,        
if((MouseY+PanelHeight)>=WindowHeight) 
{ 
y=MouseY-PanelHeight-20; 
} 
else 
{ 
y=MouseY; 
} 
//     
FramePanel.style.left=x; 
FramePanel.style.top=y; 
FramePanel.style.display="block"; 
//       
document.getElementById("ChildDiv").style.display="none"; 
return false;//       event.returnValue=false; 
} 
//       ,    :arg    Div,imageUrl     image  ,hasChildMenu          ,childPanelId    ID(        ) 
function MenuOnMouseOver(arg,imageUrl,hasChildMenu,childPanelId) 
{ 
//      (         ) 
arg.style.backgroundImage="url('"+imageUrl+"')"; 
//  div     
arg.style.backgroundColor="#1665CB"; 
//       
arg.style.color="#ffffff"; 
//           
if(hasChildMenu) 
{ 
//      ,          
var x; 
var y; 
//     Div(       ) 
var ChildPanel=document.getElementById(childPanelId); 
//debugger; 
//           
var ChildPanelWidth=parseInt(ChildPanel.style.width.replace("px","")); 
var ChildPanelHeight=parseInt(ChildPanel.style.width.replace("px","")); 
//      Div(       ) 
var FramePanel=event.srcElement; 
//           
var PanelWidth=FramePanel.offsetWidth; 
var PanelHeight=FramePanel.offsetHeight; 
//       
var MouseX=event.clientX; 
var MouseY=event.clientY; 
//              
var MouseOffsetWidth=event.offsetX; 
var MouseOffsetHeight=event.offsetY; 
//            
var WindowWidth=document.body.offsetWidth; 
var WindowHeight=document.documentElement.offsetHeight; 
//    X  +    +     >      ,        
if((MouseX-MouseOffsetWidth+PanelWidth+ChildPanelWidth)>=WindowWidth) 
{ 
x=MouseX-MouseOffsetWidth-ChildPanelWidth-3; 
} 
else 
{ 
x=MouseX-MouseOffsetWidth+PanelWidth-5; 
} 
//    Y  +    >      ,        
if((MouseY-MouseOffsetHeight+ChildPanelHeight)>=WindowHeight-30) 
{ 
y=MouseY-MouseOffsetHeight-ChildPanelHeight-15; 
} 
else 
{ 
y=MouseY-MouseOffsetHeight+5; 
} 
//     
ChildPanel.style.left=x; 
ChildPanel.style.top=y; 
ChildPanel.style.display="block"; 
} 
} 
//        
function MenuOnMouseOut(arg,imageUrl,hasChildMenu,childPanelId) 
{ 
if(hasChildMenu) 
{ 
//   div(       ) 
var ChildPanel=document.getElementById(childPanelId); 
var ToElement=event.toElement; 
//     ,              div ,  event.ToElement DOM  !=ChildPanel(   ),event.ToElement.parentNode=ChildPanel, 
if(ToElement==ChildPanel||ToElement.parentNode==ChildPanel) 
{ 
ChildPanel.style.display="block"; 
} 
else 
{ 
ChildPanel.style.display="none"; 
} 
} 
//      (         ) 
arg.style.backgroundImage="url('"+imageUrl+"')"; 
//  div     
arg.style.backgroundColor="#ffffff"; 
//       
arg.style.color="#000000"; 
} 
</script>
페이지 ASPX 코드 는 다음 과 같 습 니 다
 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ContextMenu.aspx.cs" Inherits="ContextMenu" %> 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
<title>    </title> 
<link href="Css/StyleSheet.css" rel="Stylesheet" type="text/css"/> 
</head> 
<body> 
<form id="form1" runat="server"> 
<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 
<!--         --> 
<div id="FrameDiv" runat="server" style="width:170px; height:300px; border-style:solid;border-width:1px; border-color:#A09F9F; background-color:White; display:none; position:relative; padding:1px 1px 1px 1px;"> 
<!--      --> 
<div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/menu1_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/menu1.jpg')" style="background-image:url('Images/menu1.jpg')" onclick="OnCopyFolderMenuClcik()"> 
       
</div> 
<div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/menu2_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/menu2.jpg')" style="background-image:url('Images/menu2.jpg')"> 
       
</div> 
<div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/menu3_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/menu3.jpg')" style="background-image:url('Images/menu3.jpg')"> 
       
</div> 
<div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/menu4_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/menu4.jpg')" style="background-image:url('Images/menu4.jpg')"> 
     
</div> 
<!--     --> 
<hr style="color:#A09F9F;width:160px; height:1px;"/> 
<div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/menu5_click.jpg','true','ChildDiv')" onmouseout="MenuOnMouseOut(this,'Images/menu5.jpg','true','ChildDiv')" style="background-image:url('Images/menu5.jpg')"> 
     
</div> 
</div> 
<cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="FrameDiv" Width="2" TrackPosition="true" Opacity="0.3"> 
</cc1:DropShadowExtender> 
<!--         --> 
<div id="ChildDiv" runat="server" style="width:170px; height:200px; z-index:2; background-color:White;border-style:solid; border-width:1px; border-color:#A09F9F; display:none; position:absolute; padding:1px 1px 1px 1px;"> 
<!--      --> 
<div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/child_menu1_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/child_menu1.jpg')" style="background-image:url('Images/child_menu1.jpg')"> 
   
</div> 
<div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/child_menu2_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/child_menu2.jpg')" style="background-image:url('Images/child_menu2.jpg')"> 
     
</div> 
<div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/child_menu3_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/child_menu3.jpg')" style="background-image:url('Images/child_menu3.jpg')"> 
   
</div> 
<div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/child_menu4_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/child_menu4.jpg')" style="background-image:url('Images/child_menu4.jpg')"> 
   
</div> 
</div> 
<cc1:DropShadowExtender ID="DropShadowExtender2" runat="server" TargetControlID="ChildDiv" Width="2" TrackPosition="true" Opacity="0.3"> 
</cc1:DropShadowExtender> 
</form> 
</body> 
</html>
주의:이 컨트롤 은 ASP.NET AJAX 1.0 에서 음영 효 과 를 실현 하 는 컨트롤 입 니 다.따라서 aspx 페이지 에 컨트롤 등록 을 추가 하려 면:<%@Register Assembly="Ajax Control Toolkit"Namespace="Ajax Control Toolkit"TagPrefix="cc1"%>컨트롤 의 구체 적 인 속성 의 미 는 바 이 두 를 조회 하 십시오.
Laravel+Intervention 이미지 업로드 기능 예시 구현
javascript 배열 에 대한 일반적인 조작 코드 배열 방법 집합

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage