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 相关文章推荐
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
最简单的vue消息提示全局组件的方法
Jun 16 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 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
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
实例解析php的数据类型
2018/10/24 PHP
js 幻灯片的实现
2011/12/06 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
JavaScript函数的调用以及参数传递
2015/10/21 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
JS实现按钮颜色切换效果
2020/09/05 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
[01:10]DOTA2英雄背景故事第四期之混沌法则混沌骑士
2020/07/16 DOTA
python生成词云的实现方法(推荐)
2017/06/13 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
python db类用法说明
2020/07/07 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
美国滑板店:Tactics
2020/11/08 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
理工大学毕业生自荐信
2013/11/01 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
新农村建设汇报材料
2014/08/15 职场文书
居委会工作总结2015
2015/05/18 职场文书