Layui之动态选项卡&iframe使用

最新推荐文章于 2024-08-03 13:41:47 发布

秃头没秃头

最新推荐文章于 2024-08-03 13:41:47 发布

阅读量2.5k

点赞数

文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/weixin_66110079/article/details/125869857

版权

一、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" "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;
	}

	@Override
	public 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;
	}
	
	@Override
	public 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
																			});
														}
													}
												})
									})
				})

效果展示：