程序员经验分享-hwhale

LayUI系列（三）之动态添加选项卡

2023-11-15

前言

上一篇博客介绍了树形菜单的实现，这一篇将继续完善通过点击左侧树形菜单实现动态打开选项卡Tab

一. 什么是Tab选项卡

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

二. 动态选项卡

添加动态选项卡的思路：

  1. 通过网站查找layui选项卡的页面布局代码
  2. 动态添加选项卡
  3. 将选项卡的名称换成选中的菜单名称
  4. 已打开的选项卡不再重复打开
  5. 选择已被打开的选项卡则进行选项卡的转换

示例代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</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="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" 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">
       <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">menu group 1</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">menu 1</a></dd>
            <dd><a href="javascript:;">menu 2</a></dd>
            <dd><a href="javascript:;">menu 3</a></dd>
            <dd><a href="">the links</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">menu group 2</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">list 1</a></dd>
            <dd><a href="javascript:;">list 2</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
        <li class="layui-nav-item"><a href="">the links</a></li> 
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
  
 
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="11">网站设置</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
  </div>
</div>

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

var element,layer,util,$;

layui.use(['element', 'layer', 'util'], function(){
   element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
  
  $.ajax({
	  url:'${pageContext.request.contextPath }/permission.action?methodName=menus',
			  dataType:'json',
			  success:function(data){
				  console.log(data)
				  var htmlStr = '';
				  $.each(data,function(i,n){
					  htmlStr +='<li class="layui-nav-item layui-nav-itemed">';
					  htmlStr +='<a class="" href="javascript:;">'+n.text+'</a>';
					  if(n.hasChildren){
						  var children=n.children;
						  htmlStr +='<dl class="layui-nav-child">';
						  
						  $.each(children,function(index,node){
							  htmlStr +='<dd><a href="javascript:;" onclick="openTab(\''+node.text+'\',\''+node.attributes.self.url+'\',\''+node.id+'\')">'+node.text+'</a></dd>';
						  })
						  htmlStr +='</dl>';
					  }
					  htmlStr +='</li>';
				  })
				  
				  $("#menu").html(htmlStr);
				  
				  element.render('menu');
			  } 
  });
});

function openTab(title,content,id){
	var $node = $('li[lay-id="'+id+'"]');
	console.log($node)
	if($node.length == 0){
		//新增一个Tab项
	    element.tabAdd('demo', {
	      title: title //用于演示
	      ,content: content
	      ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
	    })
	}
	 element.tabChange('demo', id); //切换到：用户管理
	
}
</script>
</body>
</html>

dao层

package com.zking.dao;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.zking.entity.Permission;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.TreeVo;

public class PermissionDao extends BaseDao<Permission> {
	

	public List<Permission> list(Permission permission, PageBean pageBean) throws Exception {
		String sql = "select *from t_easyui_permission";
		return super.executeQuery(sql, Permission.class, pageBean);
	}

	
//	将数据库查询出的平级数据，转换成父子关系的数据
	public List<TreeVo<Permission>> menus(Permission permission, PageBean pageBean) throws Exception{
		List<TreeVo<Permission>> lst = new ArrayList<TreeVo<Permission>>();
		List<Permission> list = this.list(permission, pageBean);
		for (Permission p : list) {
			TreeVo<Permission> vo = new TreeVo<>();
			vo.setId(p.getId()+"");
			vo.setText(p.getName());
			vo.setParentId(p.getPid()+"");
			Map<String, Object> map = new HashMap<String, Object>();
			map.put("self", p);
			vo.setAttributes(map);
			lst.add(vo);
		}
		return BuildTree.buildList(lst, "0");
	}
}

1. 通过网站查找layui选项卡的页面布局代码

参考地址：http://layui.org.cn/demo/index.html
在这里插入图片描述
预览效果：
在这里插入图片描述

2. 动态添加选项卡

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

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

在这里插入图片描述

3. 将选项卡的名称换成选中的菜单名称

在将选项卡名称换为对应的菜单名称的同时，将选项卡的内容等也进行更改。

function openTab(title,content,id){
	var $node = $('li[lay-id="'+id+'"]');
	console.log($node)
	if($node.length == 0){
		//新增一个Tab项
	    element.tabAdd('demo', {
	      title: title //用于演示
	      ,content: content
	      ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
	    })
	}
	 element.tabChange('demo', id); //切换到：用户管理
	
}

4. 已打开的选项卡不再重复打开

function openTab(title,content,id){
	var $node = $('li[lay-id="'+id+'"]');
	console.log($node)
	if($node.length == 0){
		//新增一个Tab项
	    element.tabAdd('demo', {
	      title: title //用于演示
	      ,content: content
	      ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
	    })
	}
	 element.tabChange('demo', id); //切换到：用户管理
	
}

5. 选择已被打开的选项卡则进行选项卡的转换

element.tabChange('demo', id); //切换到：用户管理

三. 将JavaScript代码封装成js文件

好处

1. 代码复用性：将JavaScript代码封装在单独的JS文件中，可以在多个JSP页面中重复使用，提高了代码的复用性。这样可以简化对公共功能的修改和维护。

2. 可维护性：将JavaScript代码单独封装成JS文件后，可以专注于JavaScript代码的编写和维护，方便团队协作。同时，可以更方便地进行版本控制和管理。

3. 页面加载速度：将JavaScript代码封装成外部的JS文件后，可以缓存该文件，减小页面体积，加快页面加载速度。同时，当多个JSP页面引用同一个JS文件时，浏览器可以缓存该文件，减少服务器请求和响应的次数，提高网页性能。

4. 可读性和可维护性：将JavaScript代码从JSP页面中分离出来，可以提高代码的可读性和可维护性。在JS文件中，可以使用更好的代码编辑器和调试工具，提供更好的代码提示和错误检查，以及更方便的调试功能。

总之，将JSP界面中的JavaScript代码封装成JS文件可以提高代码的复用性、可维护性和可读性，同时也可以提高页面加载速度，优化用户体验。

封装后的js文件【main.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 htmlStr = '';
				  $.each(data,function(i,n){
					  htmlStr +='<li class="layui-nav-item layui-nav-itemed">';
					  htmlStr +='<a class="" href="javascript:;">'+n.text+'</a>';
					  if(n.hasChildren){
						  var children=n.children;
						  htmlStr +='<dl class="layui-nav-child">';
						  
						  $.each(children,function(index,node){
							  htmlStr +='<dd><a href="javascript:;" onclick="openTab(\''+node.text+'\',\''+node.attributes.self.url+'\',\''+node.id+'\')">'+node.text+'</a></dd>';
						  })
						  htmlStr +='</dl>';
					  }
					  htmlStr +='</li>';
				  })
				  
				  $("#menu").html(htmlStr);
				  
				  element.render('menu');
			  } 
  });
});

function openTab(title,content,id){
	var $node = $('li[lay-id="'+id+'"]');
	console.log($node)
	if($node.length == 0){
		//新增一个Tab项
	    element.tabAdd('demo', {
	      title: title //用于演示
	      ,content: content
	      ,id: id //实际使用一般是规定好的id，这里以时间戳模拟下
	    })
	}
	 element.tabChange('demo', id); //切换到：用户管理
	
}

在公共文件header.jsp中添加base标签

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

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css">
 
<!-- 引入 layui.js -->
<script src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>
<base href="${pageContext.request.contextPath }/"/>

jsp界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="common/header.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="static/js/main.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">layout demo</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="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" 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">
       <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">menu group 1</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">menu 1</a></dd>
            <dd><a href="javascript:;">menu 2</a></dd>
            <dd><a href="javascript:;">menu 3</a></dd>
            <dd><a href="">the links</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">menu group 2</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">list 1</a></dd>
            <dd><a href="javascript:;">list 2</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
        <li class="layui-nav-item"><a href="">the links</a></li> 
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
  
 
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
  <ul class="layui-tab-title">
    <li class="layui-this" lay-id="11">网站设置</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
  </div>
</div>

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


</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

layui

OkHttp

前端

javascript

LayUI系列（三）之动态添加选项卡 的相关文章

随机推荐

  • mount.nfs: mount(2): Invalid argument，mount,nfs:an incorrect mount option was specified 这种报错可能是什么原因导...

    这个错误通常表明在挂载 NFS Network File System 共享时出现了问题 NFS 允许将远程服务器上的文件系统挂载到本地计算机上 这样就可以像访问本地文件系统一样访问远程文件系统 具体来说 mount nfs mount 2

  • Android 应用（5）——android10.0升级webview浏览器内核版本

    参考链接 https www jianshu com p a673718ef80a https www freesion com article 7856574309 webview资源链接 https www apkmirror com

  • [0x7FFE1E17E050] ANOMALY: meaningless REX prefix used cmd窗口activate报错

    前情概要 window cmd窗口下 激活conda虚拟环境 conda activate dl 提示先conda activate 执行conda activate 提示 0x7FFE1E17E050 ANOMALY meaningles

  • 网络应用技术师技能考试试题（上）

    作者 小刘在C站 个人主页

  • 2020李宏毅机器学习课程作业——Homework1：Linear Regression

    一 作业获取途径 课程网址 http speech ee ntu edu tw tlkagk courses ML20 html B站视频地址 https www bilibili com video BV1JE411g7XF from s

  • slf4j简介说明

    转自 slf4j简介说明 下文讲述slf4j的简介说明 如下所示 SLF4J简介 SLF4J是用于日志记录系统的简单外观 允许最终用户在部署时插入所需的日志记录系统 Simple Logging Facade for Java SLF4J

  • 四、Arthas

    四 Arthas 1 安装 卸载 1 Arthas支持在Linux Unix Mac等平台上一键安装 请复制以下内容 并粘贴到命令行中 敲回车执行即可 curl L https arthas aliyun com install sh sh

  • 深度解析Vue Router原理：实战指南与实用技巧

    大家好 欢迎来到程序视点 今天跟大家简单聊聊Router的实现原理 以及我们如何去实现这样一个插件 Vue Router 是Vue js官方的路由管理器 它和 Vue js 的核心深度集成 让构建单页面应用变得易如反掌 关于Vue Rout

  • 【计算机视觉

    文章目录 一 检测相关 10篇 1 1 Self Training and Multi Task Learning for Limited Data Evaluation Study on Object Detection 1 2 OTAS

  • Exception in thread "main" java.io.FileNotFoundException: xxx.xxx (系统找不到指定的路径。) Java错误

    该情况为读取文件路径错误 src里的代码 在我们的直观感觉可以用相对路径 xxx 然而有时候行 有时候不行 作者确实都经历过 因此要加上以src为起始的路径 例如代码在src P1里 读取的文件在src P1 a里 写 a xxx要碰运气

  • 北京大学肖臻老师《区块链技术与应用》公开课笔记【01-课程简介】

    北大肖臻老师 区块链技术与应用 点击这里 全系列文章链接 点击这里 该系列文章中如有任何侵权内容请及时与我个人联系删除或修改 一 区块链的本质是什么 有人说区块链是下一代的价值互联网 也有人说它是世界上最慢的数据库 区块链出生以来就饱受争议

  • docker从入门到实战

    Docker Docker 基础 Docker 容器与镜像的概念 容器 Container 容器是一种可执行的虚拟化环境 它包含了应用程序以及运行此应用程序所需的所有依赖项 包括软件 库 配置等 容器只存在于主机操作系统的内存中 不占用独立

  • vue中函数回调传值

    在业务开发中 有时候会碰到一种情况 组件内部会触发一些事件用来请求新的数据 数据请求到后将新的数据继续在组件内进行处理 这个场景我们有三种方式可以实现它 将数据请求写在组件内部 缺点不好维护 违反了单项数据流的原则 通常我们可以通过this

  • js验证邮箱的正则表达式

    最近小小研究了一下正则表达式 觉得写正则表达式还挺有意思的 先想推荐一个网址 把正则表达式的基本语法都总结了 很不错 https msdn microsoft com zh cn library ae5bf541 v vs 100 aspx

  • SiliconLab GSDK 4.2.2 创建 Z3Gateway 工程

    如题 在SSv5的My Product选项下 需要添加Linux 32 Bit 否则在Example Projects Demos中无法查找到zigbeegateway相关的demo My Product 中的内容添加成功后 再次搜索Exa

  • 剑指 Offer 29. 顺时针打印矩阵(java+python)

    输入一个矩阵 按照从外向里以顺时针的顺序依次打印出每一个数字 示例 1 输入 matrix 1 2 3 4 5 6 7 8 9 输出 1 2 3 6 9 8 7 4 5 示例 2 输入 matrix 1 2 3 4 5 6 7 8 9 10

  • Anchor Base 和 Anchor Free

    1 概念 1 1 什么是Anchor Anchor也叫做锚 其实是一组预设的边界框用于在训练时学习真实的边框位置相对于预设边框的偏移 通俗点说就是预先设置目标可能存在的大概位置 然后再在这些预设边框的基础上进行精细化的调整 而它的本质就是为

  • npm run build 打包后，如何查看效果

    我们用vue cli搭建的项目执行npm build后本地打开页面空白 如果才能查看npm run build之后的结果呢 首先我们看一下提示 Tip built files are meant to be served over an H

  • 手机第一次怎么充电？

    来说说电池保养问题 现在手机用的大概是600 1800毫安时左右的锂电池 而锂电池是没有记忆的 可以随时随地充电 电池和耳机一样有一个煲的过程 刚买回来的时候电池的功效不会发挥到最大 刚买回来用的前两次一定要把电量用完再充 这点很重要 大概

  • LayUI系列（三）之动态添加选项卡

    文章目录 前言 一 什么是Tab选项卡 二 动态选项卡 1 通过网站查找layui选项卡的页面布局代码 2 动态添加选项卡 3 将选项卡的名称换成选中的菜单名称 4 已打开的选项卡不再重复打开 5 选择已被打开的选项卡则进行选项卡的转换 三

热门标签