Layui通过左侧导航菜单动态生成Tab

Layui通过左侧导航菜单动态生成Tab

HTML 页面

<div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <li class="layui-nav-item">
                <a  id="nav1" class="single" href="javascript:;"><i class="layui-icon layui-icon-engine">&nbsp;&nbsp;</i><cite>菜单一</cite></a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;"><i class="layui-icon layui-icon-form">&nbsp;&nbsp;</i><cite>菜单二</cite></a>
                <dl class="layui-nav-child">
                    <dd ><a id="nav11" class="single" data-src="http://localhost:5000/toUm">菜单2.1</a></dd>
                    <dd ><a id="nav12" class="single" data-src="http://localhost:5000/cm">菜单2.2</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;"><i class="layui-icon layui-icon-release">&nbsp;&nbsp;</i><cite>菜单三</cite></a>
                <dl class="layui-nav-child">
                    <dd><a id="nav21" class="single" data-src="/BankManager/findallcard">菜单3.1</a></dd>
                    <dd><a id="nav22" class="single" data-src="/BankManager/toaddcard">菜单3.2</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a class="single" id="nav3" data-src="/BankManager/toabout"><i class="layui-icon layui-icon-about">&nbsp;&nbsp;</i><cite>菜单4</cite></a></li>
        </ul>
        </div>
    </div>

<div class="layui-body">
        <div class="layui-tab" lay-filter="navMenu" lay-allowClose="true">
            <ul class="layui-tab-title">		
            </ul>
            <div class="layui-tab-content">
                
            </div>
        </div>
    </div>

JS 部分

 function FrameWH(){
        var frameheight = $(window).height();
        console.log(frameheight);
        $(".layui-tab-content iframe").css("height",frameheight);
    }
    layui.use('element', function(){
        var $ = layui.jquery
        ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        //定义事件并为active绑定
        var active={
            //添加tab项
            tabAdd:function(name,url,tid){
                element.tabAdd('navMenu',{
                    title:name,
                    content: '<iframe frameborder="0" scrolling="yes" style="width:100%;height:800px;" src="'+url+'"></iframe>',
                    id:tid
                })
                //$(".layui-tab-title li[lay-id]").attr("class",layui-this)
                FrameWH()
            },
            //切换到指定的Tab项
            tabChange:function(id){
                element.tabChange('navMenu',id);
            }
        };
        
        
        //Tab触发事件
        $(".single").on("click",function(){
            var tabid=$(this).attr("id")
            var url =$(this).attr("data-src");
            var name=$(this).text()
            
            if($(".layui-tab-title li[lay-id]").length<=0){//没有tab，则立即新建一个tab
                active.tabAdd(name,url,tabid);
            }
            else{
                //如果有tab，则要判断是否已经创建了该tab
                var flag=false;//设置一个标志记录tab是否打开
                $.each($(".layui-tab-title li[lay-id]"),function(){
                    if($(this).attr("lay-id")==tabid){
                        flag=true;//如果点击新建的菜单项id在右侧存在，则说明tab存在且已打开
                    }
                })
                if(flag==false){
                    active.tabAdd(name,url,tabid);
                }
            }
            active.tabChange(tabid);//最后执行跳转到指定的tab
        });
    });