Right-click the Event code (asp.net background)

The js Code is as follows: Copy codeThe Code is as follows: <script type = "text/javascript">
// Disable the context menu
Document. oncontextmenu = ContextMenu;
// Right-click the event
Function ContextMenu ()
{
// Create two variables as the coordinates of the menu
Var x;
Var y;
// Obtain the external Div of the menu (panel)
Var FramePanel = document. getElementById ("FrameDiv ");
// Obtain the panel width and height
Var PanelWidth = parseInt (FramePanel. style. width. replace ("px ",""));
Var PanelHeight = parseInt (FramePanel. style. height. replace ("px ",""));
// Obtain the mouse coordinates
Var MouseX = event. clientX;
Var MouseY = event. clientY;
// Obtain the webpage window width and height
Var expose wwidth = document. body. offsetWidth;
Var implements wheight=document.doc umentElement. offsetHeight;
// If the mouse X coordinates + panel width> webpage window width, the left side of the Panel is displayed
If (MouseX + PanelWidth)> = bytes wwidth)
{
X = MouseX-PanelWidth-20;
}
Else
{
X = MouseX;
}
// If the mouse Y coordinates + panel height> webpage window height, the Panel is displayed above
If (MouseY + PanelHeight)> = running wheight)
{
Y = MouseY-PanelHeight-20;
}
Else
{
Y = MouseY;
}
// Display panel
FramePanel. style. left = x;
FramePanel. style. top = y;
FramePanel. style. display = "block ";
// Hide the level-2 menu
Document. getElementById ("ChildDiv"). style. display = "none ";
Return false; // The Code equals event. returnValue = false;
}
// Select the menu with the mouse. parameter description: arg indicates the menu Div, imageUrl indicates the image address to be replaced, and hasChildMenu indicates whether the menu has a submenu, childPanelId indicates the sub-menu ID (if there is a sub-menu)
Function MenuOnMouseOver (arg, imageUrl, hasChildMenu, childPanelId)
{
// Replace the background image (the image path is relative)
Arg. style. backgroundImage = "url ('" + imageUrl + "')";
// Change the div background color
Arg. style. backgroundColor = "# 1665CB ";
// Change the font color
Arg. style. color = "# ffffff ";
// If this menu has a sub-menu
If (hasChildMenu)
{
// Create two variables as the coordinates of the menu
Var x;
Var y;
// Obtain the sub-menu Div (subpanel)
Var ChildPanel = document. getElementById (childPanelId );
// Debugger;
// Obtain the width and height of the sub-panel
Var ChildPanelWidth = parseInt (ChildPanel. style. width. replace ("px ",""));
Var ChildPanelHeight = parseInt (ChildPanel. style. width. replace ("px ",""));
// Obtain the parent menu Div (parent panel)
Var FramePanel = event. srcElement;
// Obtain the width and height of the parent panel
Var PanelWidth = FramePanel. offsetWidth;
Var PanelHeight = FramePanel. offsetHeight;
// Obtain the mouse coordinates
Var MouseX = event. clientX;
Var MouseY = event. clientY;
// Get the offset of the mouse on the parent panel
Var MouseOffsetWidth = event. offsetX;
Var MouseOffsetHeight = event. offsetY;
// Obtain the webpage window width and height
Var expose wwidth = document. body. offsetWidth;
Var implements wheight=document.doc umentElement. offsetHeight;
// If the mouse X coordinates + panel width + sub-panel width> webpage window width, the left side of the Panel is displayed
If (MouseX-MouseOffsetWidth + PanelWidth + ChildPanelWidth)> = running wwidth)
{
X = MouseX-MouseOffsetWidth-ChildPanelWidth-3;
}
Else
{
X = MouseX-MouseOffsetWidth + PanelWidth-5;
}
// If the mouse Y coordinates + panel height> webpage window height, the Panel is displayed above
If (MouseY-MouseOffsetHeight + ChildPanelHeight) >=WindowHeight-30)
{
Y = MouseY-MouseOffsetHeight-ChildPanelHeight-15;
}
Else
{
Y = MouseY-MouseOffsetHeight + 5;
}
// Display panel
ChildPanel. style. left = x;
ChildPanel. style. top = y;
ChildPanel. style. display = "block ";
}
}
// Move the mouse away from the menu
Function MenuOnMouseOut (arg, imageUrl, hasChildMenu, childPanelId)
{
If (hasChildMenu)
{
// Sub-menu div (subpanel)
Var ChildPanel = document. getElementById (childPanelId );
Var ToElement = event. toElement;
// Note that the mouse may move to the Child div of the sub-panel. In this case, the DOM element of event. ToElement is displayed! = ChildPanel (sub-Panel), event. ToElement. parentNode = ChildPanel,
If (ToElement = ChildPanel | ToElement. parentNode = ChildPanel)
{
ChildPanel. style. display = "block ";
}
Else
{
ChildPanel. style. display = "none ";
}
}
// Replace the background image (the image path is relative)
Arg. style. backgroundImage = "url ('" + imageUrl + "')";
// Change the div background color
Arg. style. backgroundColor = "# ffffff ";
// Change the font color
Arg. style. color = "#000000 ";
}
</Script>

The page ASPX code is as follows:Copy codeThe Code is as follows: <% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "ContextMenu. aspx. cs" Inherits = "ContextMenu" %>
<% @ Register Assembly = "AjaxControlToolkit" Namespace = "AjaxControlToolkit" TagPrefix = "PC3" %>
<! 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> No title page </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>
<! -- Context menu level-1 menu -->
<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; ">
<! -- Common file menus -->
<Div class = "MenuDivDefault" onmouseover = "MenuOnMouseOver (this, 'images/menu?click.jpg ')" onmouseout = "MenuOnMouseOut (this, 'images/menu1.jpg ') "style =" background-image: url ('images/menu1.jpg ') "onclick =" OnCopyFolderMenuClcik () ">
Create a new folder
</Div>
<Div class = "MenuDivDefault" onmouseover = "MenuOnMouseOver (this, 'images/menu2_click.jpg ')" onmouseout = "MenuOnMouseOut (this, 'images/menu2.jpg ') "style =" background-image: url ('images/menu2.jpg ') ">
Search for new folders
</Div>
<Div class = "MenuDivDefault" onmouseover = "MenuOnMouseOver (this, 'images/menu3_click.jpg ')" onmouseout = "MenuOnMouseOut (this, 'images/menu3.jpg ') "style =" background-image: url ('images/menu3.jpg ') ">
Delete this folder
</Div>
<Div class = "MenuDivDefault" onmouseover = "MenuOnMouseOver (this, 'images/menu4_click.jpg ')" onmouseout = "MenuOnMouseOut (this, 'images/menu4.jpg ') "style =" background-image: url ('images/menu4.jpg ') ">
Delete all
</Div>
<! -- Very useful menu -->
<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 ') ">
File Sorting
</Div>
</Div>
<PC3: DropShadowExtender ID = "DropShadowExtender1" runat = "server" TargetControlID = "FrameDiv" Width = "2" TrackPosition = "true" Opacity = "0.3">
</PC3: DropShadowExtender>
<! -- Context menu level 2 menu -->
<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; ">
<! -- Common file menus -->
<Div class = "MenuDivDefault" onmouseover = "MenuOnMouseOver (this, 'images/child_menu?click.jpg ')" onmouseout = "MenuOnMouseOut (this, 'images/child_menu1.jpg ') "style =" background-image: url ('images/child_menu1.jpg ') ">
Name
</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 ') ">
Creation Time
</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 ') ">
Type
</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 ') ">
Size
</Div>
</Div>
<PC3: DropShadowExtender ID = "DropShadowExtender2" runat = "server" TargetControlID = "ChildDiv" Width = "2" TrackPosition = "true" Opacity = "0.3">
</PC3: DropShadowExtender>
</Form>
</Body>
</Html>

Note:
<PC3: DropShadowExtender ID = "DropShadowExtender2" runat = "server" TargetControlID = "ChildDiv" Width = "2" TrackPosition = "true" Opacity = "0.3">
</PC3: DropShadowExtender>
This control is the control that implements the shadow effect in ASP. NET AJAX1.0. Therefore, you must add the control registration on the aspx page:
<% @ Register Assembly = "AjaxControlToolkit" Namespace = "AjaxControlToolkit" TagPrefix = "PC3" %>
For more information about the specific properties of the control, see Baidu.