layui之动态选项卡Tap&iframe使用

最新推荐文章于 2024-04-08 09:19:20 发布

糖心何包蛋·

最新推荐文章于 2024-04-08 09:19:20 发布

阅读量956

点赞数

分类专栏：前端前端框架文章标签： layui 前端

本文链接：https://blog.csdn.net/hmjcxy/article/details/125868891

版权

该博客详细介绍了如何在layui框架中实现动态选项卡功能，包括静态布局代码、动态添加选项卡、防止重复添加及选中处理，以及页面跳转的实现。通过示例代码展示了点击事件的添加和后台交互过程，最终实现页面的正常跳转。

摘要由CSDN通过智能技术生成

一，选项卡 1，查找layui的选项卡页面布局代码---静态

一，选项卡
1，查找layui的选项卡页面布局代码---静态

在管网上选择选项卡：

复制代码：

 element.tabAdd('demo', {
		title:'新选项'+(Math.random()*1000|0),//用于演示
		content:'内容'+(Math.random()*1000|0),
 		id:new Date().getTime()//实际使用一般是规定好的id，这里以时间戳模拟下
 	})

2，动态的添加选项卡

添加一个点击事件：

代码

let $,element;
layui.use(['jquery','element'],function(){
	 $ = layui.jquery,element = layui.element;
	$.ajax({
		url:'Permission.action?methodName=menus'
		,dataType:'json'
		,success:function(data){
			console.log(data);
			let htmlstr = '';
			$.each(data,function(i,n){
				htmlstr += '  <li class="layui-nav-item layui-nav-itemed">';
				htmlstr += '  <a class="" href="javascript:;">'+data[i].text+'</a>';
				//判断当前一级节点是否存在子节点
				if(data[i].hasChildren){
					htmlstr += '<dl class="layui-nav-child">';
					let children = data[i].children;
					$.each(data,function(index,node){
						htmlstr += '<dd><a href="javascript:;" onclick="openTab(\''+children[index].text+'\',\''+children[index].attributes.self.url+'\',\''+children[index].id+'\');" >'+children[index].text+'</a></dd>';					});
					htmlstr += '</dl>';
				}
				htmlstr += '  <li>';
			});
			$("#menu").html(htmlstr);
		}
	});
});

点击方法

function openTab(title,url,id){
	//alert(1)
 	let $node = $("li[lay-id='"+id+"']");
	
	if($node.length == 0){
		element.tabAdd('openTab', {
	      title: title
	      ,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
	      ,id: id
	    })
	}
	element.tabChange('openTab', id); //切换到：用户管理 
}

效果（这张图是我敲完代码最后的完整图片，按道理现在的选项卡应该是一个随机数）：

3，重复的选项卡不重复添加，改为选中

 function openTab(title,url,id){
	let $node = $("li[lay-id='"+id+"']");
	 //新增一个Tab项
	 if($node.length==0){
		 element.tabAdd('demo', {
		        title: title //用于演示
		        ,content:  "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
		        ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
		 })
	 }
	element.tabChange('demo',id);
     
}