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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。