jQuery右键菜单contextMenu实例

简介:

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

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

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

image

ui代码:

View Code
注:

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


本文转自破狼博客园博客,原文链接:http://www.cnblogs.com/whitewolf/archive/2011/09/28/2194795.html,如需转载请自行联系原作者

目录
打赏
0
0
0
0
51
分享
相关文章
|
2月前
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
47 14
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
77 21
|
3月前
|
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
102 16
|
3月前
|
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
91 9
简单易用的jquery响应式轮播图插件ma5slider
ma5slider是一款简单易用的jquery响应式轮播图插件。该轮播图支持鼠标拖拽,可以通过CSS定制外观,支持无限循环模式,内置水平,垂直和淡入淡出三种轮播图过渡动画效果。
简洁实用的jQuery进度条插件
这是一款简洁实用的jQuery进度条插件。该插件使用简单,通过在页面中放置指定的HTML代码,即可生成带动画效果的进度条。
jQuery文字跑马灯插件Marquee
jQuery.Marquee是一款jQuery文字跑马灯插件。jQuery.Marquee跑马灯插件可以结合使用CSS3动画,制作文字的上下左右移动效果。
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
40 2