I'm Sham
一个在通往码农道路上走走停停的行政文员

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']);

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

赞(1) 赏杯咖啡!
未经允许不得转载:Sham@双目瞿 » Layui-通过子页面给主页面添加Tab

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

如果你觉得文章好,请赏1杯速溶咖啡给Sham吧!

微信扫一扫打赏