Javascript实现的简单右键菜单类


Posted in Javascript onSeptember 23, 2015

本文实例讲述了Javascript实现的简单右键菜单类。分享给大家供大家参考。具体如下:

这是自己写的一个右键菜单类,屏蔽掉了IE固有的右键菜单,一共有四个参数:第一个是出发显示右键菜单的div的id

第二个是右键菜单这个层的id,根据这个id去创建一个新的层,menuList是菜单项的列表,对应了点击一个菜单项后触发的函数,classList是菜单的class名称,以及菜单项对应的class名称,包含了鼠标滑过时的class。

运行效果截图如下:

Javascript实现的简单右键菜单类

在线演示地址如下:

具体代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>右键菜单</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>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
jQuery简单实现日历的方法
May 04 Javascript
JQuery中Bind()事件用法分析
May 05 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
VUE2实现事件驱动弹窗示例
Oct 21 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
详解React 元素渲染
Jul 07 Javascript
js实现无限级树形导航列表效果代码
Sep 23 #Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
Sep 23 #Javascript
JS实现3D图片旋转展示效果代码
Sep 22 #Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 #Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 #Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 #Javascript
jQuery实现的经典滑动门效果
Sep 22 #Javascript
You might like
PHP ajax 分页类代码
2008/11/13 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
js中this对象用法分析
2018/01/05 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
解析Python中的异常处理
2015/04/28 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
使用Python读取大文件的方法
2018/02/11 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
three.js模拟实现太阳系行星体系功能
2019/09/03 HTML / CSS
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
高中三年学习生活的自我评价
2013/10/10 职场文书
最新教师自我评价分享
2013/11/12 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
我的中国心演讲稿
2014/09/04 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
pytorch通过训练结果的复现设置随机种子
2021/06/01 Python
5道关于python基础 while循环练习题
2021/11/27 Python