The js code is as follows: Copy code The code is as follows: <br>//Disable right-click menu<br>document.oncontextmenu=ContextMenu; <br>//Mouse right-click event<br>function ContextMenu() <br>{ <br>//Create two variables , as the coordinate of the menu appearing <br>var x; <br>var y; <br>//Get the external Div of the menu (hereinafter referred to as the panel) <br>var FramePanel=document.getElementById("FrameDiv"); <br> //Get the panel width and height<br>var PanelWidth=parseInt(FramePanel.style.width.replace("px","")); <br>var PanelHeight=parseInt(FramePanel.style.height.replace("px ","")); <br>//Get the mouse coordinates<br>var MouseX=event.clientX; <br>var MouseY=event.clientY; <br>//Get the width and height of the web page window<br>var WindowWidth=document.body.offsetWidth; <br>var WindowHeight=document.documentElement.offsetHeight; <br>//If the mouse >=WindowWidth) <br>{ <br>x=MouseX-PanelWidth-20; <br>} <br>else <br>{ <br>x=MouseX; <br>} <br>//If the mouse Y coordinate panel height>Web page window height, then the top of the panel displays <br>if((MouseY PanelHeight)>=WindowHeight) <br>{ <br>y=MouseY-PanelHeight-20; <br>} <br> else <br>{ <br>y=MouseY; <br>} <br>//Display panel <br>FramePanel.style.left=x; <br>FramePanel.style.top=y; <br>FramePanel. style.display="block"; <br>//Hide the secondary menu<br>document.getElementById("ChildDiv").style.display="none"; <br>return false;//This code is equal to event.returnValue=false; <br>} <br>//The mouse selects the menu, parameter description: arg is the menu Div, imageUrl refers to the image address to be replaced, hasChildMenu refers to whether the menu has a submenu, childPanelId refers to the submenu ID (if there is a submenu) <br>function MenuOnMouseOver(arg,imageUrl,hasChildMenu,childPanelId) <br>{ <br>//Replace the background image (the image path is a relative path) <br>arg.style.backgroundImage= "url('" imageUrl "')"; <br>//Change the div background color<br>arg.style.backgroundColor="#1665CB"; <br>//Change the font color<br>arg.style.color ="#ffffff"; <br>//If there is a submenu under this menu<br>if(hasChildMenu) <br>{ <br>//Create two variables as the coordinates where the menu appears <br>var x; <br>var y; <br>//Get the submenu Div (hereinafter referred to as the subpanel) <br>var ChildPanel=document.getElementById(childPanelId); <br>//debugger; <br>//Get the width of the subpanel and height <br>var ChildPanelWidth=parseInt(ChildPanel.style.width.replace("px","")); <br>var ChildPanelHeight=parseInt(ChildPanel.style.width.replace("px","") ); <br>//Get the parent menu Div (hereinafter referred to as the parent panel) <br>var FramePanel=event.srcElement; <br>//Get the width and height of the parent panel <br>var PanelWidth=FramePanel.offsetWidth; <br>var PanelHeight=FramePanel.offsetHeight; <br>//Get the mouse coordinates<br>var MouseX=event.clientX; <br>var MouseY=event.clientY; <br>//Get the mouse offset position in the parent panel <br>var MouseOffsetWidth=event.offsetX; <br>var MouseOffsetHeight=event.offsetY; <br>//Get the width and height of the web page window<br>var WindowWidth=document.body.offsetWidth; <br>var WindowHeight=document .documentElement.offsetHeight; <br>//If the mouse <br>x=MouseX-MouseOffsetWidth-ChildPanelWidth-3; <br>} <br>else <br>{ <br>x=MouseX-MouseOffsetWidth PanelWidth-5; <br>} <br>//If the mouse Y coordinate Panel height>Web page window height, then the top of the panel displays <br>if((MouseY-MouseOffsetHeight ChildPanelHeight)>=WindowHeight-30) <br>{ <br>y=MouseY-MouseOffsetHeight-ChildPanelHeight-15; <br> } <br>else <br>{ <br>y=MouseY-MouseOffsetHeight 5; <br>} <br>//Display panel <br>ChildPanel.style.left=x; <br>ChildPanel.style.top= y; <br>ChildPanel.style.display="block"; <br>} <br>} <br>//The mouse leaves the menu<br>function MenuOnMouseOut(arg,imageUrl,hasChildMenu,childPanelId) <br>{ <br>if(hasChildMenu) <br>{ <br>//Submenu div (hereinafter referred to as subpanel) <br>var ChildPanel=document.getElementById(childPanelId); <br>var ToElement=event.toElement; <br>//It should be noted here that the mouse may move to the descendant div of the child panel. At this time, the DOM element of event.ToElement!=ChildPanel (child panel), event.ToElement.parentNode=ChildPanel, <br>if(ToElement= =ChildPanel||ToElement.parentNode==ChildPanel) <br>{ <br>ChildPanel.style.display="block"; <br>} <br>else <br>{ <br>ChildPanel.style.display=" none"; <br>} <br>} <br>//Replace the background image (the image path is a relative path) <br>arg.style.backgroundImage="url('" imageUrl "')"; <br>/ /Change div background color<br>arg.style.backgroundColor="#ffffff"; <br>//Change font color<br>arg.style.color="#000000"; <br>} <br>< /script> <br><br><br>The page ASPX code is as follows: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="10990" class="copybut" id="copybut10990" onclick="doCopy('code10990')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code10990"> <br><%@ Page Language="C#" AutoEventWireup="true" CodeFile="ContextMenu.aspx.cs" Inherits="ContextMenu" %> <br><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1 " %> <br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <br><html xmlns="http://www.w3.org/1999/xhtml" > <br><head runat="server"> <br><title>Untitled Page</title> <br><link href="Css/StyleSheet.css" rel="Stylesheet" type="text/css"/> <br></head> <br><body> ; <BR><form id="form1" runat="server"> <br><asp:ScriptManager ID="ScriptManager1" runat="server"> <br></asp:ScriptManager> <br><!--Context menu first-level menu--> <br><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;"> <br><!--File common menu--> ; <BR><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()"> <br>Create new folder<br></div> <br><div class="MenuDivDefault" onmouseover=" MenuOnMouseOver(this,'Images/menu2_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/menu2.jpg')" style="background-image:url('Images/menu2.jpg')"> <br>Search new folder<br></div> <br><div class="MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/menu3_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images /menu3.jpg')" style="background-image:url('Images/menu3.jpg')"> <br>Delete the folder<br></div> <br><div class= "MenuDivDefault" onmouseover="MenuOnMouseOver(this,'Images/menu4_click.jpg')" onmouseout="MenuOnMouseOut(this,'Images/menu4.jpg')" style="background-image:url('Images/menu4.jpg ')"> <br>Delete all<br></div> <br><!--Very useful menu--> <br><hr style="color:#A09F9F;width:160px ; height:1px;"/> <br><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')"> <br>File sorting<br></div> ; <br></div> <br><cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="FrameDiv" Width="2" TrackPosition="true" Opacity="0.3"> <br></cc1:DropShadowExtender> <br><!--Context menu secondary menu--> <br><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;" > <br><!--File common menu--> <br><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')"> <br>Name<br></div> <br><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 ')"> <br>Creation time<br></div> <br><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')"> <br>Type<br></div> <br><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')"> <br>Size<br></div> <br></div> <br><cc1:DropShadowExtender ID="DropShadowExtender2" runat="server" TargetControlID="ChildDiv" Width ="2" TrackPosition="true" Opacity="0.3"> <br></cc1:DropShadowExtender> <br></form> <br></body> <br></html> <br> </div> <br><br>Note this sentence: <br><cc1:DropShadowExtender ID="DropShadowExtender2" runat="server" TargetControlID="ChildDiv" Width="2" TrackPosition="true" Opacity="0.3"> <br></cc1:DropShadowExtender> <br>This control is a control that implements shadow effects in ASP.NET AJAX1.0, so you need to add control registration on the aspx page: <br><%@ Register Assembly="AjaxControlToolkit " Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <br>Please check Baidu for the specific attribute meaning of the control.</div>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
