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 相关文章推荐
js停止输出代码
Jul 20 Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
js Date概念详细介绍
Nov 22 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
Angular实现表单验证功能
Nov 13 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
vue input输入框关键字筛选检索列表数据展示
Oct 26 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
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
用正则表达式替换图片地址img标签
2013/11/22 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
从零学习node.js之mysql数据库的操作(五)
2017/02/24 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
jQuery实现滑动星星评分效果(每日分享)
2019/11/13 jQuery
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
python实现AES加密解密
2019/03/28 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
几个Linux面试题笔试题
2012/12/01 面试题
Java基础类库面试题
2013/09/04 面试题
和平主题的演讲稿
2014/01/12 职场文书
单位委托书怎么写
2014/08/02 职场文书
我的中国梦主题班会
2015/08/14 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
详解Python为什么不用设计模式
2021/06/24 Python
一文简单了解MySQL前缀索引
2022/04/03 MySQL
三种方式清除vue路由跳转router-link的历史记录
2022/04/10 Vue.js
MySQL 数据 data 基本操作
2022/05/04 MySQL