jQuery EasyUI 布局 – 动态添加标签页（Tabs）
Tabs 组件最强大的特性之一就是支持动态添加、关闭、刷新、选中标签页。这在后台管理系统中非常常见：用户点击左侧菜单时，在右侧主内容区动态打开对应的标签页；如果标签已存在，则选中而不重复打开。
本教程将演示：
- 动态添加标签页（支持判断是否已存在）。
- 关闭当前/所有/其他标签页。
- 刷新当前标签页。
- 结合左侧 accordion + tree 菜单实现经典后台布局。
官方参考：
- 动态 Tabs 教程：https://www.jeasyui.com/tutorial/layout/tabs2.php
- 在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=Tabs&pitem=Dynamic+Tabs
步骤 1: 引入 EasyUI 资源
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>步骤 2: 创建整体布局 + Tabs
<body class="easyui-layout">
<!-- 左侧菜单 -->
<div data-options="region:'west',title:'菜单',split:true" style="width:200px;">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="系统管理" iconCls="icon-setting">
<ul id="menu-tree" class="easyui-tree">
<li data-url="page1.html" iconCls="icon-user">用户管理</li>
<li data-url="page2.html" iconCls="icon-group">角色管理</li>
<li data-url="page3.html" iconCls="icon-lock">权限设置</li>
</ul>
</div>
<div title="内容管理" iconCls="icon-folder">
<ul class="easyui-tree">
<li data-url="article.html">文章列表</li>
<li data-url="category.html">分类管理</li>
</ul>
</div>
</div>
</div>
<!-- 右侧主内容区 -->
<div data-options="region:'center'">
<div id="main-tabs" class="easyui-tabs" data-options="fit:true,border:false,tools:'#tab-tools'">
<div title="首页" iconCls="icon-home" style="padding:20px;">
<h2>欢迎使用 jQuery EasyUI 管理系统</h2>
<p>点击左侧菜单可在右侧动态打开标签页。</p>
</div>
</div>
</div>
<!-- Tabs 工具栏 -->
<div id="tab-tools">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="refreshTab()">刷新</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="closeCurrentTab()">关闭当前</a>
</div>
</body>步骤 3: JavaScript 实现动态添加标签页
<script type="text/javascript">
// 核心函数：添加标签页（如果已存在则选中）
function addTab(title, url, icon) {
if ($('#main-tabs').tabs('exists', title)) {
$('#main-tabs').tabs('select', title);
// 可选：刷新已存在标签页
// var tab = $('#main-tabs').tabs('getTab', title);
// $('#main-tabs').tabs('update', {tab: tab, options: {href: url}});
} else {
$('#main-tabs').tabs('add', {
title: title,
href: url, // AJAX 加载内容
closable: true,
iconCls: icon || 'icon-blank'
});
}
}
// 刷新当前标签页
function refreshTab() {
var tab = $('#main-tabs').tabs('getSelected');
if (tab) {
var url = tab.panel('options').href;
if (url) {
tab.panel('refresh');
} else {
// 如果是内联内容，可重新加载
tab.panel('refresh', tab.panel('options').content);
}
}
}
// 关闭当前标签页
function closeCurrentTab() {
var tab = $('#main-tabs').tabs('getSelected');
if (tab) {
var index = $('#main-tabs').tabs('getTabIndex', tab);
if (index > 0) { // 保留首页不关闭
$('#main-tabs').tabs('close', index);
}
}
}
// 菜单点击事件
$(function() {
$('#menu-tree').tree({
onClick: function(node) {
if (node.text && node.attributes && node.attributes.url) {
addTab(node.text, node.attributes.url, node.iconCls);
} else if (node.text) {
// 如果没有 url 属性，可用内联内容
addTab(node.text, null, node.iconCls);
// 在这里设置 content
var tab = $('#main-tabs').tabs('getTab', node.text);
if (tab) {
tab.panel('body').html('<p style="padding:20px;">' + node.text + ' 的内容区域</p>');
}
}
}
});
});
</script>关键说明
tabs('exists', title)：判断标签是否已存在，避免重复打开。tabs('select', title)：选中已有标签。tabs('add', {...})：动态添加，支持hrefAJAX 加载（推荐，性能好）。tab.panel('refresh')：刷新标签内容。- 保留首页：通常首页不可关闭（index == 0 时不关闭）。
- 菜单数据：使用
data-url或attributes.url存储页面地址。
扩展功能示例
// 关闭所有标签（保留首页）
function closeAllTabs() {
var tabs = $('#main-tabs').tabs('tabs');
for (var i = tabs.length - 1; i > 0; i--) {
$('#main-tabs').tabs('close', i);
}
}
// 右键菜单（可选）
$('#main-tabs').tabs({
onContextMenu: function(e, title, index) {
e.preventDefault();
$('#tab-menu').menu('show', {
left: e.pageX,
top: e.pageY
}).data('tabIndex', index);
}
});完整效果
- 点击左侧菜单 → 在右侧动态打开对应标签页。
- 重复点击同一菜单 → 直接切换到已打开的标签（不重复创建）。
- 支持刷新、关闭当前标签。
- 标签可关闭（除首页外）。
更多示例：
- 官方动态 Tabs：https://www.jeasyui.com/tutorial/layout/tabs2.php
- 右键菜单 Tabs：https://www.jeasyui.com/easyui/demo/tabs/contextmenu.html
如果需要完整后台模板（带登录、主题切换、iframe 加载）、右键菜单、或支持 iframe 方式加载页面，请继续提问！
