在最近项目中需要频繁的右键菜单操作。我采用了contextMenu这款jQuery插件。

参考网址：http://www.jb51.net/article/58709.htm

官网demo http://medialize.github.io/jQuery-contextMenu/demo/callback.html

文章使用相关js文件 http://download.csdn.net/detail/chenxiang199055/6448645

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

先上效果图，是有些同志说的有图才有真相嘛：

ui代码

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <title></title>
  6. <%-- --%>
  7. <script src="Script/jquery.js" type="text/javascript"></script>
  8. <script src="Script/jquery.contextmenu.r2.js" type="text/javascript"></script>
  9. <style type="text/css">
  10. .SelectedRow
  11. {
  12. background: yellow;
  13. }
  14. .contextMenu
  15. {
  16. display: none;
  17. }
  18. </style>
  19. <script type="text/javascript">
  20. $(function() {
  21. $('#GridView1 tr:gt(0)').contextMenu('menu',
  22. {
  23. bindings:
  24. {
  25. 'add': function(t, target) {
  26. alert('Trigger：' + t.id + ' 增加' + " taget by:" + $("td:eq(0)", target).text());
  27. },
  28. 'delete': function(t, target) {
  29. alert('Trigger：' + t.id + ' 删除' + " taget by:" + $("td:eq(0)", target).text());
  30. $(target).remove();
  31. },
  32. 'save': function(t, target) {
  33. alert('Trigger：' + t.id + ' 保存' + " taget by:" + $("td:eq(0)", target).text());
  34. },
  35. 'About': function(t, target) {
  36. alert('Code by http://www.cnblogs.com/whitewolf/');
  37. }
  38. },
  39. onShowMenu: function(e, menu) {
  40. if (parseInt($("td:eq(0)", e.currentTarget).text()) > ) {
  41. $("#save", menu).remove();
  42. }
  43. $(e.currentTarget).siblings().removeClass("SelectedRow").end().addClass("SelectedRow");
  44. return menu;
  45. }
  46. });
  47. })
  48. </script>
  49. </head>
  50. <body>
  51. <form id="form1" runat="server">
  52. <div>
  53. <div class="contextMenu" id="menu">
  54. <ul>
  55. <li id="add">
  56. <img src="data:image/Home_Age_UnSelect.jpg" width="" height="" />
  57. 编辑</li>
  58. <li id="delete">
  59. <img src="data:image/Home_Age_UnSelect.jpg" width="" height="" />
  60. 删除</li>
  61. <li id="save">
  62. <img src="data:image/Home_Age_UnSelect.jpg" width="" height="" />
  63. 保存</li>
  64. <li id="About">
  65. <img src="data:image/Home_Age_UnSelect.jpg" width="" height="" />
  66. 关于</li>
  67. </ul>
  68. </div>
  69. <asp:GridView ID="GridView1" runat="server" Width="100%" BackColor="White" BorderColor="#CCCCCC"
  70. BorderStyle="None" BorderWidth="1px" CellPadding="">
  71. <RowStyle ForeColor="#000066" />
  72. <FooterStyle BackColor="White" ForeColor="#000066" />
  73. <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
  74. <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
  75. <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
  76. </asp:GridView>
  77. </div>
  78. </form>
  79. </body>
  80. </html>

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

  1. 'add': function(t, target) {
  2. alert('Trigger：' + t.id + ' 增加' + " taget by:" + $("td:eq(0)", target).text());
  3. },

在这里需要用到ajax和服务端通讯，可以采用我的上一篇组件：jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法，将会更简单应用ajax通讯。 
在我下的源代码中这里有点问题： 
原来的，这里的currentTarget始终为undefined。

  1. if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu);
  2. $.each(cur.bindings, function(id, func) {
  3. $('#' + id, menu).bind('click', function(e) {
  4. hide();
  5. func(trigger, currentTarget);
  6. });
  7. });

我修改后：

  1. if (!!cur.onShowMenu) menu = cur.onShowMenu(e, menu);
  2. $.each(cur.bindings, function(id, func) {
  3. $('#' + id, menu).bind('click', function(ev) {
  4. hide();
  5. func(trigger, e.currentTarget);
  6. });
  7. });

这样就一切正常了。 
内容很少，一切就在此打断，结束 ，over！

附件下载：发邮箱bwlfc@qq.com

jQuery右键菜单contextMenu使用实例的更多相关文章

  1. jQuery右键菜单contextMenu实例

    URL: http://www.cnblogs.com/whitewolf/archive/2011/09/28/2194795.html http://www.blogjava.net/superc ...

  2. Jquery 右键菜单(ContextMenu)插件使用记录

    目前做的项目需要在页面里面用右键菜单,在网上找到两种jquery的右键菜单插件,但是都有各种问题.所以就自己动手把两种插件结合了下. 修改后的右键菜单插架可以根据绑定的触发页面元素不同,复用同一个菜单 ...

  3. jQuery右键菜单ContextMenu使用笔记

    插件下载地址:http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js 和http://ww ...

  4. jquery右键菜单

    点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html&g ...

  5. 几款jQuery右键菜单插件介绍

    在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...

  6. 【WPF】右键菜单ContextMenu可点击区域太小的问题

    问题描述 正常使用右键菜单ContextMenu时,如果菜单项是不变的,可以直接在XAML中写死,如下是给一个Button按钮添加了右键菜单功能. <Button Content="T ...

  7. ExtJS配置TabPanel的鼠标右键菜单(ContextMenu)功能

    更新记录 2022年6月14日 发布. 2022年6月13日 初稿. TabPanel的鼠标右键菜单(ContextMenu)功能介绍 开源的TabPanel组件很少做到拖拽调整tab顺序功能的,支持 ...

  8. WPF 如何控制右键菜单ContextMenu的弹出

    在具体做一些项目的时候,有时候需要需要先左键点击某个节点,然后再右键点击节点的时候才弹出右键菜单,所以直接右键点击时需要禁用掉右键菜单,这里比如我们为Grid添加了ContextMenu,但是我们需要 ...

  9. js jQuery 右键菜单 清屏

    主要用到了oncontextmenu事件,在oncontextmenu事件中使用return false 屏蔽掉原生右键菜单,再使用event获取鼠标的坐标位置,设置自定义菜单的位置. http:// ...

随机推荐

  1. CSS，bootstrap表格控制当td内容过长时用省略号表示，以及在不使用bootstrap时过长也用省略号表示

    首先需要在table中设置table-layout:fixed; <table style="table-layout:fixed"></table> 然后 ...

  2. html - 自动播放音乐

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. JavaScript原型链问题

    1. 使用new来创建对象(调用构造函数)时,如果return的是非对象(数字.字符串.布尔类型等)会忽而略返回值;如果return的是对象,则返回该对象. 2. 重写原型会切断原型链: foo = ...

  4. 让你的网站秒开 为IIS启用“内容过期”

    让你的网站秒开,为IIS启用“内容过期” 什么是内容过期? 当用户第一次访问你的网站,浏览器从你的网站主机下载内容,如果用户第二次访问你的网站,浏览器从缓存读取内容.你知道浏览器从缓存读取网页有多快吗 ...

  5. Unity学习疑问记录之新GUI

    学习Unity 4.6新GUI系统 http://segmentfault.com/a/1190000000642686

  6. [转]MongoDB密码设置（基于windows）

    参考文档:http://www.cnblogs.com/zengen/archive/2011/04/23/2025722.html   MongoDB部署到Windows上后是默认是无权限限制的的. ...

  7. ie下如果已经有缓存,load方法的效果就无法执行.的解决方法

    <script type="text/javascript">        $(document).ready(function(){        $('img') ...

  8. RESTful使用

    测试工具: JMeter 可以使用JMeter对HTTP REST接口进行测试 Java RESTful框架: Jersey

  9. 【译】在ASP.Net和IIS中删除不必要的HTTP响应头

    引入 每次当浏览器向Web服务器发起一个请求的时,都会伴随着一些HTTP头的发送.而这些HTTP头是用于给Web服务器提供一些额外信息以便于处理请求.比如说吧.如果浏览器支持压缩功能,则浏览器会发送A ...

  10. 《Linux内核分析》第六周 进程的描述与创建

    [刘蔚然 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] WEEK SIX(3 ...