LayUI动态选项卡的使用

news2024/11/25 21:35:51

目录

一、Tab选项卡

1.什么是Tab选项卡

2.Tab选项卡的作用

二、Tab选项卡的详细使用步骤

1.参考官网，选择自己喜欢的选项卡

​ 2.将静态选项卡转换成动态选项卡

 3.将选项卡的标签名变成实际菜单名

4.重名选项卡不能二次打开

5.切换到指定选项卡

6.iframe的使用

iframe是用来干嘛的

一、Tab选项卡

1.什么是Tab选项卡

        选项卡（Tab）是指Web浏览器中显示多个网页或文档的标签式界面。每个选项卡相当于一个独立的窗口，用户可以通过点击选项卡切换不同的网页或文档。选项卡使得用户可以同时浏览多个网页而不需要打开多个浏览器窗口，提供了更方便和高效的浏览体验。

        浏览器中，通常位于浏览器窗口的顶部，每个选项卡上显示着网页的标题，用户可以通过点击相应的选项卡来切换到对应的网页内容。另外，用户还可以通过右键点击选项卡来进行一些操作，例如重新加载页面、关闭选项卡等。

        Tab广泛应用于Web页面，因此我们也对其进行了良好的支持（简约风格、卡片风格、响应式Tab以及带删除的Tab等等）。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。

2.Tab选项卡的作用

1.同时浏览多个网页：选项卡使得用户可以在同一个浏览器窗口下同时打开多个网页，而不需要打开多个独立的浏览器窗口。这样，用户可以在不同的选项卡中浏览不同的网页内容，快速切换并比较不同的信息。

2.整理和管理浏览活动：通过使用选项卡，用户可以更好地整理和管理自己的浏览活动。用户可以在浏览器中开启多个选项卡，每个选项卡可以对应一个特定的任务或主题，如工作、娱乐、学习等。这样，用户可以更有序地组织自己的浏览内容，快速切换任务而不会弄乱浏览器窗口。

3.提高浏览效率：选项卡使得浏览器的使用更加高效。用户可以在一个选项卡中加载一个网页同时进行浏览，而在另一个选项卡中进行其他操作，如搜索、打开链接等。这样，用户可以同时进行多个任务，减少切换窗口或浏览器的频率，提高浏览效率。

4.节省系统资源：相比于打开多个独立的浏览器窗口，使用选项卡可以节省系统资源。由于选项卡共享同一个浏览器进程，这意味着系统只需要为一个浏览器分配资源，而不需要为每个窗口分配资源。这样，选项卡能够提供更流畅和高效的浏览体验，并减少系统资源的占用。

二、Tab选项卡的详细使用步骤

1.参考官网，选择自己喜欢的选项卡

查看代码，找到自己想用的选项卡代码进行复制

 2.将静态选项卡转换成动态选项卡

给左侧列表子节点添加一个点击事件，当点击子节点时，将新增一个选项卡，但标题内容等是一样的，接下来将会不断优化。

//新增一个Tab项
			      element.tabAdd('demo', {
			        title: '选项卡'
			        ,content: "text"
			        ,id: '89'
			      })

 3.将选项卡的标签名变成实际菜单名

我们需要拿到permission表中的数据信息，然后对其复制，将它变成我们需要的菜单名和后面需跳转页面的url属性等

在子节点的点击事件中传入参数

str +='<dd><a href="javascript:;" onclick="openTab(\''+node.text+'\',\''+node.attributes.att.url+'\',\''+node.id+'\')">'+node.text+'</a></dd>';

 注：在拼接中需特别注意单双引号的使用，否则拼接的所有内容将无法显示

接下来我们将给点击事件中的标题等赋值

function openTab(text,url,id){
			
			
				//新增一个Tab项
			      element.tabAdd('demo', {
			        title: ''+text+''
			        ,content: ''+text+''
			        ,id: ''+id+''
			      })
		
			
		}

4.重名选项卡不能二次打开

在上述方法实现后，当我们点击左侧菜单时，可以反复添加选项卡，但我们一个项目中肯定是只能开一个的，那么我们将怎么优化呢？

 在我们添加一个选项卡后，它的length长度为0，再次添加length长度则不断加1，那么我们就可以通过jQuery的方式获取它节点的内容，拿到它的length长度进行判断即可

function openTab(text,url,id){
			var nod=$('li[lay-id="'+id+'"]');
			console.log(nod)
			if (nod.length == 0) {
				//新增一个Tab项
			      element.tabAdd('demo', {
			        title: ''+text+''
			        ,content: ''+text+''
			        ,id: ''+id+''
			      })
			}
			
			
		}

 在效果图中，它不会重复的去添加选项卡，但我点击时没有选中当前点击的，所以，我们还需做出优化

5.切换到指定选项卡

在layui中提供了这样一个切换的方法，只需这一行就可以解决了

element.tabChange('demo', id);

为了看出更明显的效果，我给标题设置了颜色并且加粗了字体

function openTab(text,url,id){
			var nod=$('li[lay-id="'+id+'"]');
			console.log(nod)
			if (nod.length == 0) {
				//新增一个Tab项
			      element.tabAdd('demo', {
			        title: ''+text+''
			        ,content: ''+text+''
			        ,id: ''+id+''
			      })
			}
			
			 // 设置选中的选项卡标题的颜色并加粗字体
		  $('li[lay-id]').each(function () {
		    if ($(this).attr('lay-id') == id) {
		      $(this).css('color', 'red');
		       $(this).css('font-weight', 'bold');
		    } else {
		      $(this).css('color', '');
		       $(this).css('font-weight', '');
		    }
		  });
            //切换
			 element.tabChange('demo', id); 
		}

6.iframe的使用

iframe是用来干嘛的

  1. 嵌入其他网页：你可以通过指定src属性来嵌入其他网页，这样在当前页面中就可以显示和访问另一个网页的内容。

  2. 嵌入视频：你可以使用<iframe>来嵌入在线视频，例如YouTube或Vimeo上的视频。通过指定相应的视频播放器的URL，可以在页面中播放视频。

  3. 嵌入地图：你可以使用<iframe>嵌入地图服务提供商（如Google Maps）生成的地图，以在你的网页中显示地图。

  4. 嵌入广告：广告服务提供商通常会提供一段嵌入代码，你可以将其放置在<iframe>中，用于在你的网页中显示广告。

  5. 隔离内容：<iframe>可以在网页中创建一种隔离环境，使嵌入的内容与主页面分离。这可以提供额外的安全性和沙盒效果，以防止嵌入的内容对主页面产生负面影响。

在上述选项卡讲解中，我们的内容区域应是我们新的一个页面，在此我们也是通过iframe中的src属性进行跳转

<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>

js完整代码

var element,layer,util,$;
		layui.use([ 'element', 'layer', 'util' ],function() {
		 element = layui.element, 
		layer = layui.layer, 
		util = layui.util, 
		$ = layui.$;
	$.ajax({
		url:"permission.action?methodName=menus",
		dataType:'json',
		success:function(data){
			console.log(data)
			var str='';
			$.each(data,function(i,n){
				str +=' <li class="layui-nav-item layui-nav-itemed">';
				str +=' <a class="" href="javascript:;">'+n.text+'</a>'
				if (n.hasChildren) {
					var children=n.children;
					str +='<dl class="layui-nav-child">';
					$.each(children,function(idx,node){
			            str +='<dd><a href="javascript:;" onclick="openTab(\''+node.text+'\',\''+node.attributes.att.url+'\',\''+node.id+'\')">'+node.text+'</a></dd>';
					})
					str +='</dl>';
				}
				str +='</li>'
			})
			$("#menu").html(str);
			
			element.render('menu');
		}
	})
		});
		/* 选项卡
		1.参考官网
		2.将静态选项卡转换成动态选项卡
		3.将选项卡的标签名变成实际菜单名
		4.重名选项卡不能二次打开
		5.切换到指定选项卡
		*/
		function openTab(text,url,id){
			var nod=$('li[lay-id="'+id+'"]');
			console.log(nod)
			if (nod.length == 0) {
				//新增一个Tab项
			      element.tabAdd('demo', {
			        title: ''+text+''
			        ,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
			        ,id: ''+id+''
			      })
			}
			 
			 // 设置选中的选项卡标题的颜色
		  $('li[lay-id]').each(function () {
		    if ($(this).attr('lay-id') == id) {
		      $(this).css('color', 'red');
		       $(this).css('font-weight', 'bold');
		    } else {
		      $(this).css('color', '');
		       $(this).css('font-weight', '');
		    }
		  });
		  //切换
			 element.tabChange('demo', id);
		}

 前端主界面完整版

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="common/header.jsp"%>

<!DOCTYPE>
<html>
<head>
<script type="text/javascript"
	src="static/js/index.js"></script>
</head>
<body>
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo layui-hide-xs layui-bg-black">
			<img alt="" src="">
			</div>
			<!-- 头部区域（可配合layui 已有的水平导航） -->
			<ul class="layui-nav layui-layout-left">
				<!-- 移动端显示 -->
				<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm"
					lay-header-event="menuLeft"><i
					class="layui-icon layui-icon-spread-left"></i></li>
				<!-- Top导航栏 -->
				<li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
				<li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
				<li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
				<li class="layui-nav-item"><a href="javascript:;">nav groups</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="">menu 11</a>
						</dd>
						<dd>
							<a href="">menu 22</a>
						</dd>
						<dd>
							<a href="">menu 33</a>
						</dd>
					</dl></li>
			</ul>
			<!-- 个人头像及账号操作 -->
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item layui-hide layui-show-md-inline-block">
					<a href="javascript:;"> <img
						src="static/images/jjj.gif"
						class="layui-nav-img"> tester
				</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="">Your Profile</a>
						</dd>
						<dd>
							<a href="">Settings</a>
						</dd>
						<dd>
							<a href="login.jsp">Sign out</a>
						</dd>
					</dl>
				</li>
				<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
					<a href="javascript:;"> <i
						class="layui-icon layui-icon-more-vertical"></i>
				</a>
				</li>
			</ul>
		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
					
				</ul>
			</div>
		</div>

		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 15px;">
					 <!-- 选项卡 -->
			<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
			
			  <ul class="layui-tab-title">
			  </ul>
			  
			  <div class="layui-tab-content">
			  </div>
			</div>
			<!-- 选项卡 -->
			</div>
		</div>

		<div class="layui-footer">
			<!-- 底部固定区域 -->
			底部固定区域
		</div>
	</div>

</body>
</html>

 

注：404是因为页面没建的原因呢！ 

layui选项卡的介绍就到这啦！！关注博主不迷路😁 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/746674.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Python示例解释观察者模式

Python示例解释观察者模式

观察者模式是一种常用的设计模式&#xff0c;用于在对象之间建立一种一对多的依赖关系&#xff0c;当一个对象的状态发生变化时&#xff0c;所有依赖于它的对象都会得到通知并自动更新。下面通过一个简单的例子来解释观察者模式的概念。 假设我们有一个名为"主题"&a…
阅读更多...
神经网络万能近似定理探索与实验

神经网络万能近似定理探索与实验

神经网络万能近似定理探索与实验 今天&#xff0c;我们来做神经网络万能近似定理的探索与实验。关于万能近似定理呢&#xff0c;就是说&#xff0c;对这个神经元的输出进行非线性激活函数处理&#xff0c;单层的神经网络就可以拟合任何一个函数。 下面先看我们搭建的第一个网…
阅读更多...
docker部署达梦数据库

docker部署达梦数据库

一、下载安装包 安装步骤&#xff1a; 先跟着网页走 注&#xff1a;第二步导入安装包&#xff0c;如果是在自己电脑上&#xff0c;就不一定要拷贝到/opt目录下&#xff0c;在安装包所在目录地址栏输入cmd&#xff0c;进入终端进行操作即可 操作到正常打印日志&#xff08;如…
阅读更多...
java项目之房屋租赁系统(ssm+mysql+jsp)

java项目之房屋租赁系统(ssm+mysql+jsp)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于ssm的房屋租赁系统。技术交流和部署相关看文章末尾&#xff01; 开发环境&#xff1a; 后端&#xff1a; 开发语言&#xff1a;Java 框架&…
阅读更多...
尚硅谷Docker实战教程-笔记14【高级篇，Docker容器监控之CAdvisor+InfluxDB+Granfana、Docker终章总结】

尚硅谷Docker实战教程-笔记14【高级篇，Docker容器监控之CAdvisor+InfluxDB+Granfana、Docker终章总结】

尚硅谷大数据技术-教程-学习路线-笔记汇总表【课程资料下载】视频地址&#xff1a;尚硅谷Docker实战教程&#xff08;docker教程天花板&#xff09;_哔哩哔哩_bilibili 尚硅谷Docker实战教程-笔记01【基础篇&#xff0c;Docker理念简介、官网介绍、平台入门图解、平台架构图解】…
阅读更多...
centos7.9 连续登录失败处理

centos7.9 连续登录失败处理

如果有人恶意破解你的服务器&#xff0c;下面的操作可以起到一定的作用&#xff0c;连续登录失败锁定账户一段时间&#xff0c;让攻击者的成本增加&#xff0c;从而降低服务器被恶意破解的风险。 参考博客 https://blog.csdn.net/hjxloveqsx/article/details/129004832 https…
阅读更多...
MyBatis 中如何使用分页

MyBatis 中如何使用分页

MyBatis 中如何使用分页 在实际的项目开发中&#xff0c;我们经常需要对数据库中的数据进行分页查询&#xff0c;以提高数据查询的效率和用户体验。MyBatis 是一种流行的 Java 持久层框架&#xff0c;它提供了多种分页查询的方式&#xff0c;本文将介绍其中常用的两种方式&…
阅读更多...
MySQL数据库详解

MySQL数据库详解

文章目录 引言1. SQL1.1 SQL通用语法1.2 SQL分类1.3 DDL1.3.1 数据库操作1.3.2 表操作1.3.2.1 表操作-查询创建1.3.2.2 表操作-数据类型1.3.2.3 表操作-修改1.3.2.3 表操作-删除 1.4 DML1.4.1 添加数据1.4.2 修改数据1.4.3 删除数据 1.5 DQL1.5.1 基本语法1.5.2 基础查询1.5.3 …
阅读更多...
车载以太网之SOME/IP-SD专题篇

车载以太网之SOME/IP-SD专题篇

前言 首先，请问大家几个小小问题，你清楚： 你知道什么是SOME/IP SD吗？SOME/IP-SD报文是如何发送与接收的呢？SOME/IP-SD 存在哪几种Entry Type呢？SOME/IP-SD内部状态机转换又是如何？今天，我们就来一起探索并回答这些问题。为了便于大家理解，以下是本文的主题大纲： 目录…
阅读更多...
Sentinel 规则详解

Sentinel 规则详解

Sentinel 规则 流控规则 flow1、QPS流控2、并发线程数流控3、流控模式4、流控效果 熔断&#xff08;降级&#xff09;规则 degrade1、慢调用比例2、异常比例3、异常数 热点规则 param-flow授权规则 authority1、应用场景2、自定义来源3、授权规则配置 系统规则 前言&#xff1a…
阅读更多...
代码随想录day1 | 704.二分查找 27.移除元素

代码随想录day1 | 704.二分查找 27.移除元素

一、二分 1、二分易错点 1、循环变量 while(left < right) 还是while(left <right)2、判断条件 if(num[mid] > tar) mid right 还是 mid right -12、循环不变量 [left, right] [left, right) (left, right]3、左闭右闭写法 当时左闭右闭时&#xff0c;while循…
阅读更多...
从变分自动编码器到扩撒模型再到分数匹配模型的关系（VAE，Diffusion， score-based model）

从变分自动编码器到扩撒模型再到分数匹配模型的关系（VAE，Diffusion， score-based model）

https://arxiv.org/pdf/2208.11970.pdf
阅读更多...
2、基于kubeadm搭建K8S环境

2、基于kubeadm搭建K8S环境

目录 一、环境说明 二、初始化所有节点 三、修改三台服务器主机名&#xff0c;并写入host文件 四、调整内核参数 五、所有节点安装Docker 六、所有节点配置K8S源 七、所有节点安装kubeadm&#xff0c;kubelet和kubectl 八、部署 kubernetes Master 节点 九、k8s-node …
阅读更多...
基于docker的keepalived+MySQL主从实现MySQL高可用

基于docker的keepalived+MySQL主从实现MySQL高可用

因生产需要对MySQL做高可用&#xff0c;同时&#xff0c;资源有限&#xff0c;因此采用双节点主从keepalived方式实现高勇。另外因需要大批量部署MySQL集群&#xff0c;需要采用模板化部署&#xff0c;本方案采用将MySQL容器化&#xff0c;实现MySQL模板化配置部署。 部署环境及…
阅读更多...
SpringMVC学习笔记--上篇

SpringMVC学习笔记--上篇

SpringMVC学习笔记 1、SpringMVC 1.1、什么是SpringMVC Spring MVC是Spring Framework的一部分&#xff0c;是基于Java实现MVC的轻量级Web框架。 1.2、SpringMVC的特点 Spring MVC的特点&#xff1a; 轻量级&#xff0c;简单易学高效 , 基于请求响应的MVC框架与Spring兼容…
阅读更多...
Python深度学习-有向图合并、排序、最长路径计算

Python深度学习-有向图合并、排序、最长路径计算

一、有向图方向、权重表示方法 Python通常使用有向图中边的起点和终点来表示边的方向。例如&#xff0c;如果有一条从节点A到节点B的边&#xff0c;则可以使用以下方式表示该有向边&#xff1a; graph {A: {B: 1} }在这个例子中&#xff0c;节点A和节点B之间存在一条权重为1…
阅读更多...
谷歌插件下载Redux DevTools管理Redux数据

谷歌插件下载Redux DevTools管理Redux数据

我们在做 react-redux开发时 很多时候可能无法确定自己的数据有没有成功导进来 这里就有个不错的谷歌插件推荐给大家 大家可以下载我的资源 谷歌插件Redux DevTools 这里 我们打开 Google Chrome浏览器 然后 直接在谷歌浏览器上访问 chrome://extensions/ 如果你的第一次进入 …
阅读更多...
【网络安全】学过编程就是黑客？

【网络安全】学过编程就是黑客？

我们不可否认的是黑客为我们带来了巨大的财产损失于危机&#xff0c;即使其最初的思想是正确的。 个人主页&#xff1a;【&#x1f60a;许思王】 文章目录 前言黑客 &#x1f4bb;起源&#x1f697;发展&#x1f463;黑客守则&#xff08;真的假的&#x1f914;&#xff09;黑…
阅读更多...
合并cyclonedx格式的bom文件

合并cyclonedx格式的bom文件

1.工具下载 https://github.com/CycloneDX/cyclonedx-cli/releases 2.操作记录 Usage: cyclonedx [options] [command] Options: --version Show version information -?, -h, --help Show help and usage information Commands: add Add information to a BOM (currently…
阅读更多...
【图像处理】：相机对焦的原理和实现方法

【图像处理】：相机对焦的原理和实现方法

相机对焦的原理和实现方法 1 原理介绍&#xff1a;1.1点扩散函数“原理:1.2 测距原理:对焦的本质是测距&#xff1a;1.3.相位检测只原理: 2.实现方法2 1 原理介绍&#xff1a; 对焦有三种思路: 1.1点扩散函数“原理: 也就是观测画面中线条边缘的对比度&#xff0c;对比度最高…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023