一、Tab选项卡

1.什么是Tab选项卡

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

2、LayUI选项卡使用

①从官网中复制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"><script src="static/js/index.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">会议OA项目</div><!-- 头部区域（可配合layui 已有的水平导航） --><ul class="layui-nav layui-layout-left"><!-- 移动端显示 --></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="" 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></body>
</html>

初步效果：

②添加增加选项卡的方法

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

③对应的左侧标题要添加点击事件

script部分完整代码：

let $,element;layui.use(['jquery','element'],function(){$ = layui.jquery,element = layui.element;$.ajax({url:"permission.action?methodName=menus",dataType:'json',success:function(data){console.log(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:;" onClick="openTab(\''+childern[index].text+'\',\''+childern[index].attributes.self.url+'\',\''+childern[index].id+'\')">'+childern[index].text+'</a></dd>';})html +=' </dl>';}html +='</li>';});$("#menu").html(html);}})});function openTab(title,url,id){let $node = $("li[lay-id='"+id+"']");if($node.length == 0){// 新增一个Tab项element.tabAdd('demo', {title : title,//用于演示content : "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>",id : id}) }//切换到指定选项卡element.tabChange('demo', id);}

④完善标题、重复出现、选中跳转、内容展示问题

首先我们需要绑定对应的Tab选项卡和左侧的标题

方式就是传参数，在点击事件的时候

继续解决当我们对左边菜单选中时，当我们在次选中的话，不应出现重复

方法：进而我们通过id进行判断，如再次选中相同的菜单，只会再次选中，不会重复对我们的方法进行修改

其次就是内容展示的页面跳转了，我们使用iframe来实现这个功能

二、iframe使用

其实就是在添加Tab页的方法content修改一下

  function openTab(title,url,id){let $node = $("li[lay-id='"+id+"']");if($node.length == 0){// 新增一个Tab项element.tabAdd('demo', {title : title,//用于演示content : "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>",id : id}) }//切换到指定选项卡element.tabChange('demo', id);}

然后再点击事件传入数据库中的URL即实现页面跳转（我们必须按照数据库的URL路径来增加对应的jsp页面）

三、登录界面的实现

User实体类：

package com.zking.entity;public class User {private Long id;private String name;private String loginName;private String pwd;private Long rid;public Long getId() {return id;}public void setId(Long id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getLoginName() {return loginName;}public void setLoginName(String loginName) {this.loginName = loginName;}public String getPwd() {return pwd;}public void setPwd(String pwd) {this.pwd = pwd;}public Long getRid() {return rid;}public void setRid(Long rid) {this.rid = rid;}public User() {// TODO Auto-generated constructor stub}public User(Long id, String name, String loginName, String pwd, Long rid) {this.id = id;this.name = name;this.loginName = loginName;this.pwd = pwd;this.rid = rid;}@Overridepublic String toString() {return "User [id=" + id + ", name=" + name + ", loginName=" + loginName + ", pwd=" + pwd + ", rid=" + rid + "]";}}

UserDao：

package com.zking.dao;import java.util.List;import com.zking.entity.User;
import com.zking.util.BaseDao;public class UserDao extends BaseDao<User>{public User login(User user) throws Exception {String sql="select * from t_oa_user where loginName='"+user.getLoginName()+"' and pwd='"+user.getPwd()+"'";List<User> users = super.executeQuery(sql, User.class,null);//根据sql查询符合条件的用户，通常只会返回一条数据return users==null||users.size()==0?null:users.get(0);//       return super.executeQuery(sql, clz, pageBean);}
}

UserAction：


package com.zking.web;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.zking.dao.UserDao;
import com.zking.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.R;
import com.zking.util.ResponseUtil;public class UserAction extends ActionSupport implements ModelDriver<User>{private User user=new User();private UserDao userDao=new UserDao();//   写一个方法处理前台的请求public String login(HttpServletRequest req, HttpServletResponse resp) {try {User u = userDao.login(user);//通过账户名密码查到了用户记录if(u!=null) {
//      登录成功    ResponseUtil.writeJson(resp, R.ok(200, "登录成功"));}else {
//      登录失败    ResponseUtil.writeJson(resp, R.ok(0, "用户名密码错误"));}  } catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp, R.ok(0, "用户名密码错误"));} catch (Exception e2) {e2.printStackTrace();}}return null;}@Overridepublic User getModel() {return user;}}

我们将SCript的内容与jsp页面隔开：

layui.use([ 'jquery', 'layer' ],function() {let $ = layui.jquery, layer = layui.layer;$("#login").click(function() {$.ajax({url : "${pageContext.request.contextPath }/user.action?methodName=login",dataType : 'json',data : {loginName : $("#username").val(),pwd : $("#password").val()},success : function(data) {// console.log(data);if (data.code == 200) {layer.alert(data.msg,{icon : 1});location.href = 'mian.jsp'} else {layer.alert(data.msg,{icon : 2});}}})})})

效果展示：

当我们输入正确的账号密码时进入主界面：

Layui之动态选项卡iframe使用相关推荐

LayUI动态选项卡iframe使用
目录一.tab选项卡 1.查找layui的选项卡页面布局代码-静态 2.添加动态选项卡 3.将选项卡名称换成菜单名 4.重复的tab选项卡不添加,改为选中 5.跳转页面--iframe 二.进一步完 ...
前端框架Layui实现动态表格效果用户管理实例（对表格进行CRUD操作-附源码）
目录一.前言 1.什么是表格 2.表格的使用范围二.案例实现 1.案例分析 ①根据需求找到文档源码 ②查询结果在实体中没有该属性 2.dao层编写 ①BaseDao工具类 ②UserDao编写 3 ...
ajax怎样获得表头信息,layui.table动态获取表头和列表数据示例
layui.table动态获取表头和列表数据示例 2020年07月14日 | 萬仟网IT编程 | 我要评论 ```javascript//表格layui.use('table', function() ...
layui option 动态添加_layui select动态添加option的实例
html 产品类别轻松融容易融快乐融增加产品类别 js //重新渲染表单 function renderForm(){ layui.use('form', function(){ var fo ...
用javascript动态调整iframe高度
当你在页面上使用了iframe之后,一般来说会不希望iframe显示难看的滚动条,以使iframe里面的内容和主页面的内容浑然一体.这时候你会设置 scrolling="no" ...
layui option 动态添加_layuiselect如何动态添加option
这次给大家带来layui select如何动态添加option,layui select动态添加option的注意事项有哪些,下面就是实战案例,一起来看一下. html 产品类别轻松融容易融快乐 ...
IE7下动态创建Iframe时，去除边框
IE7下动态创建Iframe时,去除边框 2008-09-24 12:04 大家都知道,只要设置Iframe的属性:frameborder="0",Iframe就不显示边框,但是当 ...
用javascript 动态改变iframe 的src 属性
原文地址为: 用javascript 动态改变iframe 的src 属性 <iframe id="xx"></iframe> <iframe id= ...
动态生成 iframe；销毁 iframe,释放内存
动态生成 iframe function createIframe(){var iframe = document.createElement("iframe");iframe.s ...

Layui之动态选项卡iframe使用