jQuery EasyUI 布局 - 动态添加标签页（Tabs）
jQuery EasyUI 布局 - 动态添加标签页（Tabs）
jQuery EasyUI 是一个基于 jQuery 的 UI 库，提供了一套简单易用的 UI 组件和工具集，支持多种主流浏览器。其中，Tabs 是一种常用的组件，可用于管理多个标签页。
本文将介绍如何使用 jQuery EasyUI 实现动态添加标签页。具体包括以下几个方面：
1.引入 jQuery EasyUI 库
2.HTML 布局及初始化 Tabs
3.添加标签页功能实现
一、引入 jQuery EasyUI 库
要使用 jQuery EasyUI，我们需要将其引入到 HTML 中。可以通过下载的方式获取 jQuery EasyUI 库，或者通过引入 CDN（内容分发网络） 获得。
<!-- 引入 jQuery 库 -->
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<!-- 引入 easyUI 核心库 -->
<script src="//cdn.bootcss.com/jquery-easyui/1.8.0/jquery.easyui.min.js"></script>
<!-- 引入 easyUI 主题样式 -->
<link rel="stylesheet" href="//cdn.bootcss.com/jquery-easyui/1.8.0/themes/default/easyui.css" />
二、HTML 布局及初始化 Tabs
首先，我们需要在 HTML 中定义 Tabs 的容器，如下所示：
<div id="tt" class="easyui-tabs"></div>
紧接着，通过 JavaScript 初始化 Tabs 组件：
$('#tt').tabs();
三、添加标签页功能实现
接下来，我们需要实现动态添加标签页的功能。先来看一下最终实现效果：
通过点击添加按钮，可以动态地向 Tabs 中添加新的标签页。
下面是具体的代码实现过程。
1.定义添加按钮及事件
<a href="javascript:void(0)" class="easyui-linkbutton" plain="true" onclick="addTab()">添加标签页</a>
function addTab(){
// TODO: 添加标签页功能实现
}
2.创建新标签页
var title = 'New Tab'; // 标题
var url = 'http://example.com'; // 内容 URL
var content = '<iframe frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>'; // 内容
$('#tt').tabs('add',{
title: title,
content: content,
closable: true,
});
以上代码中，title 为新标签页的标题，url 为要加载的内容的 URL，content 为新标签页的内容（使用 iframe 标签），closable 表示该标签页是否可关闭。
3.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态添加标签页</title>
<link rel="stylesheet" href="//cdn.bootcss.com/jquery-easyui/1.8.0/themes/default/easyui.css" />
<link rel="stylesheet" href="//cdn.bootcss.com/jquery-easyui/1.8.0/themes/icon.css" />
<script src="//cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script src="//cdn.bootcss.com/jquery-easyui/1.8.0/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-layout" style="width:100%;height:100%;">
<div data-options="region:'center',border:false">
<div id="tt" class="easyui-tabs"></div>
</div>
<div data-options="region:'south',border:false" style="text-align:right;padding:5px">
<a href="javascript:void(0)" class="easyui-linkbutton" plain="true" onclick="addTab()">添加标签页</a>
</div>
</div>
<script>
// 初始化 Tabs
$('#tt').tabs();
// 添加标签页
function addTab(){
var title = 'New Tab'; // 标题
var url = 'http://example.com'; // 内容 URL
var content = '<iframe frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>'; // 内容
$('#tt').tabs('add',{
title: title,
content: content,
closable: true,
});
}
</script>
</body>
</html>
以上代码演示了如何使用 jQuery EasyUI 实现动态添加标签页的效果。相信通过本文的介绍，大家已经能够掌握相关的知识，快速实现自己的 Tabs 功能需求。