Javascript右键菜单类

代码简介：

这是自己写的一个右键菜单类，屏蔽掉了IE固有的右键菜单，一共有四个参数：第一个是出发显示右键菜单的div的id 　　第二个是右键菜单这个层的id，根据这个id去创建一个新的层，menuList是菜单项的列表，对应了点击一个菜单项后触发的函数，classList是菜单的class名称，以及菜单项对应的class名称，包含了鼠标滑过时的class。

代码内容：

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Javascript右键菜单类_网页代码站(www.webdm.cn)</title>
<style type="text/css">
.cmenu
{position:absolute;top:100px;left:100px;width:200px;height:200px;background-color:white;border:1px solid pink;}
.liAble
{font-family:"宋体";color:#6699CC;margin-left:10px;margin-top:5px;list-style-type:none;cursor:default;
}
.liMouseOver
{margin-left:10px;margin-top:5px;background-color:#CCFFFF;list-style-type:none;cursor:default;
}
</style>
</head>
<body>
<div style="margin-left:auto; margin-right:auto; height:300px; width:60%;background-color:#CC6699" id="x">
</div>
<input type="hidden" id="value1" value="4" />
<input type="hidden" id="value2" value="5" />
<script type="text/javascript">
//右键菜单类
function RightHandMenu(div,menuDiv,menuList,classList)
{var oThis = this;this._menuList = {}this._classList = {objClass:'',MenuClass:'',liAbleClass:'',liMouseOverClass:''}this.Init = function(){this._obj = $(div);this._obj.oncontextmenu = function(e){oThis.ShowMenu(e)};this._obj.className = this._classList.objClass;document.onclick = function(){oThis.HiddenMenu()};objToObj(this._classList, classList);objToObj(this._menuList, menuList);        }this.CreateMenu = function(){if($(menuDiv)){alert("该ID已被占用");return;}this._menu = document.createElement("DIV");this._menu.id = menuDiv;this._menu.oncontextmenu = function(e){stopBubble(e)};this._menu.className = this._classList.MenuClass;this._menu.style.display = "none";document.body.appendChild(this._menu);}this.CreateMenuList = function(){for(var pro in this._menuList){var li = document.createElement("LI");li.innerHTML = pro;this._menu.appendChild(li);li.className = this._classList.liAbleClass;li.onclick = this._menuList[pro];li.onmouseover = function(){oThis.ChangeLiClass(this,oThis._classList.liMouseOverClass)}li.onmouseout = function(){oThis.ChangeLiClass(this,oThis._classList.liAbleClass)}}}this.ChangeLiClass = function(obj,name){obj.className = name}this.ShowMenu = function(e){var e = e || window.event;stopBubble(e);var offsetX = e.clientX;var offsetY = e.clientY;with(this._menu.style){display = "block";top = offsetY + "px";left = offsetX + "px";}}this.HiddenMenu = function(){this._menu.style.display = "none";}this.Init();this.CreateMenu();this.CreateMenuList();
}
function stopBubble(oEvent)
{if(oEvent.stopPropagation) oEvent.stopPropagation();else oEvent.cancelBubble = true;if(oEvent.preventDefault) oEvent.preventDefault();else oEvent.returnValue = false;
}function $(div)
{return 'string' == typeof div ? document.getElementById(div) : div;
}
function objToObj(destination,source)
{for(var pro in source){destination[pro] = source[pro];}return destination;
}
//构造右键菜单
function Edit()
{alert("edit");
}
function Delete()
{alert("delete");
}
var menuList =
{编辑:Edit,删除:Delete
}
var classList =
{MenuClass:'cmenu',liAbleClass:'liAble',liMouseOverClass:'liMouseOver'
}
var x = new RightHandMenu("x","testDiv",menuList,classList)
</script>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/42f19ed3-e89b-490b-a781-10e440c812b3.html

转载于:https://www.cnblogs.com/webdm/archive/2011/05/30/2063014.html

Javascript右键菜单类相关推荐

超强的jquery极品插件--色彩选择器类/ 右键菜单类/ 图片新闻flash展示类
Farbtastic Farbtastic是一个color picker插件.它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中的一个元素比如:文本输入框. Farbtastic jQu ...
百度地图API的第一次接触——右键菜单
1.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...
自定义html页面鼠标右键,javascript鼠标右键菜单自定义效果
本文实例讲解了javascript鼠标右键菜单的实现方法,分享给大家供大家参考,具体内容如下效果图: 具体代码: #menu{ border:solid 1px gray; width:100px; ...
html 元素允许右键,JavaScript 自定义html元素鼠标右键菜单功能
自定义html元素鼠标右键菜单实现思路在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...
ListCtrl添加右键菜单(ListCtrl类里编辑，给ListCtrl 发送NM_RCLICK消息)
在开发中会用到右键菜单,我们来一起学习一下. 假如,我们现在已经准备好了列表,就差右键处理了. 1.在资源视图中的添加一个MENU,如图 2.给要添加右键菜单的ListCtrl子类,添加消息按 ct ...
jquery和javascript屏蔽右键菜单及阻止事件冒泡
jquery屏蔽右键菜单 $(document).ready(function(){$(document).bind("contextmenu",function(e){retur ...
关于JFace中的右键菜单Action类,ActgionGroup类,MenuManager类
Action类,ActionGroup类,MenuManager类介绍 SWT中菜单是Menu类,菜单项用MeauItem类来实现.但是在实际开发中,同一种功能会有多中表现形式, 例如:Eclipse ...
javascript实现自定义右键菜单（绑定鼠标左右键）
文章目录 javascript实现自定义右键菜单思路 1绑定右键函数 2.获取鼠标右键按下位置的x坐标(到左面的距离),y坐标(到上面的距离). 3.获取滚动条向下滚动距离,获取滚动条向左滚动距离 ...
ABP +VUE Elment 通用高级查询（右键菜单）设计+LINQ通用类Expression＜Func＜TFields, bool＞＞方法
ABP +VUE Elment 通用高级查询(右键菜单)设计+LINQ通用类Expression 1. 目前需要用VUE实现源cs系统报表的右键菜单所有和自定义查询功能. 1.1 CS端的右键菜单效果 ...

Javascript右键菜单类

Javascript右键菜单类相关推荐

最新文章

热门文章