jQuery右键菜单contextMenu实例
- We_Get - 博客园-首页原创精华区 好久没写博客了，今天简单介绍一款jQuery鼠标右键菜单contextMenu，这里首先要感谢 我的漫漫程序之旅（原文http://www.blogjava.net/supercrsky/articles/250091.html）. 在最近项目中需要频繁的右键菜单操作. 我采用了contextMenu这款jQuery插件.
jQuery右键菜单contextMenu实例
标签：
jquery
右键
菜单
| 发表时间：2011-09-28 20:53 | 作者：破狼 We_Get
出处：http://www.cnblogs.com/
好久没写博客了，今天简单介绍一款jQuery鼠标右键菜单contextMenu，这里首先要感谢 我的漫漫程序之旅（原文http://www.blogjava.net/supercrsky/articles/250091.html）。在最近项目中需要频繁的右键菜单操作。我采用了contextMenu这款jQuery插件。
在下面我们将设计一个场景，表格grid需要在每行实现鼠标右键，增加，删除，保存操作。grid我就用gridview了，随便用微软提供的样式，测试用例不用搞的多好看嘛，我也不是做美工了，哈哈，偷偷懒。
先上效果图，是有些同志说的有图才有真相嘛：
ui代码：
View Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 runat="server">
<title></title>
<%-- --%>
<script src="Script/jquery.js" type="text/javascript"></script>
<script src="Script/jquery.contextmenu.r2.js" type="text/javascript"></script>
<style type="text/css">
.SelectedRow
{
background: yellow;
}
.contextMenu
{
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$('#GridView1 tr:gt(0)').contextMenu('menu',
{
bindings:
{
'add': function(t, target) {
alert('Trigger：' + t.id + ' 增加' + " taget by:" + $("td:eq(0)", target).text());
},
'delete': function(t, target) {
alert('Trigger：' + t.id + ' 删除' + " taget by:" + $("td:eq(0)", target).text());
$(target).remove();
},
'save': function(t, target) {
alert('Trigger：' + t.id + ' 保存' + " taget by:" + $("td:eq(0)", target).text());
},
'About': function(t, target) {
alert('Code by http://www.cnblogs.com/whitewolf/');
}
},
onShowMenu: function(e, menu) {
if (parseInt($("td:eq(0)", e.currentTarget).text()) > 10) {
$("#save", menu).remove();
}
$(e.currentTarget).siblings().removeClass("SelectedRow").end().addClass("SelectedRow");
return menu;
}
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="contextMenu" id="menu">
<ul>
<li id="add">
<img src="image/Home_Age_UnSelect.jpg" width="16" height="16" />
编辑</li>
<li id="delete">
<img src="image/Home_Age_UnSelect.jpg" width="16" height="16" />
删除</li>
<li id="save">
<img src="image/Home_Age_UnSelect.jpg" width="16" height="16" />
保存</li>
<li id="About">
<img src="image/Home_Age_UnSelect.jpg" width="16" height="16" />
关于</li>
</ul>
</div>
<asp:GridView ID="GridView1" runat="server" Width="100%" BackColor="White" BorderColor="#CCCCCC"
BorderStyle="None" BorderWidth="1px" CellPadding="3">
<RowStyle ForeColor="#000066" />
<FooterStyle BackColor="White" ForeColor="#000066" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
</asp:GridView>
</div>
</form>
</body>
</html>
<!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 runat="server">
<title></title>
<%-- --%>
<script src="Script/jquery.js" type="text/javascript"></script>
<script src="Script/jquery.contextmenu.r2.js" type="text/javascript"></script>
<style type="text/css">
.SelectedRow
{
background: yellow;
}
.contextMenu
{
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$('#GridView1 tr:gt(0)').contextMenu('menu',
{
bindings:
{
'add': function(t, target) {
alert('Trigger：' + t.id + ' 增加' + " taget by:" + $("td:eq(0)", target).text());
},
'delete': function(t, target) {
alert('Trigger：' + t.id + ' 删除' + " taget by:" + $("td:eq(0)", target).text());
$(target).remove();
},
'save': function(t, target) {
alert('Trigger：' + t.id + ' 保存' + " taget by:" + $("td:eq(0)", target).text());
},
'About': function(t, target) {
alert('Code by http://www.cnblogs.com/whitewolf/');
}
},
onShowMenu: function(e, menu) {
if (parseInt($("td:eq(0)", e.currentTarget).text()) > 10) {
$("#save", menu).remove();
}
$(e.currentTarget).siblings().removeClass("SelectedRow").end().addClass("SelectedRow");
return menu;
}
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="contextMenu" id="menu">
<ul>
<li id="add">
<img src="image/Home_Age_UnSelect.jpg" width="16" height="16" />
编辑</li>
<li id="delete">
<img src="image/Home_Age_UnSelect.jpg" width="16" height="16" />
删除</li>
<li id="save">
<img src="image/Home_Age_UnSelect.jpg" width="16" height="16" />
保存</li>
<li id="About">
<img src="image/Home_Age_UnSelect.jpg" width="16" height="16" />
关于</li>
</ul>
</div>
<asp:GridView ID="GridView1" runat="server" Width="100%" BackColor="White" BorderColor="#CCCCCC"
BorderStyle="None" BorderWidth="1px" CellPadding="3">
<RowStyle ForeColor="#000066" />
<FooterStyle BackColor="White" ForeColor="#000066" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
</asp:GridView>
</div>
</form>
</body>
</html>
1：contextMenu我们互根据数据记录隐藏一些菜单项，这个可以在onShowMenu事件中，根据
e.currentTarget触发源获取数据，在根据remove菜单项。比如测试用例中的：如果id>10则不允许保存
if (parseInt($("td:eq(0)", e.currentTarget).text()) > 10) {
$("#save", menu).remove();
}
$("#save", menu).remove();
}
2:事件注册：根据第二个参数target获取数据，第一个参数t获取菜单项。比如：
'add': function(t, target) {
alert('Trigger：' + t.id + ' 增加' + " taget by:" + $("td:eq(0)", target).text());
},
alert('Trigger：' + t.id + ' 增加' + " taget by:" + $("td:eq(0)", target).text());
},
在这里需要用到ajax和服务端通讯，可以采用我的上一篇组件：jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法，将会更简单应用ajax通讯。
在我下的源代码中这里有点问题：
原来的，这里的currentTarget始终为undefined。
if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu);
$.each(cur.bindings, function(id, func) {
$('#' + id, menu).bind('click', function(e) {
hide();
func(trigger, currentTarget);
});
});
$.each(cur.bindings, function(id, func) {
$('#' + id, menu).bind('click', function(e) {
hide();
func(trigger, currentTarget);
});
});
我修改后：
if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu);
$.each(cur.bindings, function(id, func) {
$('#' + id, menu).bind('click', function(ev) {
hide();
func(trigger, e.currentTarget);
});
});
$.each(cur.bindings, function(id, func) {
$('#' + id, menu).bind('click', function(ev) {
hide();
func(trigger, e.currentTarget);
});
});
这样就一切正常了。
内容很少，一切就在此打断，结束 ，over！
其他资料jQuery目录： 我jQuery系列之目录汇总
附件下载：Demo
作者: 破狼 发表于 2011-09-28 20:53 原文链接
最新新闻：
· 微信来了短信悬了(2011-09-29 12:09)
· 微软关停僵尸网络 称绝不妥协(2011-09-29 12:08)
· 英特尔摆脱MeeGo 开发开源软件平台Tizen(2011-09-29 12:08)
· 宣传蓝光版《星球大战》，东京地铁扶手变光剑(2011-09-29 12:04)
· 自由软件正则表达式引擎的对比(2011-09-29 12:03)
编辑推荐：Web前端开发中的MCRV模式
相关 [jquery 右键 菜单] 推荐：
Google地图之右键菜单
- ※ABeen※ - 博客园-首页原创精华区this.container = document.createElement("div");// 菜单容器. this.point = null;//右键点击时，相对于地图的坐标. this.map = null;// 地图对象. this.isEnable = true;//是否启用. 89 // 添加一个菜单项(text:菜单项文本，icon:菜单项图标，eve:菜单项单击事件).
右键菜单增加进入CMD命令快捷方式
- - 操作系统 - ITeye博客 为了运行Python脚本，需要频繁地在CMD下敲CD命令，太麻烦，于是就在网上查了一下，通过在目录右键菜单中添加一个快捷项目，可以快速启动CMD并自动切换到该目录下. 为了运行Python脚本，需要频繁地在CMD下敲CD命令，太麻烦，于是就在网上查了一下，通过在目录右键菜单中添加一个快捷项目，可以快速启动CMD并自动切换到该目录下.
绚丽而又实用的jQuery和CSS3导航菜单
- - CSDN博客推荐文章我们说导航菜单是网站的一扇门，然而精美便捷的导航更是能让用户方便地游走在网站的各个角落，更重要的是，能让用户牢牢地记住这扇大门，记住这个网站. 所以很多网站设计师对网站导航的设计非常重视. 下面我就向大家分享几款个人觉得非常不错的jQuery和CSS3导航，每一款都挺实用的，而且都是开源的，提供下载源码.
简单的jQuery翻牌效果导航菜单
- - 可咔酷 | 网络杂货铺前几天，有人在Q问那种翻牌效果的广告怎么实现，抽空整了个简单的jQuery翻牌效果的导航菜单，其实说简单也不是很简单，重要的是想好整个过程的思路就好下手了，不整demo了，直接贴代码. 简单的jQuery翻牌效果导航菜单 . 预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了.
RightMenuMgr – 强大的右键菜单管理工具 | 小众软件 > 系统工具
- frocket - 小众软件RightMenuMgr 是一款强大的右键菜单管理工具，提供“文件”、“文件夹”、“磁盘”等几乎所有地方的右键菜单管理， RightMenuMgr 附加提供了 IE 右键菜单管理. 并且 RightMenuMgr 还允许你自己添加自定义右键菜单，十分之方便. 下载(576 KB): dbank | 官方网站 | 来自小众软件.
谷奥: 用 Apps list 从 Chrome 右键菜单里打开网页应用
- 远望无限 - 谷奥聚合——谷奥主站+谷安 aggregatorChrome的右键菜单是个加以开发的好地方，很多扩展都将功能塞到这里. 在安装Apps list这枚扩展之后，你就会发现所有安装的Chrome网页应用都出现在右键菜单里的Apps选项里了（上图），你甚至可以直接进入Chrome Web Store和管理扩展的界面. 这比用新建标签页来打开要快多了，即便是用AppJump Launcher扩展打开也要占用一个扩展的位置呢.
MenuUninstaller – 右键菜单卸载软件 | 小众软件 > 实用工具
- Swifters - 小众软件无需打开控制面板 – 添加删除程序，MenuUninstaller 直接为右键菜单添加卸载选项，作用于 EXE 和快捷方式. 实验表明，大部分程序都管用，对于绿色程序无效. 下载: 官网 | 下载 | 来自小众软件. ©2011 Thruth for 小众软件 | 原文链接 | 5 留言 | 加入我们 | 投稿 | 订阅指南.
实现 Amazon 超快反应速度下拉菜单的 jQuery 插件
- - 博客园_梦想天空jQuery 菜单插件，用于实现前几天网上流传很广的 . Amazon 主页的左上角超快反应速度下拉菜单. 当鼠标从菜单中的选项上滑过时，子菜单的显示速度是超快的. 使用 Toolbar.js 实现超酷的 Tooltip 风格工具栏. Textillate.js – 实现 CSS3 文本动画的简单插件.
[来自异次元] ShellExView – 轻松清理 Windows 系统右键菜单项目的绿色小工具
- 尘世客 - 异次元软件世界 当电脑使用的时间长了之后，我们不可避免地会在它上面安装越来越多的软件，其中不少会“擅自”为你增加一些右键菜单的选项，“方便”你随时使用. 然而，很多时候我们都不希望右键菜单太多垃圾，那么我们一起来清理一下吧. 其实我们常见的电脑优化软件一般都有清理右键菜单的，但我个人并不喜欢安装那类型的软件，于是，我找来了一款免费绿色的 Windows 右键菜单清理的小工具 ShellExView，它能显示所有 Windows 右键菜单的项目，其中包含文件和文件夹甚至是 Internet Explorer 的右键菜单，然后由用户决定是否将其禁用…….