Layui----动态选项卡

目录

动态选项卡

什么是Tab选项卡

Tab选项卡的作用

代码演示

首先进行思路分析：

查看Layui的选项卡的页面布局

页面总体布局

增加选项卡

 示例代码：

拿到数据库里面的值

 设置不出现重复的选项卡

 效果展示

---

动态选项卡

什么是Tab选项卡

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

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

Tab选项卡的作用

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

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

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

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

代码演示

首先进行思路分析：

我们要用LayUI进行动态选项卡。步骤如下：

查找LayUI的选项卡页面布局代码

动态添加选项卡

将选项卡名称换成对应的菜单名

重复出现的tab选项卡不添加，改为选中

内置页面的跳转

查看Layui的选项卡的页面布局

• 网站设置

内容1

页面总体布局

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>



  <%@include file="common/header.jsp" %>
   



  

    
layout demo
    
    

      
      

        
      
      
      
nav 1
      
nav 2
      
nav 3
      

        nav groups
        

          
menu 11
          
menu 22
          
menu 33
        
      
    
    
    

      

        
          
          tester
        
        

          
Your Profile
          
Settings
          
Sign out
        
      
      

        
          
        
      
    
  
  

    

      
      

      
    
  
  


  

    
网站设置
  
  

    
内容1
  

  
  

    
            底部固定区域
  

增加选项卡

点击菜单时要动态生成tab选项卡。

需要给菜单添加点击事件，点击菜单时调用增加选项卡的方法。

 

 示例代码：

这里我定义了一个js文件，把函数方法什么的放了进去，然后在后代调用了这个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); */
			/* 定义标签要拼接的文本内容  */
			let datacontent = '';
				console.log(data);
			$.each(data,function(i,n){
				datacontent += ' 
';
				datacontent +=''+n.text+'';
				/* 判断是否有子节点有就进行子菜单增加，没有就不加 */
				if(n.hasChildren){
					datacontent +='
';
					/* 循环所有的子节点  n.children*/
					$.each(n.children,function(index,node){
						datacontent += '
'+node.text+'
';
					})
					datacontent += ' 
 ';
				}
				datacontent += ' 
 ';
			})
			/* 重置里面的文本内容 */
			$("#menu").html(datacontent);
			//渲染
			element.render('menu');
		}
  });
  });
 
  function openTab(title,content,id){
	  var $node = $('li[lay-id="'+id+'"]');
	  console.log($node);
	  if($node.length == 0){
		  element.tabAdd('demo', {
		        title: title//用于演示
		        ,content: '内容'+ content
		        ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
		      })
	  }
	  element.tabChange('demo' , id);//切换到：用户管理
	    }
  
  
  
  
  

拿到数据库里面的值

 

 设置不出现重复的选项卡

 效果展示