jQuery EasyUI 布局 - 创建标签页（Tabs）
jQuery EasyUI 布局 - 创建标签页（Tabs）
简介
标签页（Tabs）是一种常用的页面布局方式，适合在有限的空间内展示多个相关而不同的内容。jQuery EasyUI提供了创建标签页的组件，具有良好的可扩展性和易用性。
使用方法
引入依赖文件
在使用标签页组件之前，需要先在页面中引入必要的jQuery和EasyUI文件。
<head>
<script src="jQuery.js"></script>
<script src="jquery.easyui.js"></script>
<link rel="stylesheet" href="themes/bootstrap/easyui.css">
</head>
创建基本结构
标签页（Tabs）组件基于HTML结构进行开发，因此在开始使用之前，需要先在页面中创建必要的HTML结构。
<div id="tabs">
<div title="Tab 1" data-options="iconCls:'icon-save'">
Content of Tab 1.
</div>
<div title="Tab 2" data-options="iconCls:'icon-help'">
Content of Tab 2.
</div>
<div title="Tab 3" data-options="iconCls:'icon-help'">
Content of Tab 3.
</div>
</div>
在上面的结构中，首先创建了一个<div>元素，设置了id="tabs"。它将作为标签页（Tabs）组件的容器。
接下来创建了三个<div>元素，分别设置了title和data-options属性。其中title属性设置了标签页的名称，data-options属性设置了标签页的图标。
初始化标签页
在完成基本结构的创建之后，可以在JavaScript中通过调用tabs()方法来初始化标签页。
$("#tabs").tabs();
以上代码会将id="tabs"的<div>元素转换为一个标签页（Tabs）组件。
添加标签页
使用add方法来添加新的标签页。
$("#tabs").tabs("add", {
title: "New Tab",
content: "Content of New Tab."
});
以上代码将会在标签页（Tabs）组件中添加一个名为“New Tab”的新标签页，并设置它的内容为：“Content of New Tab。”
关闭标签页
使用close方法来关闭标签页。
$("#tabs").tabs("close", 1);
以上代码将会关闭标签页（Tabs）组件中第2个标签页（从0开始计数）。
配置选项
标签页（Tabs）组件支持多种可配置选项。以下是一些常用的选项：
width：设置组件的宽度。height：设置组件的高度。fit：将组件自适应父容器大小。border：设置组件是否显示边框。tools：自定义标签页的操作按钮。
$("#tabs").tabs({
width: 600,
height: 400,
fit: true,
border: true,
tools: [
{
iconCls: "icon-reload",
handler: function() {
// Do something.
}
},
{
iconCls: "icon-close",
handler: function() {
// Do something.
}
}
]
});
以上代码设置了标签页（Tabs）组件的一些常见选项，其中tools选项自定义了组件的操作按钮，包括了重新加载和关闭按钮。
总结
标签页（Tabs）组件是一种简单实用的页面布局方式，可以展示多个相关而又不同的内容。在jQuery EasyUI中，标签页（Tabs）组件提供了丰富的功能和自定义选项，适用于多种应用场景。