当前位置：首页 > news >正文

jQuery EasyUI 布局 - 动态添加标签页（Tabs）

news 2026/3/26 22:07:33

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 资源

<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: 创建整体布局 + Tabs

<bodyclass="easyui-layout"><!-- 左侧菜单 --><divdata-options="region:'west',title:'菜单',split:true"style="width:200px;"><divclass="easyui-accordion"data-options="fit:true,border:false"><divtitle="系统管理"iconCls="icon-setting"><ulid="menu-tree"class="easyui-tree"><lidata-url="page1.html"iconCls="icon-user">用户管理</li><lidata-url="page2.html"iconCls="icon-group">角色管理</li><lidata-url="page3.html"iconCls="icon-lock">权限设置</li></ul></div><divtitle="内容管理"iconCls="icon-folder"><ulclass="easyui-tree"><lidata-url="article.html">文章列表</li><lidata-url="category.html">分类管理</li></ul></div></div></div><!-- 右侧主内容区 --><divdata-options="region:'center'"><divid="main-tabs"class="easyui-tabs"data-options="fit:true,border:false,tools:'#tab-tools'"><divtitle="首页"iconCls="icon-home"style="padding:20px;"><h2>欢迎使用 jQuery EasyUI 管理系统</h2><p>点击左侧菜单可在右侧动态打开标签页。</p></div></div></div><!-- Tabs 工具栏 --><divid="tab-tools"><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-reload"plain="true"onclick="refreshTab()">刷新</a><ahref="javascript:void(0)"class="easyui-linkbutton"iconCls="icon-remove"plain="true"onclick="closeCurrentTab()">关闭当前</a></div></body>

步骤 3: JavaScript 实现动态添加标签页

<scripttype="text/javascript">// 核心函数：添加标签页（如果已存在则选中）functionaddTab(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'});}}// 刷新当前标签页functionrefreshTab(){vartab=$('#main-tabs').tabs('getSelected');if(tab){varurl=tab.panel('options').href;if(url){tab.panel('refresh');}else{// 如果是内联内容，可重新加载tab.panel('refresh',tab.panel('options').content);}}}// 关闭当前标签页functioncloseCurrentTab(){vartab=$('#main-tabs').tabs('getSelected');if(tab){varindex=$('#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);}elseif(node.text){// 如果没有 url 属性，可用内联内容addTab(node.text,null,node.iconCls);// 在这里设置 contentvartab=$('#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存储页面地址。

扩展功能示例

// 关闭所有标签（保留首页）functioncloseAllTabs(){vartabs=$('#main-tabs').tabs('tabs');for(vari=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);}});