目录
一、Tab选项卡
二、iframe使用
三、登录界面的实现
一、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" "/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="///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});}}})})})
效果展示：
当我们输入正确的账号密码时进入主界面：
