二级菜单 ajax调取 + tab 页签

 <div class="center_right">

                         <div id="navBarId1" class="layui_col-xs5">
                                        
                         </div>


                         <div class="right_wrap">
                                   <div class="layui-tab layui-tab-brief" lay-filter="contentnav" lay-allowClose="true" style="margin-top:0;">
                                   <ul class="layui-tab-title">
                                        <li class="layui-this">首页</li>
                                   </ul>
                                        <ul class="layui-bg-green rightmenu" style="display: none;position: absolute;">
                                             <li data-type="closethis">关闭当前</li>
                                             <li data-type="closeall">关闭所有</li>
                                        </ul> 
          
                                        <div class="layui-tab-content" style="padding:0;position: absolute;height: 100%;width: 100%">
                                             <div class="layui-tab-item layui-show" style="position:absolute;height:100%;width: 100%">
                                                       <div class="right_wrap">
                                                                 
                                                       </div>
                                             </div>
                                        </div>          
                                   </div>    
                         </div>
</div>

 

layui.use('element', function(){
            var element = layui.element;
            var $ = layui.jquery;
            $.ajax({
                url:url,
                type:"post",
                dataType:"jsonp",
                jsonp:'callback',
                data:{},
                success:function(data){
                    var liStr= "";
                    // 遍历生成主菜单
                    for( var i = 0; i <data.length; i++){
                          liStr+="<li class=\"layui-nav-item\" style=\"line-height:48px\"><a style=\"color:#000;text-decoration:none\"   data-id=\""+ data[i].menuId +"\" href=\"javascript:;\">"+data[i].menuName+"</a>\n"+
                                "<dl class=\"layui-nav-child\" style= \"line-height:48px ;top:48px;; height:48px\"><dd style=\"background:white\">\n";
                                // 判断是否存在子菜单
                                if(data[i].children!=null&&data[i].children.length>0){
                                        liStr+= "<span>";
                                                    //  遍历获取子菜单
                                                    for( var k = 0; k <data[i].children.length; k++){
                                                        var subMenu = data[i].children[k];
                                                            liStr +="<a  style=\"text-decoration:none\" href:\"javascript:;\" class=\"site-url\"  data-id=\""+ subMenu.menuId +"\" data-title=\""+ subMenu.menuName  +"\"   data-url=\""+subMenu.url+"\">"+subMenu.menuName+"</a>";
                                                    }
                                        liStr+="</span>";
                                }
                           liStr+='</dd></dl></li>';      
                    }
                        $("#navBarId1").html("<ul class=\"layui-nav\"  style=\"height:48px;background:#f2f2f2\" lay-filter=\"test\">\n" +liStr+"</ul>");
                        element.init();



        var active={
                tabAdd:function(url,id,name){
                    element.tabAdd('contentnav',{
                        title:name,
                        content:' <iframe style=\"background:#f2f2f2;width:100%;height:100%;position:relative;top:22px;\"  data-frameid="'+id+'" scrolling="auto" frameborder="0" src="'+url+'"  src=""  class="layui_col-xs12"></iframe>',
                        id:id
                    });
                    rightMenu();
                    iframeWH();
                },
                tabChange:function(id){
                    element.tabChange('contentnav',id);
                },
                tabDelete:function(id){
                    element.tabDelete('contentnav',id);
                },
                tabDeleteAll:function(ids){
                    $.each(ids,function(index,item){
                        element.tabDelete('contentnav',item);
                    });
                }
            };
            
            $(".site-url").on('click',function(){
                var nav=$(this);
                var length = $("ul.layui-tab-title li").length;
                if(length<=0){
                    active.tabAdd(nav.attr("data-url"),nav.attr("data-id"),nav.attr("data-title"));
                }else{
                    var isData=false;
                    $.each($("ul.layui-tab-title li"),function(){
                        if($(this).attr("lay-id")==nav.attr("data-id")){
                            isData=true;
                        }
                    });
                    if(isData==false){
                        active.tabAdd(nav.attr("data-url"),nav.attr("data-id"),nav.attr("data-title"));
                    }
                    active.tabChange(nav.attr("data-id"));
                }
            });
            function rightMenu(){
                //右击弹出
                $(".layui-tab-title li").on('contextmenu',function(e){
                    var menu=$(".rightmenu");
                    menu.find("li").attr('data-id',$(this).attr("lay-id"));
                    l = e.clientX;
                    t = e.clientY;
                    menu.css({ left:l, top:t}).show();
                    return false;
                });
                //左键点击隐藏
                $("body,.layui-tab-title li").click(function(){
                    $(".rightmenu").hide();
                });
            }
            $(".rightmenu li").click(function(){
                if($(this).attr("data-type")=="closethis"){
                    active.tabDelete($(this).attr("data-id"));
                }else if($(this).attr("data-type")=="closeall"){
                    var tabtitle = $(".layui-tab-title li");
                    var ids = new Array();
                    tabtitle.each(function(i){
                        ids.push($(this).attr("lay-id"));
                    });
                    //如果关闭所有 ，即将所有的lay-id放进数组，执行tabDeleteAll
                    active.tabDeleteAll(ids);
                }
                $('.rightmenu').hide(); //最后再隐藏右键菜单
            });
            function iframeWH(){
                var H = $(window).height()-80;
                $("iframe").css("height",H+"px");
            }
            $(window).resize(function(){
                iframeWH();
            });

          }
        });
    }); 

 

转载于:https://my.oschina.net/u/4005929/blog/2878519