使用layui实现的左侧菜单栏以及动态操作tab项

基本界面如下：

首先引入layui.js和layui.css文件，这个不不再多叙述。

• 自定义CSS样式

<style type="text/css">
   .rightmenu{font-size:12px; padding:5px 10px; border-radius: 2px;}
   .rightmenu li{line-height:20px; cursor: pointer;}
   ul.layui-tab-title li:first-child i{display:none;}
</style>

• html代码

<ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="treenav">
    <li class="layui-nav-item"><a href="javascript:;" class="site-url" data-id="1" data-title="控制台" data-url="http://www.sohu.com">控制台</a></li>
    <li class="layui-nav-item"><a href="javascript:;" class="site-url" data-title="组件" data-id="2" data-url="http://www.baidu.com">组件</a></li>
    <li class="layui-nav-item"><a href="javascript:;" class="site-url" data-title="应用" data-id="3" data-url="http://news.qq.com">应用</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">设置</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;" class="site-url" data-title="系统设置" data-id="4" data-url="http://www.sina.com.cn">系统设置</a></dd>
            <dd><a href="javascript:;" class="site-url" data-title="网站设置" data-id="5" data-url="http://www.163.com">网站设置</a></dd>
            <dd><a href="javascript:;" class="site-url" data-title="修改密码" data-id="6" data-url="http://www.tmall.com">修改密码</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="javascript:;" class="site-url" data-title="社区" data-id="7" data-url="http://fly.layui.com/">社区</a></li>
</ul>
<div class="layui-tab layui-tab-brief" lay-filter="contentnav" lay-allowClose="true" style="margin-left:200px;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;">
        <div class="layui-tab-item layui-show">首页内容...</div>
    </div>
</div>

• js代码

<script type="text/javascript">
    layui.use('element', function(){
        var element = layui.element;
        var active={
            tabAdd:function(url,id,name){
                element.tabAdd('contentnav',{
                    title:name,
                    content:'<iframe data-frameid="'+id+'" scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;"></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();
        });
    }); 
</script>

---

知识点所涉及的主要是layui插件中的nav、tab元素以及所依赖element组件，element所提供的方法：element.tabAdd、element.tabChange和element.tabDelete，另外就是JS中自定义右键菜单contextmenu方法和each函数的应用。