好久没有写博客了（主要是懒），工作中用到一个动态添加Tab的功能，众所周知，bootstrap没有动态添加Tab的功能，网上又没找到什么好用的，那咱就自己写呗？（因为懒，所以只写了添加的方法.(๑><๑)۶）
github地址：https://github.com/renruiquan/bootstrap-dynamic-tabs
不废话了，我就直接上代码了。
bootstrap-dynamic-tabs.js源码如下：
$.fn.addTabs = function (options) {
//判断是否已存在指定ID的tab
if ($("#" + options.id).length > 0) {
throw "当前ID的Tab已存在．";
}
//构建li元素
var li = $("<li />", {
"id": options.id + "-li",
});
//构建a元素
var a = $("<a />", {
"href": "#" + options.id,
"text": options.title,
"click": function () {
$(this).tab("show");
}
});
//合并li和a元素
li.append(a);
var ul = $(this);
//合并ul和li元素
ul.append(li);
//添加完成显示当前li
$(li).tab("show");
//构建div内容元素
var div = $("<div />", {
"id": options.id,
"class": "tab-pane fade in active",
});
//兼容纯文本和html片段
typeof options.content == "string" ? div.append(options.content) : div.html(options.content);
var container = $(".tab-content");
container.append(div);
//添加完成后显示div
$(div).siblings().removeClass("active");
}
调用的代码和html的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bootstrap-动态添加Tab</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="ace.min.css">
</head>
<body style="background-color:white;">
<div class="container">
<div class="row hr-16">
<div class="col-lg-12">
<button class="btn btn-success">添加Tab</button>
</div>
</div>
<div class="row hr-16">
<div class="col-sm-12">
<!-- #section:elements.tab -->
<div class="tabbable">
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<a data-toggle="tab" href="#home">
Home
</a>
</li>
<li>
<a data-toggle="tab" href="#messages">
Messages
</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
</div>
<div id="messages" class="tab-pane fade">
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
</div>
</div>
</div>
<!-- /section:elements.tab -->
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-dynamic-tabs.js"></script>
<script type="text/javascript">
$(function () {
var tabs = $("ul.nav-tabs");
$("button").on("click", function () {
var count = $(".nav-tabs li").length;
$.get("template.html", function (data) {
tabs.addTabs({
"id": "abc" + count,
"title": "新建工单-" + count,
"content": "<p><h1>新建工单-" + count + "的内容</h1></p>" + data
});
});
});
});
</script>
这里我用了ace-admin的样式，最后运行的截图如下：
那啥……忘了说了，要用IIS等Web容器跑，因为我这里用了ajax请求，动态加载远程的html文件了，如果你不想用的话，就把红色的代码删掉吧~
时间： 2024-10-11 11:53:16