LayUI-----动态选项卡

安离九歌

已于 2022-07-20 21:34:12 修改

阅读量3.8k

点赞数 3

文章标签： layui javascript 前端

于 2022-07-20 21:32:05 首次发布

本文链接：https://blog.csdn.net/qq_62331938/article/details/125857622

版权

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

5、内置页面的跳转

二、登录功能优化

前言

上次我们分享了LayUI的动态树，既侧边菜单。做了这个功能总要有用吧，这次分享的内容就是基于上篇分享的内容进行完善。在点击侧边菜单时，新增选项卡、点击已有选项卡的菜单项更改选中。

一、动态选项卡

首先进行思路分析：

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

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

2、动态添加选项卡

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

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

5、内置页面的跳转

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

<div class="layui-tab">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>用户管理</li>
    <li>权限分配</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">
      1. 高度默认自适应，也可以随意固宽。
      <br>2. Tab进行了响应式处理，所以无需担心数量多少。
    </div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>
  </div>
</div>

运用到案例中

代码展示：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="common/header.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    
    <!-- 登录用户信息 -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">贤心</a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
    
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" id="menu" lay-filter="test">
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
   <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
	  <ul class="layui-tab-title">
	    <li class="layui-this">网站设置</li>
	    <li>用户管理</li>
	    <li>权限分配</li>
	    <li>商品管理</li>
	    <li>订单管理</li>
	  </ul>
	  <div class="layui-tab-content"></div>
	</div>  

  </div>
<script type="text/javascript">
	 layui.use(['jquery'],function(){
		let $ = layui.jquery;
		$.ajax({
			url:"${pageContext.request.contextPath}/permission.action?methodName=menus",
			dataType:'json',
			success:function(data){
				let html = '';
				$.each(data,function(i,n){
					html +='<li class="layui-nav-item layui-nav-itemed">';
					html +=' <a class="" href="javascript:;">'+data[i].text+'</a>';
					//判断当前一级节点是否存在节点
					if(data[i].hasChildren){
						html +=' <dl class="layui-nav-child">';
						let childern = data[i].children;
						$.each(childern,function(index,node){
							html+=' <dd><a href="javascript:;">'+childern[index].text+'</a></dd>';
						})
						html +=' </dl>';
					}
					html +='</li>';
				});
				$("#menu").html(html);
			}
		})
	}) 
</script>
</body>
</html>

效果演示：

2、动态添加选项卡

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

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

示例代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="common/header.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    
    <!-- 登录用户信息 -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">贤心</a>
        <dl class="layui-nav-child">
          <dd><a hre

最低0.47元/天解锁文章

安离九歌

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
LayUI-----动态选项卡

上次我们分享了LayUI的动态树，既侧边菜单。做了这个功能总要有用吧，这次分享的内容就是基于上篇分享的内容进行完善。在点击侧边菜单时，新增选项卡、点击已有选项卡的菜单项更改选中。.........
复制链接

扫一扫