easyui为tabs添加右键菜单

来源：互联网发布：html首页源码编辑：程序博客网时间：2024/06/05 14:08

在使用easyui-tabs时，当我们打开许多个tab后，我们希望也能像浏览器窗口一样有一个右键菜单，包含关闭全部、关闭当前、关闭右侧等操作，该文就讲述如何实现此功能。

挂上一图，看看效果，菜单就是easyui的menu组件，使用者可以为菜单选项添加图标，定义样式，甚至可以设置多级结构的菜单。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<divid="rcmenu"class="easyui-menu"style="">
    <divdata-options="iconCls:'icon-cancel'"id="closecur">
        关闭
    </div>
    <divid="closeall">
        关闭全部
    </div>
    <divid="closeother">
        关闭其他
    </div>
    <divclass="menu-sep"></div>
    <divid="closeright">
        关闭右侧标签页
    </div>
    <divid="closeleft">
        关闭左侧标签页
    </div>
</div>

easyui-menu的使用请参考官方文档：http://www.jeasyui.com/documentation/menu.php

?
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
$(function(){
             
    $(".tabs-header").bind('contextmenu',function(e){
        e.preventDefault();
        $('#rcmenu').menu('show', {
            left: e.pageX,
            top: e.pageY
        });
    });
    //关闭当前标签页
    $("#closecur").bind("click",function(){
        vartab = $('#tab').tabs('getSelected');
        varindex = $('#tab').tabs('getTabIndex',tab);
        $('#tab').tabs('close',index);
    });
    //关闭所有标签页
    $("#closeall").bind("click",function(){
        vartablist = $('#tab').tabs('tabs');
        for(vari=tablist.length-1;i>=0;i--){
            $('#tab').tabs('close',i);
        }
    });
    //关闭非当前标签页（先关闭右侧，再关闭左侧）
    $("#closeother").bind("click",function(){
        vartablist = $('#tab').tabs('tabs');
        vartab = $('#tab').tabs('getSelected');
        varindex = $('#tab').tabs('getTabIndex',tab);
        for(vari=tablist.length-1;i>index;i--){
            $('#tab').tabs('close',i);
        }
        varnum = index-1;
        for(vari=num;i>=0;i--){
            $('#tab').tabs('close',0);
        }
    });
    //关闭当前标签页右侧标签页
    $("#closeright").bind("click",function(){
        vartablist = $('#tab').tabs('tabs');
        vartab = $('#tab').tabs('getSelected');
        varindex = $('#tab').tabs('getTabIndex',tab);
        for(vari=tablist.length-1;i>index;i--){
            $('#tab').tabs('close',i);
        }
    });
    //关闭当前标签页左侧标签页
    $("#closeleft").bind("click",function(){
        vartab = $('#tab').tabs('getSelected');
        varindex = $('#tab').tabs('getTabIndex',tab);
        varnum = index-1;
        for(vari=0;i<=num;i++){
            $('#tab').tabs('close',0);
        }
    });
         
});

$('.tabs-header')为tabs的hearder对象，通过绑定contextmenu事件，并阻止默认的事件，来实现在header区域右键弹出菜单操作。最后运用官方提供的api，来实现tab标签页的关闭。

1 0