01.关于easyui实现右键关闭tabs选项卡功能

时间 2020-03-12

标签关于 easyui 实现右键关闭 tabs 选项功能繁體版

原文原文链接

js部分javascript

/*
       　　   *   添加右击table菜单栏事件
       　　   */
    $("#tabs").tabs({
        //为其附加鼠标右键事件
        onContextMenu: function(e, title, index){
            //该方法通知浏览器不要执行与此事件关联的默认动做
            //即屏蔽了浏览器在tab页上的鼠标右键事件
            e.preventDefault();
            var mm = $("#tabsmenu");
            //显示右键菜单
            mm.menu("show",{
                top: e.pageY,
                left: e.pageX
            }).data("tabTitle",title);
            //为右键菜单选项绑定事件
            mm.menu({
                onClick: function(item){
                    closeTab(this, item.name);
                }
            });
        }
    });

    /*
     * 关闭tabs方法的具体实现
     */
    function closeTab(menu, type){
        //返回全部的选项卡
        var allTabs = $("#tabs").tabs("tabs");
        var allTabTitle = [];
        // console.log(allTabs);这里是dom节点
        $.each(allTabs, function(i, n){
            // console.log(n);这里是当前打开的每个tabs的jQuery对象
            //这里是返回的options对象
            var opt = $(n).panel("options");
            if(opt.closable){//若是显示关闭按钮
                //就把当前选中的选项卡的标题放入空数组中
                allTabTitle.push(opt.title);
            }
        });
        //这里是将获取当前选项卡的标题
        var curTabTitle = $(menu).data("tabTitle");
        switch(type){
            case 1:
                //关闭当前 -- 这里是根据选项卡的标题来关闭选项卡
                $("#tabs").tabs("close", curTabTitle);
                return false;
                break;
            case 2:
                //关闭其余
                for(var i = 0; i < allTabTitle.length; i++){
                    if(curTabTitle != allTabTitle[i]){
                        $("#tabs").tabs("close",allTabTitle[i]);
                    }
                }
                //这里是关闭完了其余选项卡以后，就选中当前选项卡
                $("#tabs").tabs("select",curTabTitle);
                break;


            case 3:
                //关闭右侧
                for(var i = 0; i < allTabTitle.length; i++){
                    //先经过循环遍历，获取出当前选项卡所对应的下标
                    if(curTabTitle == allTabTitle[i]){//相等的时候表示为当前，若是大于表示右侧，若是小于，表示左侧
                        //关闭右侧，其实就是关闭下标比当前下标大一些的选项卡
                        for (var j = i + 1; j < allTabTitle.length; j++) {
                            //而后这里的循环就从i+1开始，只要小于全部选项卡数组的长度，就直接删除
                            $("#tabs").tabs("close",allTabTitle[j]);//关闭右侧就关闭i+1
                        }
                    }
                }
                break;

            case 4:
                //关闭左侧
                for(var i = 0; i < allTabTitle.length; i++){
                    //先经过循环遍历，获取出当前选项卡所对应的下标
                    if(curTabTitle == allTabTitle[i]){//相等的时候表示为当前，若是大于表示右侧，若是小于，表示左侧
                        //这里关闭左侧的原理，就是关闭比当前选中选项卡的下标要小的选项卡
                        for (var j = 0; j < i; j++) {//这里就从0开始删，到i-1结束
                            //这里就是开始循环删除，只要j是小于i的就直接删除
                            $("#tabs").tabs("close",allTabTitle[j]);//关闭右侧就关闭i+1
                        }
                    }
                }
                break;

            case 5:
                //关闭全部
                for(var i = 0; i < allTabTitle.length; i++){
                    $("#tabs").tabs("close",allTabTitle[i]);
                }
                break;
        }
    }
});

htmlcss

<head>
    <%@include file="common/header.jsp"%>
<%--    <link rel="stylesheet" href="/static/css/main.css">--%>
    <title>Title</title>
    <script type="text/javascript" src="/static/js/module/main.js"></script>
</head>
<body class="easyui-layout">
<%--右键关闭选项卡--%>
<div id="tabsmenu" class="easyui-menu" style="width:100px;display: none">
    <div data-options="name:1" id="now" iconcls="icon-shield">关闭当前</div>
    <div data-options="name:2" id="other" iconcls="icon-shield">关闭非当前</div>
    <div data-options="name:3" id="right" iconcls="icon-shield">关闭右侧全部</div>
    <div data-options="name:4" id="left" iconcls="icon-shield">关闭左侧全部</div>
    <div data-options="name:5" id="all" iconcls="icon-shield">关闭全部</div>
</div>