jQuery EasyUI 布局 – 创建标签页（Tabs）
jQuery EasyUI 的 tabs 组件是一个多标签页（tabbed panels）容器，用于在有限空间内显示多个内容面板。用户可以通过点击标题切换面板，常用于后台管理系统的页面切换、表单分组、内容组织等场景。支持关闭标签、嵌套布局、AJAX 加载、拖放排序等高级功能。
Tabs 基于 panel 组件构建，默认垂直标签（top），支持水平/底部/左侧/右侧放置。
官方参考：
- 教程：https://www.jeasyui.com/tutorial/layout/tabs.php
- 文档：https://www.jeasyui.com/documentation/tabs.php
- 在线 Demo：https://www.jeasyui.com/demo/main/index.php?plugin=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: 创建基本的标签页
在容器 <div> 上添加 class="easyui-tabs"，子 <div> 为每个标签页面板。
<div class="easyui-tabs" style="width:700px;height:400px;">
<div title="首页" data-options="iconCls:'icon-home',closable:true" style="padding:20px;">
<h2>欢迎使用 EasyUI Tabs</h2>
<p>这是一个基本的标签页示例，支持图标和关闭按钮。</p>
</div>
<div title="数据表格" data-options="iconCls:'icon-table'" style="padding:20px;">
<table class="easyui-datagrid" style="width:100%;height:300px;" data-options="url:'datagrid_data.json',fitColumns:true">
<thead>
<tr>
<th field="name" width="50">名称</th>
<th field="value" width="50">值</th>
</tr>
</thead>
</table>
</div>
<div title="表单" data-options="iconCls:'icon-form',closable:true">
<form class="easyui-form" style="padding:20px;">
<div style="margin-bottom:10px;">
<label>用户名:</label>
<input class="easyui-textbox" name="username" data-options="required:true">
</div>
<div style="margin-bottom:10px;">
<label>邮箱:</label>
<input class="easyui-textbox" name="email" data-options="validType:'email'">
</div>
</form>
</div>
<div title="关于" data-options="href:'about.html',iconCls:'icon-help'">
<!-- 内容通过 AJAX 从 about.html 加载 -->
</div>
</div>步骤 3: 常用属性说明
| 属性 | 说明 |
|---|---|
fit:true | 自动填充父容器（常用于 layout 的 center 区域） |
border:false | 去除边框，适合嵌入布局 |
closable:true | 标签页可关闭（显示 × 按钮） |
iconCls | 标签标题图标 |
selected:true | 初始选中该标签页（默认第一个） |
href:'url' | AJAX 加载标签内容（懒加载，提高性能） |
tools | 自定义工具栏（如刷新、关闭所有按钮） |
tabPosition:'bottom|left|right' | 标签位置（默认 top） |
tabWidth:100 | 固定标签宽度（像素） |
onSelect | 切换标签时事件 |
步骤 4: 完整示例（结合 layout + 动态添加/关闭 + 工具栏）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI 标签页（Tabs）</title>
<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>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'顶部导航'" style="height:60px;padding:10px;background:#f0f0f0;">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="addTab()">新增标签</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="closeAll()">关闭所有</a>
</div>
<div data-options="region:'center'">
<div id="tt" class="easyui-tabs" data-options="fit:true,border:false,tools:'#tab-tools'">
<div title="首页" data-options="iconCls:'icon-home',closable:true" style="padding:20px;">
<h2>首页内容</h2>
<p>这是一个动态标签页示例，支持添加、关闭和工具栏。</p>
</div>
<div title="设置" data-options="iconCls:'icon-setting'" style="padding:20px;">
系统设置面板。
</div>
</div>
<div id="tab-tools">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="reloadTab()">刷新</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="closeCurrent()">关闭当前</a>
</div>
</div>
<script>
function addTab(){
var index = $('#tt').tabs('getTabIndex', $('#tt').tabs('getSelected'));
var title = '新标签' + (index + 1);
var content = '<p>这是动态添加的标签内容。</p><a href="javascript:void(0)" class="easyui-linkbutton" onclick="closeThis()">关闭此标签</a>';
$('#tt').tabs('add',{
title: title,
content: content,
closable: true,
iconCls: 'icon-ok'
});
}
function closeAll(){
$('.tabs-container .panel').children('.panel-header').find('a.tabs-close').click();
}
function closeCurrent(){
var tab = $('#tt').tabs('getSelected');
if (tab){
var index = $('#tt').tabs('getTabIndex', tab);
$('#tt').tabs('close', index);
}
}
function reloadTab(){
var tab = $('#tt').tabs('getSelected');
if (tab){
var index = $('#tt').tabs('getTabIndex', tab);
$('#tt').tabs('getTab', index).panel('refresh');
}
}
function closeThis(){
var tab = $('#tt').tabs('getSelected');
if (tab){
var index = $('#tt').tabs('getTabIndex', tab);
$('#tt').tabs('close', index);
}
}
</script>
</body>
</html>关键说明
- 默认行为：标签标题在上方，点击切换面板。
- 动态操作：使用
tabs('add', {title, content/href, closable})添加；tabs('close', index)关闭。 - 嵌入布局：在 layout 的 center 区域使用
fit:true，常用于后台主内容区。 - AJAX 加载：使用
href属性延迟加载外部页面。 - 工具栏：
tools属性可自定义按钮，如刷新、关闭。 - 事件：
onSelect: function(title, index){ ... }监听切换。
扩展建议
- 拖放排序：添加
$('#tt').tabs({onDragEnd: ...})支持标签拖拽。 - 嵌套 tabs：在标签内容内再放一个 tabs，实现多级。
- 底部标签：
tabPosition:'bottom'。
更多示例：
- 基本 Tabs：https://www.jeasyui.com/demo/main/index.php?plugin=Tabs&theme=default&dir=ltr&pitem=
- 工具栏 Tabs：https://www.jeasyui.com/easyui/demo/tabs/tools.html
- 嵌套 Tabs：https://www.jeasyui.com/tutorial/layout/tabs2.php
如果需要动态加载数据、拖放标签、或结合 datagrid 的完整后台 tabs 示例，请提供更多细节！
