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