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方法javascript

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頁面因此本身實現功能html

在這裏覺得點擊導航欄的一級標題也能觸發點擊事件，因此直接爲數組添加一個undefined值，後面判斷不觸發增長tab頁面事件java

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值jquery

雖然刪除時給的下表不固定，可是在咱們存入數組的時候是有記錄的，因此，對數組的對應索引刪除便可，數組

起初調用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;
}