开发者社区> ghost丶桃子> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery右键菜单contextMenu实例

简介:
+关注继续查看

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

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

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

image

ui代码:

ExpandedBlockStart.gif
复制代码
<%@ 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!

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

附件下载:Demo


作者:破  狼 
出处:http://www.cnblogs.com/whitewolf/ 
本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。该文章也同时发布在我的独立博客中-个人独立博客博客园--破狼51CTO--破狼。http://www.cnblogs.com/whitewolf/archive/2011/09/28/2194795.html


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery插件开发的五种形态[转]
这篇文章主要介绍了jQuery插件开发的五种形态小结,具体的内容就是解决javascript插件的8种特征,非常的详细。 关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课。开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多。这里我把我
2703 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1019 0
40款非常棒的 jQuery 插件和制作教程(系列二)
jQuery 在现在的 Web 开发项目中扮演着重要角色,jQuery 让网站有更好的可用性和用户体验,让访问者对网站留下非常好的印象。jQuery 以其插件众多、独特、轻量以及支持大规模的网站开发闻名。
1086 0
10个最佳jQuery Lightbox效果插件收集
  大家都很喜欢 Lightbox 弹框效果,这种效果在很多地方都很有用。而原始的 Lightbox 脚本已经被无数次的克隆到了所有的流行 Javascript 库中。本文特别收集了10个最佳的Lightbox效果插件,所以收藏本文吧,不定什么时候你就用到了…… 您可能感兴趣的相关文章 ...
942 0
1955
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载