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;
}