LayUI之动态选项卡Tab&iframe使用

白未

已于 2022-07-20 22:37:01 修改

阅读量1k

点赞数

文章标签： layui javascript 前端

于 2022-07-19 12:37:28 首次发布

本文链接：https://blog.csdn.net/yzq102873/article/details/125868662

版权

本文详细介绍了使用LayUI框架实现动态选项卡和iframe的方法，包括从layui官网获取的基础代码，如何创建动态选项卡，以及利用iframe进行页面跳转。同时，文章还提及了登录功能的实现过程，涵盖实体类、DAO方法、Action及页面设计。最后，文章讨论了会议OA项目的页面翻新工作，列举了涉及的主要文件如main.jsp、main.js、login.jsp、login.js和head.jsp。

摘要由CSDN通过智能技术生成

一、tab选项卡

1、在layui网上找的关于选项卡的代码

2、动态选项卡

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@include file="common/head.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>
<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">
        
      </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 class="layui-footer">
    <!-- 底部固定区域 -->
            底部固定区域
  </div>
</div>
<script>
let $,element
layui.use(['jquery','element'],function(){
	$=layui.jquery,element = layui.element;
	$.ajax({
		url:'${pageContext.request.contextPath }/permission.action?methodName=menus'
		,dataType:'json'
		,success:function(data){
			console.log(data);
			let htmlstr = '';
			$.each(data,function(i,n){
				htmlstr +='<li class="layui-nav-item layui-nav-itemed">';
				h