1.tabs（选项卡）组件的概述
选项卡会显示一批面板，但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。
2.tabs（选项卡）组件的使用
在项目新建一个04-tabs目录，并在该目录下新建一个04-tabs.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<!-- 引入easyUI的css文件和js库 -->
<link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
</head>
<body>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="数据区域" data-options="closable:true" style="padding:20px;display:none;">
数据区域
</div>
</div>
</body>
</html>
从以上HTML页面中，可以发现使用到了一个选项卡面板属性，即closable属性。选项卡面板除了有下表列出的一些公共属性之外
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| id | string | 选项卡面板的ID属性 | null |
| title | string | 选项卡面板的标题文本 | |
| content | string | 选项卡面板的内容 | |
| href | string | 从URL加载远程数据内容填充到选项卡面板 | null |
| cache | boolean | 如果为true，在href属性设置了有效值的时候缓存选项卡面板 | true |
| iconCls | string | 定义了一个图标的CSS类ID显示到选项卡面板标题。 | nul |
| width | number | 选项卡面板宽度 | auto |
| height | number | 选项卡面板高度 | auto |
| collapsible | boolean | 如果为true，则允许选项卡摺叠 | false |
还有它独有的属性，如下表所示
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| closable | boolean | 在设置为true的时候，选项卡面板将显示一个关闭按钮，在点击的时候会关闭选项卡面板 | false |
| selected | boolean | 在设置为true的时候，选项卡面板会被选中 | false |
如下图所示的效果:
有这样一个需求，点击一个按钮就要能创建一个选项卡面板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<!-- 引入easyUI的css文件和js库 -->
<link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
</head>
<body>
<a href="#" id="btn" class="easyui-linkbutton">按钮</a>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="数据区域" data-options="closable:true" style="padding:20px;display:none;">
数据区域
</div>
</div>
<script type="text/javascript">
//点击按钮创建一个选项卡面板
$(function () {
$("#btn").click(function() {
//添加一个新的选项卡面板
$('#tt').tabs('add',{
title:'客户管理',
content:'客户管理的数据',
closable:true
});
});
});
</script>
</body>
</html>
在编写以上js代码时，用到了选项卡组件的一个方法，即add方法
在Google Chrome浏览器中访问该页面
发现每点击此按钮，就新创建一个选项卡面板，这显然是不合逻辑的，合逻辑的应该是要先判断选项卡面板是否存在，如果已经存在了，那么就让其被选中，如果没有存在，那么就新创建一个选项卡面板。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<!-- 引入easyUI的css文件和js库 -->
<link rel="stylesheet" type="text/css" href="./js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./js/themes/icon.css">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.easyui.min.js"></script>
</head>
<body>
<a href="#" id="btn" class="easyui-linkbutton">按钮</a>
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="数据区域" data-options="closable:true" style="padding:20px;display:none;">
数据区域
</div>
</div>
<script type="text/javascript">
//点击按钮创建一个选项卡
$(function() {
$("#btn").click(function() {
//判断标题为客户管理的选项卡是否存在？
var flag = $("#tt").tabs("exists", "客户管理");
if (flag) {
//已经存在该选项卡了
//那么选择一个标题为客户管理的选项卡面板（让其被选中）
$('#tt').tabs("select", "客户管理");
} else {
//不存在该选项卡
//添加一个新的选项卡
$('#tt').tabs('add',{
title:'客户管理',
content:'客户管理的数据',
closable:true
});
}
});
});
</script>
</body>
</html>
在编写以上js代码时，又用到了选项卡组件的两个方法，即exists方法和select方法
| 方法名 | 方法参数 | 描述 |
|---|---|---|
| select | which | 选择一个选项卡面板，'which’参数可以是选项卡面板的标题或者索引 |
| exists | which | 表明指定的面板是否存在，'which’参数可以是选项卡面板的标题或索引 |
在Google Chrome浏览器中访问该页面
此刻，要做的事情就是点击各分类面板里面的超链接，然后在中间区域面板中新建一个选项卡面板，并在该选项卡面板中加载相应的数据，正如下图所示的这样
在HTML页面上简单使用下<iframe>标签，在所在项目的目录下新建一个test.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<!-- 这里发起的就是一次新的请求 -->
<iframe src=""></iframe>
</body>
</html>
如下图所示:
如果想要将该块区域隐藏掉，那么test.html页面的内容就应该改成下面这样
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<!-- 这里发起的就是一次新的请求 -->
<iframe src="" style="border: 0px"></iframe>
</body>
</html>
3.重构首页
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
<!-- 引入easyUI的css文件和js库 -->
<link rel="stylesheet" type="text/css" href="../js/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/themes/icon.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
<style type="text/css">
/* 自己定义的样式，去掉超链接的下划线 */
.menuA {
text-decoration:none;
}
</style>
</head>
<body>
<!-- 布局 -->
<div id="cc" class="easyui-layout" data-options="fit:true">
<!-- 面板 -->
<div data-options="region:'north',title:'CRM管理系统',split:true" style="height:100px;"></div>
<div data-options="region:'west',title:'系统菜单',split:true" style="width:200px;">
<!-- 分类容器 -->
<div id="aa" class="easyui-accordion" data-options="fit:true">
<div title="客户管理" data-options="iconCls:'icon-save',selected:true" style="overflow:auto;padding:10px;">
<a href="tabs/customer.html" class="menuA">客户管理</a>
</div>
<div title="联系人管理" data-options="iconCls:'icon-reload'" style="padding:10px;">
<a href="tabs/linkman.html" class="menuA">联系人管理</a>
</div>
<div title="拜访记录管理" data-options="iconCls:'icon-reload'" style="padding:10px;">
<a href="#" class="menuA">拜访记录管理</a>
</div>
<div title="统计分析" data-options="iconCls:'icon-reload'" style="padding:10px;">
<a href="#" class="menuA">统计分析</a>
</div>
<div title="系统管理" data-options="iconCls:'icon-reload'" style="padding:10px;">
<a href="#" class="menuA">系统管理</a>
</div>
</div>
</div>
<div id="tt" data-options="region:'center'" class="easyui-tabs" style="padding:5px;background:#eee;">
<div title="数据区域" data-options="closable:true" style="padding:20px;display:none;">
数据区域
</div>
</div>
</div>
<script type="text/javascript">
$(".menuA").click(function () {
// 1.在点击各分类面板里面的超链接时，要得到超链接里面的文本内容，例如客户管理、联系人管理等
let testContext = this.innerHTML;
// 2.获得到超链接请求的ur1路径，这个ur1路径很重要，因为待会要从这个url路径处获取响应数据
let ur = this.href;
// 3.创一个选项卡。由于创建一个选项的代码比较多，所要这里可以抽取成一个函数，并将超链接里面的文本内容与ur1路径传递到该函数中
createTabs(testContext, ur);
// 4.点击超链接时，由于它总会跳转，但在这里我们要让其不能跳转
return false;
});
// 创建选项卡面板的函数
function createTabs(textContent, url) {
// 判断选项卡面板是否存在
var flag = $("#tt").tabs("exists", textContent);
if (flag) {
// 如果已经存在该选项卡面板了，那么就让其被选中
$('#tt').tabs("select", textContent);
} else {
// 如果不存在该选项卡面板，那么创建一个新的选项卡面板
$('#tt').tabs('add',{
title: textContent,
content: createUrl(url),
closable: true
});
}
}
function createUrl(url) {
/**
* <iframe>标签的应用，可以在任何的一个地方都能用，它就是页面里面的一块区域。
* 经常有人用<iframe>标签隐式提交一些东西，他往<iframe>标签里面放个表单啥的,然后把<iframe>标签隐藏掉，你在页面上看不着
* 然后它也向后台提交数据了!
*/
return "<iframe src='" + url + "' style='border:0px; width:100%; height:95%'></iframe>";
}
</script>
</body>
</html>
customer.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客户管理</title>
</head>
<body>
客户管理的数据。。。。。。。
</body>
</html>
linkman.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 联系人管理</title>
</head>
<body>
联系人管理的数据。。。。。。。
</body>
</html>
如图所示效果：
![[CTF/网络安全] 攻防世界 ics-06 解题详析](https://img-blog.csdnimg.cn/997f986390514d219ef2b058037947b0.png#pic_center)
