Jquery ContextMenu插件改造

1条回复

最近需要在页面的表格上使用的右键弹出菜单，考察了下网络上的几个右键菜单发现都不太符合：需要能够用列表来布局菜单，而不是都放在javascript中控制。Jqueryui 的menu插件采用ul和li来布局，但是菜单项仅仅是个超级链接，不能结合当前被右键单击的元素进行动态传递参数和禁用/启用菜单。于是网上找了个插件自己来改造。

首先增加了几个参数：currentTarget用于保存当前的右键单击事件的对象；actions用于根据菜单id来进行函数绑定；selector用于保存当前应用右键菜单的选择器；options对象用于保存一些其他的扩展参数，比如hover为鼠标滑过菜单的css样式，highlight为当前右键单击元素的css样式。actions对象可以包括多个子对象，每一个子对象可以包含两个函数click和disabled，前者响应用户单击菜单事件，后者则指示是否在当前右键对象上禁用相关菜单。两个函数都将传入两个参数：source和li，source为右键单击的(jquery)对象，li则是当前单击的菜单(jquery)对象。用法示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="jqcontextmenu.css" />
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jqcontextmenu.js"></script>
    <style>
        .myhighlight{
            background-color:#DEDEDE;
        }
        .myjqhover{
            background-color:#DEDEDE;
        }
    </style>
 
    <script type="text/javascript">
 
    //Usage: $(elementselector).addcontextmenu('selector',actions,options)
 
    jQuery(document).ready(function($){
        $('p').addcontextmenu('contextmenu1',{
            'item1':{//对应菜单的ID
                click:function(source,li){//需要进行单击菜单响应的
                    //alert(source);
                    alert(source.attr('id'));
                }
            },
            'item2':{
                click:function(source,li){
                    alert(source.attr('id')+":"+li.attr('id'));
                },
                disabled:function(source,li){//需要进行启用/禁用控制的
                    if(source.attr('id')=='dp'){
                        return true;//禁用
                    }
                    return false;//启用
                }
            },
            'item31':{
                click:function(source,li){
                    alert(li.attr('id'));
                }
            },
            'item521':{
                click:function(source,li){
                    alert(li.attr('id'));
                    //alert(li.attr('id'));
                }
            }
        },{highlight:'myhighlight',hover:'myjqhover'}); //apply context menu to links with class="mylinks"
    });
 
 
    </script>
    </head>
    <body>
        <p id="dp"><a class="mylinks" href="#1" id="dynamic">Dynamic Drive</a></p>
        <p id="dp2"><a class="mylinks" href="#2" id="dynamic2">Dynamic Drive2</a></p>
        <div id="div" style="float:right">dadfasd</div>
        <!--HTML for Context Menu 1-->
        <ul id="contextmenu1" class="jqcontextmenu">
        <li id="item1"><div>Item 1a</div></li>
        <li class="sep"></li>
        <li id="item2"><div>Item 2a</div></li>
        <li id="item3"><div>Item Folder 3a</div>
            <ul>
            <li id="item31"><div>Sub Item 3.1a</div></li>
            <li id="item3.2"><div>Sub Item 3.2a</div></li>
            <li id="item3.3"><div>Sub Item 3.3a</div></li>
            <li id="item3.4"><div>Sub Item 3.4a</div></li>
            </ul>
        </li>
        <li id="item4"><div>Item 4a</div></li>
        <li id="item5"><div>Item Folder 5a</div>
            <ul>
            <li id="item5.1"><div>Sub Item 5.1a</div></li>
            <li id="item5.2"><div>Item Folder 5.2a</div>
                <ul>
                <li id="item521"><div>Sub Item 5.2.1a</div></li>
                <li id="item5.2.2"><div>Sub Item 5.2.2a</div></li>
                <li id="item5.2.3"><div>Sub Item 5.2.3a</div></li>
                <li id="item5.2.4"><div>Sub Item 5.2.4a</div></li>
                </ul>
            </li>
            </ul>
        </li>
        <li id="item6"><div>Item 6a</div></li>
        </ul>
    </body>
</html>

这个插件是在jquery 1.7以上版本进行修改和测试，jqcontextmenu项目osc地址。

参考链接：
jQuery Context Menu script
Bunch Of Widely Used jQuery Context Menus
arnklint/jquery-contextMenu
medialize/jQuery-contextMenu
wdContextMenu Samples vs Code
jQuery右键菜单插件ContextMenu使用笔记
jQuery右键菜单插件ContextMenu

《Jquery ContextMenu插件改造》有1个想法

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。