jQuery右键菜单contextMenu使用实例


Posted in Javascript onSeptember 28, 2011

在下面我们将设计一个场景,表格grid需要在每行实现鼠标右键,增加,删除,保存操作。grid我就用gridview了,随便用微软提供的样式,测试用例不用搞的多好看嘛,我也不是做美工了,哈哈,偷偷懒。

先上效果图,是有些同志说的有图才有真相嘛:
jQuery右键菜单contextMenu使用实例
ui代码:

<%@ 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>

注:
1:contextMenu我们互根据数据记录隐藏一些菜单项,这个可以在onShowMenu事件中,根据
e.currentTarget触发源获取数据,在根据remove菜单项。比如测试用例中的:如果id>10则不允许保存
if (parseInt($("td:eq(0)", e.currentTarget).text()) > 10) {
$("#save", menu).remove();
}
2:事件注册:根据第二个参数target获取数据,第一个参数t获取菜单项。比如:
'add': function(t, target) { 
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); 
}); 
});

我修改后:
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); 
}); 
});

这样就一切正常了。
内容很少,一切就在此打断,结束 ,over!
附件下载:Demo
Javascript 相关文章推荐
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
Javascript Objects详解
Sep 04 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
第九章之路径分页标签与徽章组件
Apr 25 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
node 标准输入流和输出流代码实例
Sep 19 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
封装了一个js图片轮换效果的函数
Sep 28 #Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 #Javascript
JavaScript ECMA-262-3 深入解析.第三章.this
Sep 28 #Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 #Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 #Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 #Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
Sep 27 #Javascript
You might like
thinkphp命名空间用法实例详解
2015/12/30 PHP
jquery的Theme和Theme Switcher使用小结
2010/09/08 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
Jquery 点击按钮自动高亮实现原理及代码
2014/04/25 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
详解Javascript 装载和执行
2014/11/17 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
Python中文编码知识点
2019/02/18 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
Python 的AES加密与解密实现
2019/07/09 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
2014年仓库工作总结
2014/11/20 职场文书
民间借贷借条范本
2015/05/25 职场文书
无犯罪记录证明样本
2015/06/16 职场文书