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)组件提供了丰富的功能和自定义选项,适用于多种应用场景。