layui实现tab的添加拒绝重复的方法


Posted in Javascript onSeptember 04, 2019

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

以上这篇layui实现tab的添加拒绝重复的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
jQuery语法总结和注意事项小结
Nov 11 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
jquery实现两边飘浮可关闭的对联广告
Nov 27 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 #Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 #Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 #Javascript
layui 表单标签的校验方法
Sep 04 #Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 #Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 #Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 #Javascript
You might like
更改localhost为其他名字的方法
2014/02/10 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP生成压缩文件实例
2015/02/07 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
javascript下过滤数组重复值的代码
2007/09/10 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
AngularJs实现分页功能不带省略号的代码
2016/05/30 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
react-router中的属性详解
2017/06/01 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
2017/07/31 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
python文件拆分与重组实例
2018/12/10 Python
Python实现元素等待代码实例
2019/11/11 Python
Python如何实现邮件功能
2020/05/27 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
毕业生求职自荐信怎么写
2014/01/08 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
大学生求职信
2014/06/17 职场文书
体育教师求职信
2014/06/30 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
社区活动总结
2015/02/04 职场文书
银行求职信怎么写
2019/06/20 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python