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>