在最近项目中需要频繁的右键菜单操作。我采用了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代码

<%@ 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()) > ) {

$("#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="data:image/Home_Age_UnSelect.jpg" width="" height="" />

编辑</li>

<li id="delete">

<img src="data:image/Home_Age_UnSelect.jpg" width="" height="" />

删除</li>

<li id="save">

<img src="data:image/Home_Age_UnSelect.jpg" width="" height="" />

保存</li>

<li id="About">

<img src="data:image/Home_Age_UnSelect.jpg" width="" height="" />

关于</li>

</ul>

</div>

<asp:GridView ID="GridView1" runat="server" Width="100%" BackColor="White" BorderColor="#CCCCCC"

BorderStyle="None" BorderWidth="1px" CellPadding="">

<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！

附件下载：发邮箱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. Python 基础 - 随机列表的交集

    # -*- coding: utf-8 -*- #author:v def shiyiwenpapa(): def sywmemeda(l): #冒泡排序 length = len(l) for i ...

  2. 使用PowerShell向SharePoint中写入数据

    本文介绍了如何在命令行方式下, 创建自定义列表, 将外部数据导入到列表以及生成视图. $listname = "contact0422" $column_text = @( &qu ...

  3. Nginx + php-fpm 执行 PHP 脚本超时 报错 502 Bad Gateway + 504 Gateway Time-out 的解决办法

    上周写好的发送邮件的计划任务只发送了一部分,检查计划任务日志,发现 502 Bad Gateway 的错误(已经在脚本中设置了 set_time_limit(0)). 后来在网上查找资料,可以通过以下 ...

  4. uglifyjs压缩批处理

    uglifyjs. 据说是用来压缩JS文件的,据说还能优化JS,据说是基于node的,还据说比Google Closure Compiler更带感. uglifyjs压缩批处理我们不可能每次都打开cm ...

  5. 20145218&20145240 《信息安全系统设计基础》实验一 开发环境的熟悉

    20145218&20145240 <信息安全系统设计基础>实验一 开发环境的熟悉 课程:信息安全系统设计基础 班级:1452 姓名:(按贡献大小排名)刘士嘉 张晓涵 学号:(按贡 ...

  6. Java-马士兵设计模式学习笔记-代理模式-聚合与继承方式比较

    一.概述 1.目标:要在Tank的move()方法做时间代理及日志代理(可以设想以后还要增加很多代理处理),且代理间的顺序可活更换 2.思路: (1)聚合:代理类聚合了被代理类,且代理类及被代理类都实 ...

  7. 【Android测试】【第十七节】Instrumentation——App任你摆布（反射技术的引入）

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处.  转载请注明出处:http://www.cnblogs.com/by-dream/p/5569844.html 前言 学习了上节之后,大家是否已经 ...

  8. word-break、word-wrap和其他文字属性

    word-break: break-all; 控制是否断词.(粗暴方式断词)break-all,是断开单词.在单词到边界时,下个字母自动到下一行.主要解决了长串英文的问题. word-wrap: br ...

  9. HTML5革命即将爆发

    近日,关于"HTML5生态重建冷思考"成为了很多人热烈讨论的话题.在网页制作市场上面,HTML5技术成为了颇为关注的焦点,在行业和社会各界引起了广泛的关注.HTML5网页制作也创造 ...

  10. vi/vim

    config file location 1. MinGW: C:\MinGW\msys\1.0\share\vim\vimrc 2. Linux: home config file content ...