Layui tab添加删除

准备工作

1.添加导航栏

<ul class="layui-nav layui-nav-tree " lay-filter="menu" style="height: 634px;">
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;">消息管理</a>
            <dl class="layui-nav-child">
                <dd >
                    <a href="javascript:;" _href="tableMess.html" name="1">收件箱(js)</a>
                </dd>
                <dd>
                    <a href="javascript:;" _href="sendMess.html" name="3">发件箱</a>
                </dd>
                <dd>
                    <a href="javascript:;" _href="modifyMess.html" name="4">写信息</a>
                </dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;">账户管理</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="javascript:;" _href="seeMess.html" name="5">我的资料</a>
                    </dd>           
                </dl>
        </li>
</ul>

2.添加tab选项卡

<div class="layui-tab" lay-filter="main_content" lay-allowClose="true">
    <ul class="layui-tab-title" >
        <li class="layui-this first-tab" lay-id="111">首页</li>
        <li lay-id="222">发送信息</li>
        <li lay-id="333">权限分配</li>
        <li lay-id="444">审核</li>
        <li lay-id="555">订单管理</li>
    </ul>
    <div class="layui-tab-content">
         <div class="layui-tab-item layui-show">内容1</div>
        <div class="layui-tab-item">内容2</div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
        <div class="layui-tab-item">内容5</div>
     </div>
</div>

块加载js

layui.use('element', function(){
  var element = layui.element;
 //基本上使用layui的内置模块 都需要写这段代码 
 //对模块的事件操作都写在这方法块里
});

点击导航栏添加tab页面

官方提供tabAdd以及tabChange、tabDelete方法

element.tabAdd('demo', {
  title: '选项卡的标题'
  ,content: '选项卡的内容' //支持传入(html代码）不持支直接传入html页面
  ,id: '选项卡标题的lay-id属性值'
}); 
//参数filter：tab元素的 lay-filter="value" 过滤器的值（value） 
//参数layid：选项卡标题列表的 属性 lay-id 的值
element.tabChange('demo', 'layid'); //删除 lay-id="xxx" 的这一项 

element.on('tabDelete(filter)', function(data){
  console.log(this); //当前Tab标题所在的原始DOM元素
  console.log(data.index); //得到当前Tab的所在下标(此下标是标签页在的位置并不是固定的)
  console.log(data.elem); //得到当前的Tab大容器
});

因为官方提供的不支持直接传入html页面所以自己实现功能

在这里以为点击导航栏的一级标题也能触发点击事件，所以直接为数组添加一个undefined值，后面判断不触发增加tab页面事件

var items = new Array();
items[0]=undefined;
var index = 1;
//以上为全局变量   以下为模块加载里面的内容

//nav 导航栏专用  menu 为lay-filter="nenu"；
element.on("nav(menu)", function(elem) {
        //console.log(elem.attr("name")); //得到当前点击的DOM对象
        var name = elem.attr("name");
        var id = name;//因为加载外部页面name肯定不一样，所以在这id也唯一
        
        var href = elem.attr("_href");//传入要加载的页面名称
        var text = elem.text();//获取点击导航栏一列的内容
        //console.log(items);
        
        //indexOf()方法 如果存在目标返回下标 默认为0，不存在返回-1
        //因为要实现同一个页面不多次添加，而是如果存在直接切换tab
        if(items.indexOf(id) == -1) {
            items[index] = id;
            index++;//避免值被覆盖
            element.tabAdd("main_content", {
                title: text,
                id: id,
                content: '<span id="' + name + '_container"></span><script>loadTab("#' + name + '_container", "' + href + '");</script>' 
                //写入脚本通过下面方法 loadTab 加载页面代码块（不必要重复导入layui.js等文件）
                
            });
    
            element.tabChange("main_content", id);
        }else{
            element.tabChange("main_content", id);
        }

    });
//当然也要导入jquery的js文件
window.loadTab = function(selector, url) {
        //console.log("url: " + url);
        $(selector).load(url);
}

因为要实现以上功能所以在关闭标签的时候要在items容器里面删除相对应的name值

虽然删除时给的下表不固定，但是在我们存入数组的时候是有记录的，所以，对数组的对应索引删除即可，

起初调用delete 方法删除数组内容，确实能删除，但是位置是还在的 状态为 empty 下次添加的时候会覆盖，所以导致先关闭哪些标签，只能再以这个顺序打开QAQ, 所以我的实现是遍历数组， 覆盖items

//监听tab
element.on('tabDelete(main_content)', function(data){
        
//    console.log(this); //当前Tab标题所在的原始DOM元素
      console.log(data.index); //得到当前Tab的所在下标
      var ind = data.index;
      var newArray = new Array();
      for(var i = 0;i<items.length;i++){
        if(i<ind){
            newArray[i] = items[i];
        }else if(i>ind){
            newArray[i-1]=items[i];
        }
      }
//    delete items[ind];
//   console.log(items);
    items = newArray;
     index--;
      
//    console.log(data.elem); //得到当前的Tab大容器
    });

差点忘记

因为tab页面默认设置的是 可关闭的，所以在tab第一个标签上添加了一个class 名字为 first-tab

因为用layui的部件肯定是在该变结构的，所以可以打开浏览器开发工具，查看代码

.first-tab  i.layui-tab-close{
    display:none!important;
}