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 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
JavaScript的public、private和privileged模式
Dec 28 Javascript
javascript instanceof,typeof的区别
Mar 24 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
使用js完成节点的增删改复制等的操作
Jan 02 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
利用纯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
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
JS动画效果代码3
2008/04/03 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
数组Array的一些方法(总结)
2017/02/17 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
python实现textrank关键词提取
2018/06/22 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Python字符串的修改方法实例
2019/12/19 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
应届毕业生求职信
2013/11/30 职场文书
工业设计专业自荐书
2014/06/05 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
邀请函范文
2015/02/02 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
手残删除python之后的补救方法
2021/06/26 Python
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题