制作的网站漳州市建设局网站

制作的网站,漳州市建设局网站,东莞软件开发培训,如何利用网站开发客户jQuery EasyUI 布局 - 动态添加标签页#xff08;Tabs#xff09; Tabs 组件最强大的特性之一就是支持动态添加、关闭、刷新、选中标签页。这在后台管理系统中非常常见#xff1a;用户点击左侧菜单时#xff0c;在右侧主内容区动态打开对应的标签页#xff1b;如果标签已…jQuery EasyUI 布局 - 动态添加标签页TabsTabs组件最强大的特性之一就是支持动态添加、关闭、刷新、选中标签页。这在后台管理系统中非常常见用户点击左侧菜单时在右侧主内容区动态打开对应的标签页如果标签已存在则选中而不重复打开。本教程将演示动态添加标签页支持判断是否已存在。关闭当前/所有/其他标签页。刷新当前标签页。结合左侧accordion tree菜单实现经典后台布局。官方参考动态 Tabs 教程https://www.jeasyui.com/tutorial/layout/tabs2.php在线 Demohttps://www.jeasyui.com/demo/main/index.php?pluginTabspitemDynamicTabs步骤 1: 引入 EasyUI 资源linkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/icon.cssscripttypetext/javascriptsrchttps://code.jquery.com/jquery-1.12.4.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script步骤 2: 创建整体布局 Tabsbodyclasseasyui-layout!-- 左侧菜单 --divdata-optionsregion:west,title:菜单,split:truestylewidth:200px;divclasseasyui-accordiondata-optionsfit:true,border:falsedivtitle系统管理iconClsicon-settingulidmenu-treeclasseasyui-treelidata-urlpage1.htmliconClsicon-user用户管理/lilidata-urlpage2.htmliconClsicon-group角色管理/lilidata-urlpage3.htmliconClsicon-lock权限设置/li/ul/divdivtitle内容管理iconClsicon-folderulclasseasyui-treelidata-urlarticle.html文章列表/lilidata-urlcategory.html分类管理/li/ul/div/div/div!-- 右侧主内容区 --divdata-optionsregion:centerdividmain-tabsclasseasyui-tabsdata-optionsfit:true,border:false,tools:#tab-toolsdivtitle首页iconClsicon-homestylepadding:20px;h2欢迎使用 jQuery EasyUI 管理系统/h2p点击左侧菜单可在右侧动态打开标签页。/p/div/div/div!-- Tabs 工具栏 --dividtab-toolsahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-reloadplaintrueonclickrefreshTab()刷新/aahrefjavascript:void(0)classeasyui-linkbuttoniconClsicon-removeplaintrueonclickcloseCurrentTab()关闭当前/a/div/body步骤 3: JavaScript 实现动态添加标签页scripttypetext/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){varurltab.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(index0){// 保留首页不关闭$(#main-tabs).tabs(close,index);}}}// 菜单点击事件$(function(){$(#menu-tree).tree({onClick:function(node){if(node.textnode.attributesnode.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 stylepadding: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(varitabs.length-1;i0;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);}});完整效果点击左侧菜单 → 在右侧动态打开对应标签页。重复点击同一菜单 → 直接切换到已打开的标签不重复创建。支持刷新、关闭当前标签。标签可关闭除首页外。更多示例官方动态 Tabshttps://www.jeasyui.com/tutorial/layout/tabs2.php右键菜单 Tabshttps://www.jeasyui.com/easyui/demo/tabs/contextmenu.html如果需要完整后台模板带登录、主题切换、iframe 加载、右键菜单、或支持 iframe 方式加载页面请继续提问