本文详细介绍EasyUI框架中Tabs组件的使用方法，包括选项卡的切换与多种关闭操作（如关闭全部、关闭其他等）。通过实例代码展示了如何在主界面中集成Tabs组件，并结合树形菜单实现动态加载页面内容。
转载请标明出处：https://blog.youkuaiyun.com/men_ma/article/details/106847165.
本文出自 不怕报错 就怕不报错的小猿猿 的博客
easyUI中的tabs组件及关闭选项卡操作
前言
本篇博客的tabs组件离不开前面的树形菜单tree知识点，博主提供tree控件的资源，要完成今天需要实现的目标，必然离不开tree控件和tabs组件（按照先后顺序学习）：
链接: easyUI前端框架tree（树）后台实现（树形菜单一）——java.
easyUI前端框架的tree（树）前台展示（树形菜单二）——java.
如何自学easyUI中的控件？
需要实现的目标
tabs选项卡的切换：
关闭选项卡的操作（关闭全部、关闭其他选项卡、关闭右侧选项卡、关闭左侧选项卡）：、
实现tabs组件的思路步骤
代码实现最终效果
index.jsp:主界面的展示
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录后的主界面</title>
<!--导入css -->
<!--全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<!--定义图标 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">
<!--导入js -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<!--组件库源码的js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index1.js"></script>
</head>
<!--隐藏域：项目名 -->
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">美食网站管理系统</div>
<div data-options="region:'west',split:true,title:'West'" style="width:150px;padding:10px;">
<ul id="tt"></ul>
</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
<div data-options="region:'south',border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
<div data-options="region:'center',title:'Center'">
<div id="bookTabs" class="easyui-tabs" style="width:100%;height:100%">
<div title="首页" style="padding:20px;display:none;"> 本站各种数据指标（各个模块的使用情况，数据量、报表）</div>
<a href="javascript:void(0)" id="mb" class="easyui-menubutton"
data-options="menu:'#mm',iconCls:'icon-edit'">关闭选项卡操作</a>
</div>
<div id="mm" class="easyui-menu" style="width:150px;align:right">
<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>
</div>
</div>
</body>
</html>
index.js：使用JavaScript加载数据
$(function() {
var ctx=$("#ctx").val();
$('#tt').tree({
url:ctx+'/menu.action?methodName=menuTree' ,
onClick: function(node){//node指的是json对象
// alert(node.text); // 在用户点击的时候提示
// 如何调试（debug）js代码
// debugger;
// 目前存在的问题，重复的tab页反复打开
// 针对于上面存在的问题进行分析，判断当前是否存在对应的title的选项卡
// 如果存在，就切换到对应的选项卡，如果不存在，那么重新打开一个选项卡
// <iframe scrolling="no" frameborder="0" src="" width="99%" height="99%"></iframe>
// console.log($('#bookTabs').tabs('exists',node.text));
if($('#bookTabs').tabs('exists',node.text)){
// 切换选项卡
$('#bookTabs').tabs('select',node.text);
}else{
// 新增选项卡
// 存在问题，非叶子节点（例如树叶子来理解）按照开发角度来说是不能够打开页面的
// 分析：非叶子节点都没有跳转页面的
var src=node.attributes.self.menuURL;
// alert(ctx+src);
if(src){
var content=' <iframe scrolling="no" frameborder="0" src="'+ctx+src+'" width="99%" height="99%"></iframe>';
$('#bookTabs').tabs('add',{
title:node.text,
content:content,
closable:true,
tools:[{
iconCls:'icon-mini-refresh',
handler:function(){
alert('refresh');
}
}]
});
}
}
}
});
$('#mm').menu({
"onClick":function(item) {
closeTab(item.id,item.text);
}
});
//=======================================================
//关闭选项卡功能 注意：还需要上面的 .tabs和.menu右击触发事件显示菜单功能哦
function closeTab(title, text) {
if(text == '关闭全部选项卡') {
// alert(text);
$(".tabs li").each(function(index, obj) {
//获取所有可关闭的选项卡
var tabTitle = $(".tabs-closable", this).text();
$("#bookTabs").tabs("close", tabTitle);
});
}
if(text == '关闭其他选项卡') {
/* alert(text);
$(".tabs li").each(function(index, obj) {
//获取所有可关闭的选项卡
var tabTitle = $(".tabs-closable", this).text();
if(tabTitle != title) {
$("#bookTabs").tabs("close", tabTitle);
}
});*/
var tablist = $('#bookTabs').tabs('tabs');
var tab = $('#bookTabs').tabs('getSelected');
var index = $('#bookTabs').tabs('getTabIndex',tab);
for(var i=tablist.length-1;i>index;i--){
$('#bookTabs').tabs('close',i);
}
var num = index-1;
if(num < 1){
return;
}else{
for(var i=num;i>=1;i--){
$('#bookTabs').tabs('close',i);
}
$("#bookTabs").tabs("select", 1);
}
}
if(text == '关闭右侧选项卡') {
// alert(11);
var tablist = $('#bookTabs').tabs('tabs');
var tab = $('#bookTabs').tabs('getSelected');
var index = $('#bookTabs').tabs('getTabIndex',tab);
for(var i=tablist.length-1;i>index;i--){
$('#bookTabs').tabs('close',i);
}
}
if(text == '关闭左侧选项卡') {
var tablist = $('#bookTabs').tabs('tabs');
var tab = $('#bookTabs').tabs('getSelected');
var index = $('#bookTabs').tabs('getTabIndex',tab);
var num = index-1;
if(num < 1){
return;
}else{
for(var i=num;i>=1;i--){
$('#bookTabs').tabs('close',i);
}
$("#bookTabs").tabs("select", 1);
}
}
}
})
easyUI中tabs组件的其他属性及事件和方法
属性：
事件：
方法：
选项卡面板
尾言
今天的tabs组件的知识就分享到这里啦！！ 有问题或不懂的朋友们，欢迎大家在下评论！！谢谢！！
扫一扫
2276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
