好久没有写博客了（主要是懒），工作中用到一个动态添加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. （数据存储）Android系统存储数据

    移动设备需要存储数据,处理数据并输出处理后的信息. 主题一:存储键值对 If you have a relatively small collection of key-values that you ...

  2. [JOISC2014]バス通学

    [JOISC2014]バス通学 题目大意: 有\(n(n\le10^5)\)个点和\(m(m\le3\times10^5)\)条交通线路.第\(i\)条交通线路可以让你在时间\(x_i\)从\(a_i ...

  3. VS Code编写Python3 insert 数据库插入无效也不报错的坑~.~

    标题最近在开发中需要用到web端开发工具.需要用python工具.偶然发现微软的良心之作:Visual Studio Code,这个大小才几十兆的轻量级代码编辑器,功能却是重量级的,通过插件的方法,, ...

  4. 网络测试工具 - QCheck

    本片博客内容借鉴51CTO中joyssue博主文章. 网络性能不仅与交换和路由设备的性能相关,而且与线路质量也有很大关系.使用Qcheck可以测试网络性能.这是NetIQ公司开发的一款免费网络测试软件 ...

  5. yii2 basic版 MVC 部分

    一.model 1.什么是模型 模型是 MVC 模式中的一部分,是表现业务数据.规则和逻辑的对象 可通过继承 yii\base\Model 或它的子类(activeRecord)来定义模型类,基类 y ...

  6. Windows下NetBeans中文乱码解决办法

    找到你的Netbeans安装目录下的etc文件夹,用记事本打开netbeans.conf,找到netbeans_default_options(不是最后那个带句号的…), 在其属性的最后(冒号以内)加 ...

  7. [MySQL]查看用户权限与GRANT用法

    摘自:http://apps.hi.baidu.com/share/detail/15071849 查看用户权限 show grants for 你的用户 比如:show grants for roo ...

  8. nginx配置http访问自动跳转到https

    1.按照如下格式修改nginx.conf 配置文件,80端口会自动转给443端口,这样就强制使用SSL证书加密了.访问http的时候会自动跳转到https上面 server { listen ; se ...

  9. MYSQL的联合查询最好是少用,效能差异巨大

    同样的功能,不同的写法,时间和内存占用差了几千倍,不废话,直接上代码 第一种写法: 代码如下: $Rs=DB::get($_ENV['DB'],3,"SELECT * FROM _xiazh ...

  10. FakeUserAgentError('Maximum amount of retries reached') 彻底解决办法

    报错: FakeUserAgentError('Maximum amount of retries reached') 禁用服务器缓存: ua = UserAgent(use_cache_server ...