bootstrap動態添加Tab標籤頁

時間 2019-11-06

標籤 bootstrap 動態添加 tab 標籤欄目 Bootstarp 简体版

原文原文鏈接

很久沒有寫博客了（主要是懶），工做中用到一個動態添加Tab的功能，衆所周知，bootstrap沒有動態添加Tab的功能，網上又沒找到什麼好用的，那咱就本身寫唄？（由於懶，因此只寫了添加的方法.(๑>؂<๑)۶）javascript

github地址：https://github.com/renruiquan/bootstrap-dynamic-tabscss

不廢話了，我就直接上代碼了。html

bootstrap-dynamic-tabs.js源碼以下：java

$.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的代碼：jquery

<!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>