jQuery EasyUI 布局 - 创建标签页（Tabs）
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 资源
<linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>步骤 2: 创建基本的标签页
在容器<div>上添加class="easyui-tabs"，子<div>为每个标签页面板。
<divclass="easyui-tabs"style="width:700px;height:400px;"><divtitle="首页"data-options="iconCls:'icon-home',closable:true"style="padding:20px;"><h2>欢迎使用 EasyUI Tabs</h2><p>这是一个基本的标签页示例，支持图标和关闭按钮。</p></div><divtitle="数据表格"data-options="iconCls:'icon-table'"style="padding:20px;"><tableclass="easyui-datagrid"style="width:100%;height:300px;"data-options="url:'datagrid_data.json',fitColumns:true"><thead><tr><thfield="name"width="50">名称</th><thfield="value"width="50">值</th></tr></thead></table></div><divtitle="表单"data-options="iconCls:'icon-form',closable:true"><formclass="easyui-form"style="padding:20px;"><divstyle="margin-bottom:10px;"><label>用户名:</label><inputclass="easyui-textbox"name="username"data-options="required:true"></div><divstyle="margin-bottom:10px;"><label>邮箱:</label><inputclass="easyui-textbox"name="email"data-options="validType:'email'"></div></form></div><divtitle="关于"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 |
tabWidth:100 | 固定标签宽度（像素） |
onSelect | 切换标签时事件 |
步骤 4: 完整示例（结合 layout + 动态添加/关闭 + 工具栏）
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>jQuery EasyUI 标签页（Tabs）</title><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="https://www.jeasyui.com/easyui/themes/icon.css"><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script><scripttype="text/javascript"src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script></head><bodyclass="easyui-layout"><divdata-options="region:'north',title:'顶部导航'"style="height:60px;padding:10px;background:#f0f0f0;"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-add"onclick="addTab()">新增标签</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-remove"onclick="closeAll()">关闭所有</a></div><divdata-options="region:'center'"><divid="tt"class="easyui-tabs"data-options="fit:true,border:false,tools:'#tab-tools'"><divtitle="首页"data-options="iconCls:'icon-home',closable:true"style="padding:20px;"><h2>首页内容</h2><p>这是一个动态标签页示例，支持添加、关闭和工具栏。</p></div><divtitle="设置"data-options="iconCls:'icon-setting'"style="padding:20px;">系统设置面板。</div></div><divid="tab-tools"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-reload"onclick="reloadTab()">刷新</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-remove"onclick="closeCurrent()">关闭当前</a></div></div><script>functionaddTab(){varindex=$('#tt').tabs('getTabIndex',$('#tt').tabs('getSelected'));vartitle='新标签'+(index+1);varcontent='<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'});}functioncloseAll(){$('.tabs-container .panel').children('.panel-header').find('a.tabs-close').click();}functioncloseCurrent(){vartab=$('#tt').tabs('getSelected');if(tab){varindex=$('#tt').tabs('getTabIndex',tab);$('#tt').tabs('close',index);}}functionreloadTab(){vartab=$('#tt').tabs('getSelected');if(tab){varindex=$('#tt').tabs('getTabIndex',tab);$('#tt').tabs('getTab',index).panel('refresh');}}functioncloseThis(){vartab=$('#tt').tabs('getSelected');if(tab){varindex=$('#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 示例，请提供更多细节！