Layui-通过子页面给主页面（框架）添加Tab

Sham在做小程序后台管理的时候，涉及到文章发布、编辑，因为用的layui，就需要在子页面“文章列表页”，通过点击表格中编辑按钮，来新建一页编辑页面，查询网友分享代码后，自己稍微调整了下，初步实现了，代码如下：

 

首先是在父页面添加方法：

 

function addTabNew(mytitle, htmlurl) {
	var $ = layui.jquery
	,element = layui.element;
	//先判断是否已经有了tab
	var arrayObj = new Array();　//创建一个数组  
	$(".layui-tab-title").find('li').each(function() {
		var y = $(this).attr("lay-id"); 
		arrayObj.push(y);
	});
	//alert("遍历取到的数组："+arrayObj);
	var have=$.inArray(mytitle, arrayObj);  //返回 3,
	if (have>=0) {
		//tab已有标签
		//alert("遍历的已有标签："+mytitle);
		element.tabChange('demo', mytitle); //切换到当前点击的页面
	} else{
		//没有相同tab
		// alert("遍历的没有相同tab："+mytitle);
		var h = $(window).height()-150;
		element.tabAdd('demo', {
			title:mytitle //用于演
			,content: '<iframe style="width: 100%;height:'+h+'px;border:none;" scrolling="auto" src='+htmlurl+' ></iframe>'
			,id: mytitle //实际使用一般是规定好的id，这里以时间戳模拟下
		})
		element.tabChange('demo', mytitle); //切换到当前点击的页面
	}
}

 

然后是在子页面里执行（可以放在表格的edit事件里）

 

top.addTabNew(data['title']+'编辑',"notices/edit.php?id="+data['id']);

 

这样，当点击文章列表页的“编辑”按钮时，主页面（框架）就会新建并切换到以该篇文章命名的新的一页子页面了，同时还进行了传值。

 

我是一个想做码农的行政文员