Easyui之Tabs选项卡

前言

今天为大家分享的知识点是easyui中的tabs选项卡，想了解的小伙伴们可以看我下面的具体操作！

案例演示

没错，还是按照以往的套路来操作，和之前Tree简介中获取数据一样，基本上获取数据有以下这两种方式：

最终想要实现的效果：

1、当点击书籍管理下的新增时、右边的区域展示一个新增的选项卡，点击下面的未上架、已上架、已下架也是一样！
2、当再次点击书籍管理下的新增时，切换到新增页面的具体内容！
3、当点击书籍管理的时候，不展示书籍管理这个选项卡！
4、右击关闭三种不同类型选项卡的操作！

Tree（树）数据使用的表格：

1、在jsp页面静态获取

1、首先找到jquery.easyui-1.5.1的文件夹

2、再找到该文件夹中的demo夹

3、再找到demo文件夹中的tabs文件

4、然后打开basic.html文件，复制代码：

复制下的代码：

<div class="easyui-tabs" style="width:700px;height:250px">
		<div title="About" style="padding:10px">
			<p style="font-size:14px">jQuery EasyUI framework helps you build your web pages easily.</p>
			<ul>
				<li>easyui is a collection of user-interface plugin based on jQuery.</li>
				<li>easyui provides essential functionality for building modem, interactive, javascript applications.</li>
				<li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li>
				<li>complete framework for HTML5 web page.</li>
				<li>easyui save your time and scales while developing your products.</li>
				<li>easyui is very easy but powerful.</li>
			</ul>
		</div>
		<div title="My Documents" style="padding:10px">
			<ul class="easyui-tree" data-options="url:'tree_data1.json',method:'get',animate:true"></ul>
		</div>
		<div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
			This is the help content.
		</div>
	</div>

运行结果：

2、使用js动态地加载出数据

首先了解一下js学习文档的方法以及一些事件：

这个是新开一个New Tab的选项卡窗口：

$('#tt').tabs('add',{
       
    title:'New Tab',    
    content:'Tab Body',    
    closable:true,    
    tools:[{
       
        iconCls:'icon-mini-refresh',    
        handler:function(){
       
            alert('refresh');