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>
注意這句：
<cc1:DropShadowExtender ID="DropShadowExtender2" runat="server" TargetControlID="ChildDiv" Width="2" TrackPosition="true" Opacity="0.3">
</cc1:DropShadowExtender>
這個控件是ASP.NET AJAX1.0中實現陰影效果的控件，因此要在aspx頁面添加控件注冊：
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
控件具體屬性意義請查詢百度。