好久没有写博客了(主要是懒),工作中用到一个动态添加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文件了,如果你不想用的话,就把红色的代码删掉吧~

bootstrap动态添加Tab标签页的更多相关文章

  1. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  2. Bootstrap插件——(Tab)标签页

    项目中用到了Bootstrap的(Tab)标签页插件,记录如下: 代码如下: <div class="tabbable"> <ul class="nav ...

  3. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  4. 如何一行jquery代码写出tab标签页(链式操作)

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

  5. Bootstrap V3使用Tab标签

    Bootstrap V3使用Tab标签 >>>>>>>>>>>>>>>>>>>> ...

  6. jQuery动态添加li标签并添加属性和绑定事件

    代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" c ...

  7. Bootstrap历练实例:标签页内的下拉菜单

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. ThinkPHP框架下,给jq动态添加的标签添加点击事件移除标签

    jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...

  9. Easyui 关闭jquery-easui tab标签页前触发事件

    关闭jquery-easui tab标签页前触发事件 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判 ...

随机推荐

  1. 英语口语练习系列-C30-生日-年历的周日和月份-如果白昼落进

    词汇-生日-birthday 生日庆祝 birthday celebration birth noun UK /bɜːθ/ US /bɝːθ/ the time when a baby or youn ...

  2. 2189 ACM 母函数 素数

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=2189 思路:先找出150以内的 素数,然后再用母函数或01背包计算 复习母函数的代码:https://ww ...

  3. yii2 创建模块modules

    方案一:如果模块儿较少,不用专门给模块儿目录定义别名,酱紫做就ok啦. 1.在项目根目录下面创建一个 modules 目录. 2.进入 gii : http://localhost/basic/web ...

  4. eclipse 安装合适的pydev插件

    http://www.cnblogs.com/yanduanduan/p/7261500.html

  5. Mybatis批量插入返回自增主键(转)

    我们都知道Mybatis在插入单条数据的时候有两种方式返回自增主键: 1.对于支持生成自增主键的数据库:useGenerateKeys和keyProperty. 2.不支持生成自增主键的数据库:< ...

  6. angular清除select空格

    <select   class="form-control"   id="policy_set_id"   ng-model="add.poli ...

  7. 深度残差网络(DRN)ResNet网络原理

    一说起“深度学习”,自然就联想到它非常显著的特点“深.深.深”(重要的事说三遍),通过很深层次的网络实现准确率非常高的图像识别.语音识别等能力.因此,我们自然很容易就想到:深的网络一般会比浅的网络效果 ...

  8. 使用CGlib实现Bean拷贝(BeanCopier)

    在做业务的时候,我们有时为了隔离变化,会将DAO查询出来的Entity,和对外提供的DTO隔离开来.大概90%的时候,它们的结构都是类似的,但是我们很不喜欢写很多冗长的b.setF1(a.getF1( ...

  9. 20、MySQLdb

    MySQLdb win64位安装python-mysqldb1.2.5 ubuntu下安装MySQLdb sudo apt-get install python-MySQLdb 导入MySQLdb库 ...

  10. 【PMP】易混淆知识点

    一.混淆概念 德尔菲技术 德尔菲技术是组织专家达成一致意见的一种方法.项目专家匿名参与其中.组织者使用调查问卷就重要的项目议题征询意见,然后对专家的答卷进行归纳,并把结果反馈给专家做进一步评论.这个过 ...