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做的一个简单的屏幕锁定提示框
Mar 26 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
jQuery知识点整理
Jan 30 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
webpack手动配置React开发环境的步骤
Jul 02 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
如何使用Strace调试工具
2013/06/03 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
详解PyTorch中Tensor的高阶操作
2019/08/18 Python
浅析Python __name__ 是什么
2020/07/07 Python
python实现简单贪吃蛇游戏
2020/09/29 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
材料化学应届生求职信
2013/10/09 职场文书
大学生作弊检讨书
2014/09/11 职场文书
2015年煤矿工作总结
2015/04/28 职场文书
回复函范文
2015/07/14 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers