作家
登录

鼠标右击事件代码(asp.net后台)

作者: 来源:www.28hudong.com 2013-03-30 01:01:17 阅读 我要评论

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" %> 控件具体属性意义请查询百度。

  推荐阅读

  jqeury eval将字符串转换json的方法

前台页面 复制代码 代码如下: $.ajax({ type: "post", contentType: "application/json", url: "../WebForm1.aspx/GetRightsStr", dataType: "json", success: function (msg) { alert(msg.d); var data = eval("(>>>详细阅读


本文标题:鼠标右击事件代码(asp.net后台)

地址:http://www.17bianji.com/kaifa2/JS/24970.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)