简单使用的右键菜单，希望能帮助大家。下面是截图和实例代码
<!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>
相关推荐
在计算机用户界面设计中，右键菜单（通常称为ContextMenu）是一种常见的交互元素，它为用户提供了一种快捷方式来访问特定的操作或功能。本教程将详细讲解三种不同的ContextMenu实现方法，帮助开发者更好地理解和应用...
在"3种不同的ContextMenu右键演示"中，可能还会涉及如何处理菜单项的点击事件，以及如何根据用户的操作（如选择、编辑、删除等）来更新页面内容。此外，可能还会讨论到响应式设计，确保在不同设备和屏幕尺寸上的用户...
总结起来，`ExtJS`的`Tree`组件结合`contextmenu`事件和动态生成的菜单，可以轻松实现不同节点有不同的右键菜单。这种定制化的能力使得开发者可以根据业务需求为每个节点提供个性化的操作选项，提高了用户体验。对于...
在网页上，右键菜单通常是用户通过鼠标右键点击时弹出的定制菜单，与浏览器自带的右键菜单不同，它可以提供网站特定的功能。实现这一效果，jQuery提供了事件监听和自定义功能的强大支持。 1. **监听右键点击事件**...
这个压缩包可能包含了一个完整的示例项目，用于演示如何在网页中创建功能丰富的右键菜单。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互。在右键菜单的实现中，jQuery...
在这个场景中，我们可能会看到一个名为"Example102-修改系统的右键菜单"的示例项目，它可能是为了演示如何实现这一功能。 首先，我们需要理解ASP.NET中的页面生命周期。当用户在浏览器中触发右键点击事件时，这个...
在JavaScript中，我们可以监听浏览器的`contextmenu`事件，该事件在用户尝试打开右键菜单时触发。当检测到这个事件时，我们可以通过调用`event.preventDefault()`方法阻止默认的右键菜单显示。 以下是一个简单的...
标题 "禁用页面及页面所有frame内的右键菜单" 涉及到的是网页交互中的一个常见需求，即阻止用户在网页或特定框架内通过鼠标右键点击打开...这可能是一个简单的演示项目，用于展示如何在含有frame的页面上禁用右键菜单。
**jQuery右键菜单**是一种基于JavaScript库jQuery实现的交互式功能，它允许用户在网页上通过鼠标右键点击触发自定义的上下文菜单。这款经典好用的jQuery右键菜单解决方案，提供了丰富的样例，方便开发者快速理解和...
下面我们将深入探讨C#中托盘图标的应用，以及如何实现右键菜单功能。 首先，托盘图标是Windows应用程序中的一种常见设计，当用户关闭主窗口后，程序依然能在系统托盘区域保持运行状态，通常会有一个小图标代表该...
Tree(D+Z+X)与JQuery结合实现的右键菜单是一种常见的前端交互设计，它在网页中提供了方便快捷的操作入口。在这个项目中，我们主要关注如何利用Tree(d,z,x)的数据结构，以及JQuery库来创建动态和静态的右键菜单，并...
3. **拦截和处理消息**：当收到`WM_CONTEXTMENU`消息时，我们可以选择不将其传递给原始窗口过程，即不调用`CallWindowProc`函数，这样就可以阻止右键菜单的显示。如果需要，我们还可以在此处添加自己的逻辑，例如弹...
总之，jQuery.contextmenu插件提供了一种高效且易于使用的解决方案，帮助开发者快速构建功能完备、用户体验良好的右键菜单系统，提升网站或应用的交互性和用户友好度。通过深入理解和实践，开发者可以充分利用这款...
请注意，尽管这样可以屏蔽Flash内部的右键菜单，但是由于WebBrowser控件本身还允许用户进行右键操作，所以你可能还需要覆盖WebBrowser控件的`ContextMenu`事件，以阻止全局的右键点击： ```csharp this....
文件中提到了在线演示的网址，提供了实际使用Treeview和右键菜单功能的示例。另外，也可以通过提供的链接下载包含jQuery.Treeview和右键菜单插件的压缩包，方便本地开发和学习。 ### 总结 通过本知识点的整理，可以...
然而，通过jQuery右键插件，我们可以定制自己的右键菜单，根据不同的网页元素或场景提供个性化的功能选项。 这个插件的工作原理是监听鼠标右键点击事件，当用户在指定的元素上右键点击时，会触发自定义的右键菜单...
在JavaFX中，我们可以使用ContextMenu类来实现右键菜单。 2. **创建JPopupMenu**： - 在Swing中，首先需要创建一个JPopupMenu实例，然后添加JMenuItem。每个JMenuItem代表菜单中的一个选项。例如： ``` ...
jQuery-contextMenu是一个...总之，jQuery-contextMenu是一个强大且灵活的右键菜单解决方案，适合各种Web应用的需求。无论你是前端开发者还是设计师，都能通过这个插件快速提升用户体验，实现富有特色的右键交互功能。
vue3-上下文菜单Vue3 的上下文菜单组件English |简体中文特征简单易用，体积小提供组件模式、函数模式提供多种主题风格供您使用可定制文档查看文档点击此处查看在线演示用法npm install -save @imengyu/vue3-context...