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

最新推荐文章于 2020-08-27 20:39:01 发布

Arvin0o

最新推荐文章于 2020-08-27 20:39:01 发布

阅读量434

点赞数

本文链接：https://blog.csdn.net/Arvin0o/article/details/104630287

版权

js部分

            /*
       　　   *   添加右击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;
        }
    }
});

html

<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>

Arvin0o

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
01.关于easyui实现右键关闭tabs选项卡功能

js部分 /* 　　 * 添加右击table菜单栏事件　　 */ $("#tabs").tabs({ //为其附加鼠标右键事件 onContextMenu: function(e, title, index){ //该方法通知浏览器不要执行与此事件关联的默认动作 ...
复制链接

扫一扫