[xPlugin] jQuery右键菜单contextMenu实例

URL:

http://www.cnblogs.com/whitewolf/archive/2011/09/28/2194795.html

http://www.blogjava.net/supercrsky/articles/250091.html

好久没写博客了,今天简单介绍一款jQuery鼠标右键菜单contextMenu,这里首先要感谢 我的漫漫程序之旅(原文http://www.blogjava.net/supercrsky/articles/250091.html)。在最近项目中需要频繁的右键菜单操作。我采用了contextMenu这款jQuery插件。

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

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

ui代码:

注:

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!

其他资料jQuery目录:  我jQuery系列之目录汇总

附件下载:Demo

时间: 2024-10-24 15:41:05

[xPlugin] jQuery右键菜单contextMenu实例的相关文章

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

目前做的项目需要在页面里面用右键菜单,在网上找到两种jquery的右键菜单插件,但是都有各种问题.所以就自己动手把两种插件结合了下. 修改后的右键菜单插架可以根据绑定的触发页面元素不同,复用同一个菜单使之根据触发页面元素有不同的行为.支持多个个触发页面元素复用同一个菜单时,分开禁用或恢复禁用菜单或某些菜单项目. 一些说明: 1.菜单的样式由css文件contextMenu.css决定,可以根据需要自行修改,请根据实际情况设定z-index的值,保证菜单在最高的一层 2.请将菜单直接放于body下

jQuery右键菜单contextMenu使用实例

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

jQuery右键菜单ContextMenu使用笔记

插件下载地址:http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js 和http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js 以下几个博文讲解的很详细了:http://www.blogjava.net/supercrsky/articles/250091.html和http://my.osc

JQuery右键菜单插件

// JQuery右键菜单插件 $(function () { context.init({preventDoubleContext: false}); context.settings({compress: true}); context.attach('#chat-view', [ {header: '操作菜单',}, {text: '清理', action: clearConsole}, {divider: true}, { text: '选项', subMenu: [ {header:

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

在具体做一些项目的时候,有时候需要需要先左键点击某个节点,然后再右键点击节点的时候才弹出右键菜单,所以直接右键点击时需要禁用掉右键菜单,这里比如我们为Grid添加了ContextMenu,但是我们需要设置一个bool型的变量isSelected,当我们执行到MouseLeftButtonDown事件中的时候,我们就可以将isSelected设置为true,然后在Grid中添加PreviewMouseRightButtonUp="OnMouseRightButtonUp"(隧道事件路由)

几款jQuery右键菜单插件

1.jQuery Very Simple ContextMenu Plugin 包含jquery库,vscontext.jquery.js,css/vscontext.css 2.jQuery Context Menu Plugin 3.JEEGOOCONTEXT Project Page: http://www.planitworks.nl/jeegoocontext/ 4.JQUERY CONTEXT MENU Project Page:http://www.dynamicdrive.com

js(jquery)右键菜单插件的实现

今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能.也就是在网页点击鼠标右键的时候不是弹出系统的菜单而是我们制定的内容.这样可以拓展右键的功能.实现过程不多说了,写出来的代码和效果如下: js部分: //创建右键菜单 var epMenu={ create:function(point,option){ var menuNode=document.getElementById('epMenu'); if(!menuNode){ //没有菜单节点的时候创建一个 menuNode=document

JQuery之ContextMenu(右键菜单)

插件下载地址:http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js压缩版:http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js Jquery主页:   http://jquery.com/ 插件中的参数说明: Parametersmenu_idThe id of the menu as d

jquery树形菜单

转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!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"&g