layui选项卡不重复增加删除避免冲突的简单方法,超实用-----网上的那些都是些啥,一个比一个复杂,啥也不是!

本来想偷个懒,网上搜搜吧,然而,都是复制粘贴的内容,根本没有考虑实际场景和性能问题,冗长的代码、负责的逻辑,别说人了,就是机器都要费时间参与计算,最后导致卡卡卡。。。。

哎,不说了,网上那些都啥也不是……

开始上代码了:

一、思路就是:将第一个固定,不参与选项卡计算,之后就好说了

 

二、简洁明了,写代码思路很重要。

var $ = layui.jquery,element = layui.element; //Tab的切换功能,切换事件监听等,需要依赖element模块

 var array = new Array();//选项卡数组
  function openadmin(content,id,title){      
      var ins = array.indexOf(id);     // 0
      if(ins!='-1'){
        //   element.tabChange('demo', id);//不推荐在if里面进行跳转选项卡
          
      } else{
           //新增一个Tab项
      element.tabAdd('demo', {
        title: title
        ,content: ''
        ,id: id
      })
    uparr(id,1,0);
          
      }
      element.tabChange('demo', id);       
  }

  //选项卡新建
  element.on('tab(demo)', function(data){
      console.log($(this).attr('lay-id'))
  });
    
    //选项卡删除
    element.on('tabDelete(demo)', function(data){
      uparr(this.getAttribute("lay-id"),2,data.index);
      console.log(data.elem); //得到当前的Tab大容器
    });

 function uparr(data,is,index){
        //2=删除
        if(is==2){
            array.splice(index-1,1)
        }else if(is==1){
            //1=增加
            var ins = array.indexOf(data);     // 0
            if(ins=='-1'){
                 array.push(data)
            }           
            
        }
        
    }

三、由于删除回调只会传下表,并不会传id,所以还是要根据下标来判断,幸亏下标是动态的。

四、对了补充下,js中如果你是用的模块单独加载的,就用单独加载的方法引入element,如果是全局的就用全局的方法引入,文中的是全局方法,生产环境推荐全局加载方式,如果是调试环境推荐单独加载方式(可以定位具体的错误内容和信息)。

五、本来想设置付费的,毕竟全网独此一份,高效、快捷,很有实战性,不过考虑到网上都是一些水文,还是公开吧,我为人人,人人为我的精神还是要发扬的!

注:看了记得点个赞

你可能感兴趣的:(thinkphp,前端,layui,layui,javascript,html,html5,前端)