easyUi学习之tabs的学习-优快云博客

本文链接：https://blog.youkuaiyun.com/lijie_insist/article/details/84687579

本文介绍如何使用EasyUI实现选项卡组件的动态加载功能。具体包括：1. 导入所需的CSS和JS文件；2. 页面布局设置，包含一个按钮和三个初始选项卡；3. 通过按钮触发事件，向选项卡中添加新内容，内容通过URL从另一个页面获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

easyui的选项卡使用:
1.导入需要的css和js

 <head>
	<link rel="stylesheet" type="text/css" href="css/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="js/jquery/jquery-easyui-1.2.1/themes/icon.css">
	<script type="text/javascript" src="js/jquery/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="js/jquery/jquery-easyui-1.2.1/jquery.easyui.min.js"></script>

  </head>

2.页面是有一个button按钮和三个选项卡,点击按钮然后添加一个选项卡,这个选项卡的内容是从另一个页面通过url获取到的,代码如下:

<body>
  <button id='addTabs' onclick='addTestTab1();'>add</button>
    <div id='tt1' class="easyui-tabs" style="height: 250px;width: 500px">
    	<div title='tab1' style="padding: 20px;display: none"  >
    		tab1
    	</div>
    	<div title='tab2' style="overflow: auto;display: none;padding: 20px" closable='true'>
    		tab2
    	</div>
    	<div title='tab3' icon="icon-reload" closable='true' style="padding: 20px;display: none">
    		tab3
    	</div>
    </div>
  </body>

button按钮时间代码如下:

 <script type="text/javascript">
  	function addTestTab(){
  		$("#tt").tabs('add',{
  			title:'保存',
  			content:'测试内容',
  			closable:true,
  			icon:'icon-save',
  			href:'http://localhost:8082/TestEasyUi/tab1.jsp'
  		});
  	}
  </script>
  </script>

ta1.jsp的代码和上面的代码一样,可以直接coppy过去

我用的是eclispe创建的web项目,所以启动服务器,输入路径,结果如下:

[img]http://dl2.iteye.com/upload/attachment/0103/5688/b9104f63-f8eb-3dbb-b0cb-60fc15fe8abc.jpg[/img]

[img]http://dl2.iteye.com/upload/attachment/0103/5690/07d0f5e2-eca4-3679-afb5-03c0e21d8f1d.jpg[/img]