项目应用EasyUI_Tab控件全部关闭

Posted 2020-09-05

一、实际情景：

　　Tab控件在父页面中<div id="tt" class="easyui-tabs"></div>

　　多个tab页

　　　　<iframe src="index0.html">...</iframe>

　　　　<iframe src="index1.html">...</iframe>

　　　　<iframe src="index2.html">...</iframe>

　　　　<iframe src="index3.html">...</iframe>

　　　　<iframe src="index4.html">...</iframe>

二、要求实现：

　　在其中一个子页面中点击按钮“全部关闭”，关闭所有的tab页，只保留一个tab页

三、设计思路：

　　关键点：保证当前页面对应的tab页是最后一个被关闭的。

四、代码逻辑：

　　 

// 按钮“全部关闭”执行方法
function closeAllTab() {
    var len = parent.$(‘#tt‘).tabs(‘tabs‘).length;
    var currentIndex = parent.$(‘#tt‘).tabs(‘getTabIndex‘, parent.$(‘#tt‘).tabs(‘getSelected‘));
    if (len !== currentIndex) {
        for (var i = 0; i < len - currentIndex - 1; i++) {
            closeTab(currentIndex + 1, parent.$(‘#tt‘));
        }
    }
    
    for (var i = 0; i < len - 1; i++) {
        closeTab(1, parent.$(‘#tt‘));
    }
    parent.$("#tt").tabs(‘select‘, 0);
}
// 关闭tab
function closeTab(i, $tab) {
    var tab = $tab.tabs(‘getTab‘, i), title = tab.panel(‘options‘).title;
    $tab.tabs(‘close‘, title);
}

 

 

五、图示：