bootstrap动态添加Tab标签页-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

bootstrap动态添加Tab标签页

简介: 好久没有写博客了(主要是懒),工作中用到一个动态添加Tab的功能,众所周知,bootstrap没有动态添加Tab的功能,网上又没找到什么好用的,那咱就自己写呗?(因为懒,所以只写了添加的方法.(๑>؂ 0) { throw "当前ID的Tab已存在."; } ...

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

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: