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 相关文章推荐
js 匿名调用实现代码
Jun 19 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 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
一个程序下载的管理程序(一)
2006/10/09 PHP
杏林同学录(三)
2006/10/09 PHP
php图片验证码代码
2008/03/27 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
PHP编程中尝试程序并发的几种方式总结
2016/03/21 PHP
PHP递归算法的简单实例
2019/02/28 PHP
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
详解vue中多个有顺序要求的异步操作处理
2019/10/29 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
python调用新浪微博API项目实践
2014/07/28 Python
python分布式环境下的限流器的示例
2017/10/26 Python
关于python2 csv写入空白行的问题
2018/06/22 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
Python 互换字典的键值对实例
2019/02/12 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
pandas数据拼接的实现示例
2020/04/16 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
python批量修改文件名的示例
2020/09/27 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
2014年卫生工作总结
2014/11/27 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
Rust中的Struct使用示例详解
2022/08/14 Javascript