3种不同的ContextMenu右键菜单实现代码


Posted in Javascript onNovember 03, 2016

简单使用的右键菜单,希望能帮助大家。下面是截图和实例代码

3种不同的ContextMenu右键菜单实现代码

实例预览

<!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=utf-8" />
<title>3种不同的ContextMenu右键菜单演示</title>
<style type="text/css">
.content{margin:0 auto;width:360px;}
.content p{margin:20px 0 0 0;border:solid 1px #C5D8FF;background:#EDF2FF;padding:10px;}
</style>
</head>
<body>
<div class="container">
<div class="demo">
<div class="contextMenu" id="myMenu1">
<ul>
<li id="open"><img src="/api/jq/ContextMenu/images/folder.png" /> Open</li>
<li id="email"><img src="/api/jq/ContextMenu/images/email.png" /> Email</li>
<li id="save"><img src="/api/jq/ContextMenu/images/disk.png" /> Save</li>
<li id="delete"><img src="/api/jq/ContextMenu/images/cross.png" /> Delete</li>
</ul>
</div>
<div class="contextMenu" id="myMenu2">
<ul>
<li id="item_1">Item 1</li>
<li id="item_2">Item 2</li>
<li id="item_3">Item 3</li>
<li id="item_4">Item 4</li>
<li id="item_5">Item 5</li>
<li id="item_6">Item 6</li>
<li id="item_7">Item 7</li>
<li id="item_8">Item 8</li>
</ul>
</div>
<div class="contextMenu" id="myMenu3">
<ul>
<li id="item_1">Item 1</li>
<li id="item_2">Item 2</li>
<li id="item_3">Item 3</li>
</ul>
</div>
<div class="content">
<p class="demo1"><b>演示</b> 右键单击我的! !</p>
<p class="demo2">在这个段落里面右键点击触发菜单</p>
<p style="font-weight: bold;">
<span class="demo3" id="dontShow" style="padding: 5px; background-color:pink">不显示菜单</span>
<span class="demo3" id="showOne" style="padding: 5px;background-color:lightgreen">显示第一项</span>
<span class="demo3" id="showAll" style="padding: 5px;background-color:lightblue">全部显示</span>
</p>
</div>
</div>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="/api/jq/ContextMenu/js/jquery.contextmenu.r2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//class为demo1的样式绑定此右键菜单
$('.demo1').contextMenu('myMenu1', {
bindings: { //绑定事件 
'open': function(t) {
alert('Trigger was ' + t.id + '\nAction was Open');
},
'email': function(t) {
alert('Trigger was ' + t.id + '\nAction was Email');
},
'save': function(t) {
alert('Trigger was ' + t.id + '\nAction was Save');
},
'delete': function(t) {
alert('Trigger was ' + t.id + '\nAction was Delete');
}
}
});
//class为demo2的样式绑定此右键菜单
$('.demo2').contextMenu('myMenu2', {
menuStyle: { //菜单样式
border: '2px solid #000'
},
itemStyle: { //菜单项样式
fontFamily: 'verdana',
backgroundColor: '#666',
color: 'white',
border: 'none',
padding: '1px'
},
itemHoverStyle: { //菜单项鼠标放在上面样式
color: '#fff',
backgroundColor: '#0f0',
border: 'none'
}
});
//class为demo3的样式绑定此右键菜单
$('.demo3').contextMenu('myMenu3', {
onContextMenu: function(e) { //重写onContextMenu
if ($(e.target).attr('id') == 'dontShow')
return false;
else
return true;
},
onShowMenu: function(e, menu) { //重写onShowMenu事件,单独对id=showOne设置
if ($(e.target).attr('id') == 'showOne') {
$('#item_2, #item_3', menu).remove();
}
return menu;
}
});
});
</script>
</body>
</html>

以上所述是小编给大家介绍的3种不同的ContextMenu右键菜单实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery遍历input取得input的name
Apr 27 Javascript
js正确获取元素样式详解
Aug 07 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
深入浅析JavaScript中的constructor
Apr 19 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
详解微信小程序调用支付接口支付
Apr 28 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
详解vue组件之间的通信
Aug 30 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 #Javascript
jQuery下拉菜单的实现代码
Nov 03 #Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 #Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 #Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 #Javascript
vue自定义指令实现v-tap插件
Nov 03 #Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 #Javascript
You might like
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
删除无限级目录与文件代码共享
2006/07/12 PHP
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
利用php+mcDropdown实现文件路径可在下拉框选择
2013/08/07 PHP
ThinkPHP CURD方法之order方法详解
2014/06/18 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
Javascript 复制数组实现代码
2009/11/26 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
怎么清空javascript数组
2013/05/11 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
2016/12/14 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
Python下的subprocess模块的入门指引
2015/04/16 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
快速入门python学习笔记
2017/12/06 Python
python:print格式化输出到文件的实例
2018/05/14 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
公司门卫岗位职责
2014/03/15 职场文书
出国留学担保书
2014/05/20 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
秋季运动会开幕词
2015/01/28 职场文书
病房管理制度范本
2015/08/06 职场文书
python非标准时间的转换
2021/07/25 Python