Django+Layui學習二：Tabs

前言

上一篇我們制作了簡單的后台布局，並且動態加載了側邊欄的節點以及子節點，本篇來做一下tabs。

首先我們來看下tab創建的簡單流程：

按照流程圖我們可以開始編寫html以及js代碼：

    <div class="layui-body">
        <!-- 內容主體區域 -->
        <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowclose="true">
            <ul class="layui-tab-title"></ul>
            <div class="layui-tab-content"></div>
        </div>
    </div>

<script>
    //JavaScript代碼區域
    layui.use('element', function () {
        var element = layui.element,
            $ = layui.jquery;

        var active = {
            tabAdd: function (url, id) {
                //新增一個Tab項
                element.tabAdd('demo', {
                    title: '新選項' + id//用於演示
                    ,
                    content: '<iframe data-frameid="' + id + '" frameborder="0" name="content" scrolling="no" width="100%" src="' + url + '"></iframe>'
                    ,
                    id: id //實際使用一般是規定好的id，這里以時間戳模擬下
                })
                {#CustomRightClick(id);//綁定右鍵菜單#}
                {#FrameWH();//計算框架高度#}
            }
            , tabChange: function (id) {
                //切換到指定Tab項
                element.tabChange('demo', id); //切換到：用戶管理
                $("iframe[data-frameid='" + id + "']").attr("src", $("iframe[data-frameid='" + id + "']").attr("src"))//切換后刷新框架
            }
            , tabDelete: function (id) {
                element.tabDelete("demo", id);//刪除
            }
            , tabDeleteAll: function (ids) {//刪除所有
                $.each(ids, function (i, item) {
                    element.tabDelete("demo", item);
                })
            }
        };

        //結合菜單展示內容
        $(".layui-side-scroll a").click(function () {
            var dataid = $(this);
            if(dataid.attr('data-id')){
                if ($(".layui-tab-title li[lay-id]").length <= 0) {
                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"));
            } else {
                var isData = false;
                $.each($(".layui-tab-title li[lay-id]"), function () {
                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {
                        isData = true;
                    }
                })
                if (isData == false) {
                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"));
                }
            }
            active.tabChange(dataid.attr("data-id"));
            }

        });
</script>