[Laui]通过子页面给主页面(框架)添加Tab

本文介绍了如何在基于Layui的后台管理系统中,通过子页面的操作,动态地在主页面(框架)上添加新的Tab页。主要分为两个步骤:一是在父页面定义添加Tab的方法,二是在子页面如表格的编辑事件中调用这个方法,实现内容较多时以新Tab页展示,提高用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


前言

最近在做一个基于LAYUI的后台管理系统,通常在树状菜单动态加载tabpage到iframe中,另外一种场景表格或者子页面打开新页面时如果内容较多弹出窗体体验不够友好,希望动态添加到iframe中。


一、首先是在父页面添加方法

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

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


效果预览

在这里插入图片描述

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值