layui中tab的新增拒絕重複
阿新 • • 發佈:2018-11-17
layui中tab的新增:重複新增,沒有自動跳轉肯定讓你煩了很久吧,我也是花了很久才解決的
前提是這樣的:我點選不同按鈕生成對應tab,而且再點選前已經有一個tab了(比如說:‘首頁‘,個人需求而已)
我的思路是這樣的:每新增一個tab用連結串列儲存其id,通過id判斷是否存在,並確定是新增tab還是跳轉到指定tab。
刪除時,監聽tab的刪除,然後從連結串列裡刪除對應id。但是在element.on('tabDelete',function(data){});中得不到你刪除tab的id。有幸的是,能得到下標:data.index。我用其表示連結串列中的‘第幾個元素’,因為data.index的值是“流動”的,以這種方式表示(考慮到操作的方式)很適合用連結串列來形容(建議你自己console.log(data.index)來看看)。
好了,上程式碼
list.js:我把它寫在了公共類裡,你按照你自己的需求來
function Node(v){ this.value=v; this.next=null; } function ArrayList(){ this.head=new Node(null); this.tail = this.head; //在尾部新增節點 this.append=function(v){ node = new Node(v); this.tail.next=node; this.tail=node; } //在指定位置插入 this.insertAt=function(ii,v){ node = new Node(v); //找到位置的節點 tempNode=this.head; for(i=0;i<ii;i++){ if(tempNode.next!=null){ tempNode=tempNode.next; }else{ break; } } node.next=tempNode.next; tempNode.next = node; } //刪除指定節點 this.removeAt=function(ii){ node1=this.head; //要刪除節點的前一個節點 for(i=0;i<ii;i++){ if(node1.next!=null){ node1=node1.next; }else{ break; } } node2=node1.next; //要刪除的節點 if(node2!=null){ node1.next = node2.next; if(node2.next==null){ this.tail=node1; } } } //查詢值 this.find=function(v){ var nodefin=this.head; while(nodefin.value!=v){ if(nodefin.next!=null){ nodefin=nodefin.next; }else{break;} } return nodefin; } //查詢某個節點的值 this.findv=function(ii){ var nodefv = this.head; for(var i =0;i<ii;i++){ if(nodefv.next!=null){ nodefv=nodefv.next; } } return nodefv; } //顯示連表中的值 this.show=function() { var Node=this.head; while(Node!=null) { console.log(Node.value); Node=Node.next; } } }
js:
/** * 點選節點新增tab * title:選項卡標題,id:選項卡的id,url:選項卡所顯示的內容《用ifream》 */ var arry = new ArrayList(); arry.append("xtsy");//這就是我的首頁,你如果不需要的話,刪除即可 function tabAdd(title,id,url) { //判斷tab是否存在 if(arry.find(id).value!=id){ element.tabAdd('tab', { title: title //用於演示 ,content:"<iframe src='"+ url + "' frameborder='0' style='width:100%;height:470px;'></iframe>" ,id:id }); arry.append(id); } //切換tab element.tabChange('tab',id); } //監聽tab刪除 element.on('tabDelete', function(data){ arry.removeAt(data.index); });