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右键菜单演示的更多相关文章
- [xPlugins] jQuery Contextmenu右键菜单
[2012-04-12] Contextmenu 右键菜单 v0.1 版本发布 [功能] 在特定区域弹出右键菜单 [功能] 可以在弹出右键菜单区域内,再屏蔽某个小区域. [功能] 有两种方式添加右键菜 ...
- vue2.0的contextmenu右键菜单
1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset= ...
- WPF中ContextMenu(右键菜单)使用Command在部分控件上默认为灰色的处理方法
原文:WPF中ContextMenu(右键菜单)使用Command在部分控件上默认为灰色的处理方法 问题描述 今天发现如果我想在一个TextBlock弄一个右键菜单,并且使用Command绑定,结果发 ...
- JQuery之ContextMenu(右键菜单)
插件下载地址:http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js压缩版:http://www.tre ...
- contextMenu,右键菜单
<!DOCTYPE html> <html> <head> <title>ContextMenu Event Example</title> ...
- Bootstrap 树形列表与右键菜单
Bootstrap 树形列表与右键菜单 介绍两个Bootstrap的扩展 Bootstrap Tree View 树形列表 jQuery contextMenu 右键菜单 Demo采用CDN分发,直接 ...
- Jquery 右键菜单(ContextMenu)插件使用记录
目前做的项目需要在页面里面用右键菜单,在网上找到两种jquery的右键菜单插件,但是都有各种问题.所以就自己动手把两种插件结合了下. 修改后的右键菜单插架可以根据绑定的触发页面元素不同,复用同一个菜单 ...
- (C#)Windows Shell 外壳编程系列7 - ContextMenu 注册文件右键菜单
原文 (C#)Windows Shell 外壳编程系列7 - ContextMenu 注册文件右键菜单 (本系列文章由柠檬的(lc_mtt)原创,转载请注明出处,谢谢-) 接上一节:(C#)Windo ...
- JS组件系列——Bootstrap右键菜单解决方案：ContextMenu
前言:有段时间没发表随笔了,过个年人都变得懒了.新年刚来上班,今天正好得空,将去年遗留的两个小组件总结记录下.有朋友跟我说:你的bootstrap组件要能够形成一个可以满足一般项目需求的系列组件,才有 ...
随机推荐
- TSQL Merge 用法
在更新数据仓库时,经常需要根据源表对Target表进行数据同步,Merge 命令具有数据更新,删除,插入的功能,专门用于数据同步,并将数据的更新输出到表中.在使用Merge命令时,需要注意when n ...
- 那些年我们一起过的JS闭包，作用域，this，让我们一起划上完美的句号。
之前有写过闭包,作用域,this方面的文章,但现在想想当时写的真是废话太多了,以至于绕来绕去的,让新手反而更难理解了,所以就有了此篇文章,也好和闭包,作用域,this告一段落. 第一个问题:什么是闭包 ...
- KendoUI系列：MultiSelect
1.基本使用 1>.创建Input <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common. ...
- OpenCascade BRep Format Description (2)
OpenCascade BRep Format Description eryar@163.com 摘要Abstract:本文结合OpenCascade的BRep格式描述文档和源程序,对BRep格式进 ...
- 学习WPF——使用Font-Awesome图标字体
图标字体介绍 在介绍图标字体之前,不得不介绍图标格式ICON ICON是一种图标格式,我们操作系统中各种应用程序都包含一个图标 比如QQ程序的图标是一个可爱的企鹅,我的电脑是一个显示器图标 ----- ...
- SharePoint Server 2013开发之旅（一）：新的开发平台和典型开发场景介绍
我终于开始写这个系列文章,实际上确实有一段时间没有动笔了.最近重新安装了一套SharePoint Server 2013的环境,计划利用工作之余的时间为大家写一点新的东西. SharePoint Se ...
- 利用Dapper ORM搭建三层架构
利用Dapper关系对象映射器写的简单的三层架构.Dapper:StackOverFlow在使用的一个微型的ORM,框架整体效率较高,轻量级的ORM框架.网上有较多的扩展.此处只是简单的调用Dappe ...
- MySQL ibdata1文件迁移
目的:主机系统/var目录快满了,经查询最大的文件是mysql的ibdata1文件,有17G大小,故需要迁移这个文件到其他目录下,以释放/var目录空间. 1.先备份下数据库是个好习惯 # mysql ...
- Cordova webapp实战开发：（7）如何通过简单的方法做到，不重新发布APP来修复bug、增加功能、或者躲开苹果的一些严格审核？
到<Cordova webapp实战开发:(6)如何写一个iOS下获取APP版本号的插件?>为止,我们已经大体学会了如何使用Cordova了,那些都是使用Cordova的开发者必备的技能. ...
- Windows Azure Virtual Machine (32) 如何在Windows操作系统配置SFTP
<Windows Azure Platform 系列文章目录> 下载地址:http://files.cnblogs.com/files/threestone/Windows_SFTP.pd ...