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 选取方法都有哪些
May 18 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 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静态类
2006/11/25 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
JS中cookie的使用及缺点讲解
2017/05/13 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
python中copy()与deepcopy()的区别小结
2018/08/03 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
Flask框架学习笔记之使用Flask实现表单开发详解
2019/08/12 Python
Django模板语言 Tags使用详解
2019/09/09 Python
python def 定义函数,调用函数方式
2020/06/02 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
用python实现一个简单的验证码
2020/12/09 Python
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
环境工程与管理大学毕业生求职信
2013/10/02 职场文书
2014端午节活动策划方案
2014/01/27 职场文书
主持词开场白
2014/03/17 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
班主任评语大全
2014/04/26 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
浅谈redis整数集为什么不能降级
2021/07/25 Redis
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏