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 相关文章推荐
JavaScript 设计模式学习 Factory
Jul 29 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
Nov 14 Javascript
JavaScript正则表达式验证登录实例
Mar 18 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
具有时效性的php加密解密函数代码
2013/06/19 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
关于php中的json_encode()和json_decode()函数的一些说明
2016/11/20 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
angular实现表单验证及提交功能
2017/02/01 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
分享一下如何编写高效且优雅的 Python 代码
2017/09/07 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
如何运行带参数的python脚本
2019/11/15 Python
Python生成器generator原理及用法解析
2020/07/20 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
办公室驾驶员岗位职责
2013/11/15 职场文书
工程质量承诺书范文
2014/03/27 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
市场营销策划方案
2014/06/11 职场文书
中学政教处工作总结
2015/08/13 职场文书
python pygame 开发五子棋双人对弈
2022/05/02 Python
讨论nginx location 顺序问题
2022/05/30 Servers