1. 引入必要的文件: 在 HTML 页面中引入 jQuery、EasyUI 的 CSS 和 JavaScript 文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui/themes/icon.css">
<script type="text/javascript" src="jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
</body>
</html>
2. 创建初始标签页: 使用 tabs 函数创建初始的标签页。
<div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
<div title="Tab 1" style="padding:10px;">
Content of Tab 1
</div>
<div title="Tab 2" style="padding:10px;">
Content of Tab 2
</div>
</div>
3. 动态添加标签页: 使用 tabs 的 add 方法在运行时动态添加标签页。
<script>
$(function(){
// 初始化标签页
$('#tt').tabs();
// 动态添加标签页
$('#tt').tabs('add', {
title: 'Dynamic Tab',
content: 'Content of Dynamic Tab',
closable: true
});
});
</script>
在上述代码中,使用 tabs('add', options) 方法动态添加标签页。options 对象包含新标签页的配置信息,其中 title 表示标签页的标题,content 表示标签页的内容,closable 表示标签页是否可关闭。
这只是一个简单的例子,你可以根据实际需求和业务逻辑进行更复杂的定制。例如,你可以在动态添加的标签页中放置不同的内容,如表格、表单、图表等,以满足具体的页面布局需求。
转载请注明出处:http://www.zyzy.cn/article/detail/13100/jQuery EasyUI