LayUI之动态选项卡Tabiframe使用
2024-05-12 18:53:17
目录
一，选项卡
1，查找layui的选项卡页面布局代码---静态
2，动态的添加选项卡
3，将选项卡名称换成菜单名
4，重复的选项卡不重复添加，改为选中
5，跳转页面
二，页面代码
一，选项卡
1，查找layui的选项卡页面布局代码---静态
在管网上选择选项卡：
复制代码：
放在eclipse上:
完整代码：
element.tabAdd('demo', {title:'新选项'+(Math.random()*1000|0),//用于演示content:'内容'+(Math.random()*1000|0),id:new Date().getTime()//实际使用一般是规定好的id，这里以时间戳模拟下}) 2，动态的添加选项卡
添加一个点击事件：
完整代码：
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">';htmlstr +='<a class="" href="javascript:;">'+data[i].text+'</a>';//判断节点是否存在子节点if(data[i].hasChildren){htmlstr +='<dl class="layui-nav-child">';let children = data[i].children;$.each(children,function(index,node){htmlstr +='<dd><a href="javascript:;" onClick="openTabs();">'+children[index].text+'</a></dd>';});htmlstr +='</dl>';}htmlstr +='</li>';});$("#menu").html(htmlstr);}});});将增加选项卡的放进有个函数中：
完整代码：
function openTabs(title,url,id){let $node = $("li[lay-id='"+id+"']");
// alert(title+"hkjdjhasj"+url+"adsa"+id);//新增一个tab项element.tabAdd('demo', {title:'新选项'+(Math.random()*1000|0),//用于演示content:'内容'+(Math.random()*1000|0),id:new Date().getTime()//实际使用一般是规定好的id，这里以时间戳模拟下}) }效果（这张图是我敲完代码最后的完整图片，按道理现在的选项卡应该是一个随机数）：
3，将选项卡名称换成菜单名
替换一下点击事件的代码：
代码：
htmlstr +='<dd><a href="javascript:;" onClick="openTabs(\''+children[index].text+'\',\''+children[index].attributes.self.url+'\',\''+children[index].id+'\');">'+children[index].text+'</a></dd>';再修改：
function openTabs(title,url,id){let $node = $("li[lay-id='"+id+"']");
// alert(title+"hkjdjhasj"+url+"adsa"+id);//新增一个tab项element.tabAdd('demo', {title:title,//用于演示content:'内容'+(Math.random()*1000|0),id:new Date().getTime()//实际使用一般是规定好的id，这里以时间戳模拟下}) }效果：
4，重复的选项卡不重复添加，改为选中
function openTabs(title,url,id){let $node = $("li[lay-id='"+id+"']");//新增一个Tab项if($node.length==0){element.tabAdd('demo', {title: title //用于演示,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>",id: id //实际使用一般是规定好的id，这里以时间戳模拟下})}element.tabChange('demo',id);}5，跳转页面
后台代码：
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() {super();// TODO Auto-generated constructor stub}@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 java.util.HashMap;
import java.util.Map;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) {
//
// Map<String, Object> map = new HashMap<String, Object>();
// if("ruojuan".equals(user.getUsername())&& "1234567".equals(user.getPassword())) {
// //登陆成功
// map.put("code", 200);
// map.put("msg","登陆成功");
// }
// else {
// //登陆失败
// map.put("code", 0);
// map.put("msg","登陆失败");
// }
// try {
// ResponseUtil.writeJson(resp, map);
// } catch (Exception e) {
// // TODO Auto-generated catch block
// e.printStackTrace();
// }
// //return super.execute(req, resp);
// return null;
//
// }public String login(HttpServletRequest req,HttpServletResponse resp) {try {User u = userdao.login(user);if(u !=null) {//登陆成功//ResponseUtil.writeJson(resp, new R().data("code",200).data("msg","登陆成功"));ResponseUtil.writeJson(resp,R.ok(200, "成功"));}else {//登陆失败//ResponseUtil.writeJson(resp, new R().data("code",0).data("msg","登陆失败"));ResponseUtil.writeJson(resp,R.error(0, "用户名或密码错误"));}} catch (Exception e) {e.printStackTrace();try {ResponseUtil.writeJson(resp,R.error(0, "用户名或密码错误"));} catch (Exception e1) {e1.printStackTrace();}}return null;}@Overridepublic User getModel() {// TODO Auto-generated method stubreturn user;}}
配置文件：
<?xml version="1.0" encoding="UTF-8"?>
<config><action path="/user" type="com.zking.web.UserAction"></action></config>登陆界面：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!-- 导入文件 -->
<%@ include file = "commom/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"><link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath }/static/css/iconfont.css" type="text/css" media="all"><link rel="stylesheet" rev="stylesheet" href="${pageContext.request.contextPath }/static/css/login.css" type="text/css" media="all">
<script src="static/js/login.js"></script>
<title>Insert title here</title>
<style> body{color:#;}a{color:#;}a:hover{color:#;}.bg-black{background-color:#;}.tx-login-bg{background:url(static/images/bg.jpg) no-repeat 0 0;}</style>
</head><body class="tx-login-bg"><div class="tx-login-box"><div class="login-avatar bg-black"><i class="iconfont icon-wode"></i></div><ul class="tx-form-li row"><li class="col-24 col-m-24"><p><input type="text" id="username" placeholder="登录账号" class="tx-input"></p></li><li class="col-24 col-m-24"><p><input type="password" id="password" placeholder="登录密码" class="tx-input"></p></li><li class="col-24 col-m-24"><p class="tx-input-full"><button id="login" class="tx-btn tx-btn-big bg-black">登录</button></p></li><li class="col-12 col-m-12"><p><a href="#" class="f-12 f-gray">新用户注册</a></p></li><li class="col-12 col-m-12"><p class="ta-r"><a href="#" class="f-12 f-gray">忘记密码</a></p></li></ul></div><script type="text/javascript"></script></body>
</html>登陆界面封装的js：
layui.use(['jquery','layer'],function(){let $ = layui.jquery,layer = layui.layer;$("#login").click(function(){$.ajax({url:"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})}}});});});效果：
输入正确的密码
可以跳转界面：
点击左侧菜单可以跳转页面：
二，页面代码
主界面：
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@include file="commom/header.jsp" %>
<!DOCTYPE html >
<html>
<head>
<script src="static/js/mian.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo">layui 后台布局</div><!-- 头部区域（可配合layui已有的水平导航） --><ul class="layui-nav layui-layout-left"><li class="layui-nav-item"><a href="">控制台</a></li><li class="layui-nav-item"><a href="">商品管理</a></li><li class="layui-nav-item"><a href="">用户</a></li><li class="layui-nav-item"><a href="javascript:;">其它系统</a><dl class="layui-nav-child"><dd><a href="">邮件管理</a></dd><dd><a href="">消息管理</a></dd><dd><a href="">授权管理</a></dd></dl></li></ul><!-- 登录用户信息 --><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 style="padding: 15px;"><div class="layui-tab" lay-filter="demo" lay-allowclose="true"><ul class="layui-tab-title"><li class="layui-this" lay-id="-1">首页</li></ul><div class="layui-tab-content"><div class="layui-tab-item layui-show">首页内容</div></div></div></div></div><div class="layui-footer"><!-- 底部固定区域 -->© layui.com - 底部固定区域</div>
</div>
<script></script>
</body>
</html>
封装的主界面：
完整代码：
//JavaScript代码区域
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">';htmlstr +='<a class="" href="javascript:;">'+data[i].text+'</a>';//判断节点是否存在子节点if(data[i].hasChildren){htmlstr +='<dl class="layui-nav-child">';let children = data[i].children;$.each(children,function(index,node){//htmlstr +='<dd><a href="javascript:;" onClick="openTabs();">'+children[index].text+'</a></dd>';htmlstr +='<dd><a href="javascript:;" onClick="openTabs(\''+children[index].text+'\',\''+children[index].attributes.self.url+'\',\''+children[index].id+'\');">'+children[index].text+'</a></dd>';});htmlstr +='</dl>';}htmlstr +='</li>';});$("#menu").html(htmlstr);}});});/** 1，查找layui的选项卡页面布局代码---静态* 2，动态的添加选项卡* 3，将选项卡名称换成菜单名* 4，重复的选项卡不重复添加，改为选中* 5，跳转页面*/function openTabs(title,url,id){let $node = $("li[lay-id='"+id+"']");
// alert(title+"hkjdjhasj"+url+"adsa"+id);//新增一个tab项
// element.tabAdd('demo', {
// title:'新选项'+(Math.random()*1000|0),//用于演示
// content:'内容'+(Math.random()*1000|0),
// id:new Date().getTime()//实际使用一般是规定好的id，这里以时间戳模拟下
// }) //新增一个Tab项if($node.length==0){element.tabAdd('demo', {title: title //用于演示,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>",id: id //实际使用一般是规定好的id，这里以时间戳模拟下})}element.tabChange('demo',id);}LayUI之动态选项卡Tabiframe使用相关推荐
- 【LayUI】之动态树动态选项卡Tabiframe使用
目录 1.左侧导航 2.导入数据表及无限级分类 3.实现左侧菜单后台代码 4.前端左侧菜单绑定 附录一: 附录二:判断选项卡是否已经打开 1.什么是Tab选项卡 2.Tab分类 附录一:什么是lay- ...
- Layui之动态选项卡iframe使用
目录 一.Tab选项卡 二.iframe使用 三.登录界面的实现 一.Tab选项卡 1.什么是Tab选项卡 Tab广泛应用于Web页面,因此我们也对其进行了良好的支持(简约风格.卡片风格.响应式Tab ...
- 前端框架Layui实现动态表格效果用户管理实例（对表格进行CRUD操作-附源码）
目录 一.前言 1.什么是表格 2.表格的使用范围 二.案例实现 1.案例分析 ①根据需求找到文档源码 ②查询结果在实体中没有该属性 2.dao层编写 ①BaseDao工具类 ②UserDao编写 3 ...
- LayUI动态选项卡iframe使用
目录 一.tab选项卡 1.查找layui的选项卡页面布局代码-静态 2.添加动态选项卡 3.将选项卡名称换成菜单名 4.重复的tab选项卡不添加,改为选中 5.跳转页面--iframe 二.进一步完 ...
- 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 ...
- layui option 动态添加_layuiselect如何动态添加option
这次给大家带来layui select如何动态添加option,layui select动态添加option的注意事项有哪些,下面就是实战案例,一起来看一下. html 产品类别 轻松融 容易融 快乐 ...
- 解决layui前端动态设置radio、checkbox默认选项的解决方案
前几天接触一个二次开发,后台UI用的是layui框架,程序原来的TAG标签设置中自由输入的,想修改为单选.这样子的功能用于,一个产品属于两种分类的作法.第一种就是系统自带的产品分类,第二种使用标签来实 ...
- layui tab选项卡外部html页面,layui的Tab选项卡知识
layui的公共类: lay-filter=" " 事件过滤器.你可能会在很多地方看到他,他一般是用于监听特定的自定义事件.你可以把它看作是一个ID选择器 layui的公共属性: ...
- layui select动态赋值_layui与 VUE 配合使用时动态渲染 select 坑
使用v-model 动态渲染元素后, 刷新from:layui.form.render(), 一定要刷新from <form class="layui-form" actio ...
最新文章
- 有空间感的图片环形滚动代码
- php5.5 mysql密码无法_php – Mysql无法连接 – 访问被拒绝(使用密码是)
- vs2010中编译zint的问题
- 使用SharedPreferences进行数据存储
- C/C++判断操作系统(Win10,Win8.1WinServer等等)-完整源码及思路
- java 虚拟内存不够,java虚拟内存不足
- NLP《词汇表示方法（五）GloVe》
- swift java_swift语法和java的比较
- android 4.0 屏蔽home键实现
- 完成中国福利彩票快三的程序设计
- c语言实验报告问题错误分析,C语言实验报告
- Oracle彻底卸载干净教程
- sessionid java_java如何获取sessionid
- 中国省市区县行政编码sql脚本
- 两个向量之间的夹角公式_Python 计算任意两向量之间的夹角方法
- 名帖172 李建中 行书《土母帖》
- CSS3之自定义英文字体@font-face
- pythonturtle画小丸子_小丸子成长记---在stylus下用DIV+CSS一步一步打造小丸子
- 卡梅隆大学计算机排名,2022卡梅隆大学全美排名多少(研究生院)
- ELK-EFK-v7.12.0日志平台部署