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的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
解决Extjs下拉框不显示的问题
Jun 21 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
Vue基础配置讲解
Nov 29 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 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 和 MySQL 基础教程(三)
2006/10/09 PHP
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
[转帖]PHP世纪万年历
2006/12/06 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
js代码实现轮播图
2020/05/04 Javascript
jQuery实现移动端笔触canvas电子签名
2020/05/21 jQuery
webpack+express实现文件精确缓存的示例代码
2020/06/11 Javascript
深入理解Python中字典的键的使用
2015/08/19 Python
回调函数的意义以及python实现实例
2017/06/20 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
python实现剪切功能
2019/01/23 Python
Python 如何查找特定类型文件
2020/08/17 Python
解释下面关于J2EE的名词
2013/11/15 面试题
导游个人求职信
2014/04/25 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
公证委托书
2014/08/01 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
三行辞职书范文
2015/02/26 职场文书
学校捐书倡议书
2015/04/27 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
Django实现翻页的示例代码
2021/05/24 Python