备案控制台
开发者社区 开发与运维 文章 正文

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

2023-10-30 61
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： LayUI系列（三）之动态添加选项卡

前言

上一篇博客介绍了树形菜单的实现，这一篇将继续完善通过点击左侧树形菜单实现动态打开选项卡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>

运行效果如下：

文章标签：
JavaScript
前端开发
Java
缓存
UED
不念那年晚春
目录
相关文章
Love-Java.
|
8月前
|
前端开发 JavaScript Java
Layui实现动态选项卡(超详细)
Layui实现动态选项卡(超详细)
Love-Java.
125 0
你挚爱的强哥
|
2月前
elementUI el-tabs 实现动态选项卡页面效果
elementUI el-tabs 实现动态选项卡页面效果
你挚爱的强哥
260 0
现在是571
|
2月前
|
JavaScript 前端开发 Java
layui选项卡的实现
layui选项卡的实现
现在是571
51 0
朱琳均
|
7月前
layui_03动态选项卡Tab&iframe使用
layui_03动态选项卡Tab&iframe使用
朱琳均
34 0
君易--鑨
|
8月前
|
存储 JavaScript 前端开发
LayUI基本元素之选项卡的使用（详解）
LayUI基本元素之选项卡的使用（详解）
君易--鑨
145 0
默不会开发
|
8月前
|
自然语言处理 JavaScript 前端开发
LayUI之动态选项卡Tab&iframe使用
LayUI之动态选项卡Tab&iframe使用
默不会开发
157 0
君临沂
|
8月前
|
前端开发 JavaScript Java
Layui的选项卡及菜单
Layui的选项卡及菜单
君临沂
111 0
艳艳耶
|
8月前
|
JavaScript 前端开发 Java
LayUI框架——选项卡
LayUI框架——选项卡
艳艳耶
41 0
孤留光乩
|
9月前
|
JavaScript 前端开发 定位技术
LayUI动态选项卡的使用
LayUI动态选项卡的使用
孤留光乩
97 0
Kissship
|
9月前
|
开发者
LayUI之选项卡组件
LayUI之选项卡组件
Kissship
57 0