easyui頁面中tabs選項卡右擊實現選擇關閉全部，其他，左側，右側標籤功能
阿新 • • 發佈：2019-02-04
效果圖：
程式碼：
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>智銷系統</title> <%@ include file="/WEB-INF/views/head.jsp"%> <%-- 這個是我抽取到外面的公共css，js外掛 --%> <script> $(function(){ //顯示選項卡 $("#menuTree").tree({ url:"/json/menu.json", onClick: function(node){ if(node.url){ var nodeName = node.text; //判斷這個選項卡是否已經存在，存在就選中，不存在重新開啟 var tab = $("#mainTabs").tabs("getTab",nodeName); if(tab){ $("#mainTabs").tabs("select",nodeName); }else{ //iframe:在一個頁面中嵌入另一個頁面(單獨的) var content = '<iframe scrolling="auto" frameborder="0" src="'+node.url+'" style="width:100%;height:100%;"></iframe>'; $("#mainTabs").tabs('add',{ title:nodeName, content:content, closable:true }); } } } }); //==================================================================================== //tab右鍵觸發時候所觸發的函式 $("#mainTabs").tabs({ onContextMenu:function(e, title) { //在每個選單選項中新增title值 var $divMenu = $("#tab_rightmenu div[id]"); $divMenu.each(function() { $(this).attr("id", title); }); //顯示menu選單 $('#tab_rightmenu').menu('show', { left: e.pageX, top: e.pageY }); e.preventDefault(); } }); //例項化menu點選觸發事件 $('#tab_rightmenu').menu({ "onClick":function(item) { closeTab(item.id,item.text); } }); }) //關閉選項卡功能 注意：還需要上面的 .tabs和.menu右擊觸發事件顯示選單功能哦 function closeTab(title, text) { if(text == '關閉全部標籤') { $(".tabs li").each(function(index, obj) { //獲取所有可關閉的選項卡 var tabTitle = $(".tabs-closable", this).text(); $("#mainTabs").tabs("close", tabTitle); }); } if(text == '關閉其他標籤') { $(".tabs li").each(function(index, obj) { //獲取所有可關閉的選項卡 var tabTitle = $(".tabs-closable", this).text(); if(tabTitle != title) { $("#mainTabs").tabs("close", tabTitle); } }); } if(text == '關閉右側標籤') { var $tabs = $(".tabs li"); for(var i = $tabs.length - 1; i >= 0; i--) { //獲取所有可關閉的選項卡 var tabTitle = $(".tabs-closable", $tabs[i]).text(); if(tabTitle != title) { $("#mainTabs").tabs("close", tabTitle); } else { break; } } } if(text == '關閉左側標籤') { var $tabs = $(".tabs li"); for(var i = 0; i < $tabs.length; i++) { //獲取所有可關閉的選項卡 var tabTitle = $(".tabs-closable", $tabs[i]).text(); if(tabTitle != title) { $("#mainTabs").tabs("close", tabTitle); } else { break; } } } } </script> </head> <body class="easyui-layout"> <div data-options="region:'north'" style="height:60px;"> <h3>xx智銷系統</h3> </div> <div data-options="region:'west',title:'選單',split:true" style="width:200px;"> <ul id="menuTree"></ul> </div> <div id="mainTabs" class="easyui-tabs" data-options="region:'center'<%--,onContextMenu:showTabMenu--%>"> <div title="主頁面"> xxx </div> </div> <%--===========================================================================--%> <!--關閉tab選項的隱藏div選單--> <div id="tab_rightmenu" class="easyui-menu" style="width:135px; display:none"> <div name="tab_menu-tabcloseall" id="closeAll" data-options="iconCls:'icon-cancel'">關閉全部標籤</div> <div name="tab_menu-tabcloseother" id="closeOthor" data-options="iconCls:'icon-clear'">關閉其他標籤</div> <div class="menu-sep"></div> <div name="tab_menu-tabcloseright" id="closeRight" data-options="iconCls:'icon-redo'">關閉右側標籤</div> <div name="tab_menu-tabcloseleft" id="closeLeft" data-options="iconCls:'icon-undo'">關閉左側標籤</div> </div> </body> </html>