Posted in Javascript onJanuary 27, 2011
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" %>
控件具体属性意义请查询百度。
鼠标右击事件代码(asp.net后台)
声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@