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 相关文章推荐
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
jQuery之折叠面板的深入解析
Jun 19 Javascript
JavaScript+CSS无限极分类效果完整实现方法
Dec 22 Javascript
详解JS对象封装的常用方式
Dec 30 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
微信小程序分页加载的实例代码
Jul 11 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
vue实现顶部菜单栏
Nov 08 Javascript
VUE解决跨域问题Access to XMLHttpRequest at
May 06 Vue.js
利用纯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
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
二级域名转向类
2006/11/09 Javascript
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
jquery tools系列 expose 学习
2009/09/06 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
2018/10/01 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
JS+JQuery实现无缝连接轮播图
2020/12/30 jQuery
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
Python爬取APP下载链接的实现方法
2016/09/30 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
浅述python中深浅拷贝原理
2018/09/18 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
Julep官网:美容产品和指甲油
2017/02/25 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
爱国主义演讲稿
2014/05/07 职场文书
图书馆标语
2014/06/19 职场文书
超市周年庆活动方案
2014/08/16 职场文书
如何写新闻稿
2015/07/18 职场文书
消防安全主题班会
2015/08/12 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
Redis实现订单过期删除的方法步骤
2022/06/05 Redis