技术标签： javascript 开发语言 ecmascript
目录
在项目中我们需要编写许多页面，在页面中有许多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab的切换等操作。他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以在Layui框架中统一归类为element组件。跟表单一样，基于元素属性和事件驱动的接口书写方式。
1. element基础方法
基础方法允许你在外部主动对元素发起一起操作，目前element模块提供的方法如下：
| 方法名 | 描述 |
|---|---|
| var element = layui.element; | element模块的实例 返回的element变量为该实例的对象，携带一些用于元素操作的基础方法 |
| element.on(filter, callback); | 用于元素的一些事件监听 |
| element.tabAdd(filter, options); | 用于新增一个Tab选项 element.tabAdd('demo', { title: '选项卡的标题' ,content: '选项卡的内容' //支持传入html ,id: '选项卡标题的lay-id属性值' }); |
| element.tabDelete(filter, layid); | 用于删除指定的Tab选项 element.tabDelete('demo', 'xxx'); //删除 lay-id="xxx" 的这一项 |
| element.tabChange(filter, layid); | 用于外部切换到指定的Tab项上，参数同上，如：
|
| element.progress(filter, percent); | 用于动态改变进度条百分比： element.progress('demo', '30%'); |
2. 更新渲染
跟表单元素一样，很多时候你的页面元素可能是动态生成的，这时element的相关功能将不会对其有效，你必须手工执行 element.init(type, filter) 方法即可。
注意：2.1.6 开始，可以用 element.render(type, filter); 方法替代
第一个参数：type，为表单的type类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表：
| 参数（type）值 | 描述 |
|---|---|
| tab | 重新对tab选项卡进行初始化渲染 |
| nav | 重新对导航进行渲染 |
| breadcrumb | 重新对面包屑进行渲染 |
| progress | 重新对进度条进行渲染 |
| collapse | 重新对折叠面板进行渲染 |
二、动态实现选项卡
继 上篇博客 实现的导航栏，本篇实现点击左侧列表跳转到指定区域功能。
要求：
点击左侧导航栏显示对象选项卡
再次点击不会出现重复内容并跳转到指定区域
可删除选项卡
1. 优化dao类
继篇博客优化了menus方法。因为需要根据指定导航栏跳转到指定选项卡界面，而TreeVo节点构建类没有此属性，所以增加了map集合将对象保存起来，这样不管该对象内有多少属性TreeVo类的集合都能拿到。
package com.xzs.dao;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.xzs.entity.Permission;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.PageBean;
import com.zking.util.TreeVo;
/**
* @author
*
* @2023年7月12日 上午11:11:54
*/
public class PermissionDao extends BaseDao<Permission>{
/**
* 获取数据库数据
* @param p
* @param pageBean
* @return
* @throws Exception
*/
public List<Permission> list(Permission p, PageBean pageBean) throws Exception {
String sql = "select * from t_oa_permission where 1=1";
return super.executeQuery(sql, Permission.class, pageBean);
}
/**
* 将数据库查询的平级数据，转换成有父子关系的数据
* @param permission
* @param pageBean
* @return
* @throws Exception
*/
public List<TreeVo<Permission>> menus(Permission permission, PageBean pageBean) throws Exception{
List<TreeVo<Permission>> list = new ArrayList<TreeVo<Permission>>();
//获取的数据库集合
List<Permission> per = this.list(permission, pageBean);
for (Permission p : per) {
TreeVo<Permission> vo = new TreeVo<>();
//设置节点类内容并添加到节点集合
vo.setId(p.getId()+"");//设置节点id
vo.setText(p.getName()); //设置节点文本
vo.setParentId(p.getPid()+"");//设置父节点
//设置map集合存储permission对象
Map<String , Object> map = new HashMap<String, Object>();
map.put("self", p);
//将集合设置到vo对象中
vo.setAttributes(map);
list.add(vo);
}
//返回节点构建好的数据
return BuildTree.buildList(list, "-1");
}
}<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/common/head.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>OA系统管理主界面</title>
<script src="static/js/main.js"></script>
<style>
/* 隐藏第一个tab标签删除图标 */
.layui-tab-title>li:first-child>i {
display: none;
}
</style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">xzs会议OA系统</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"> xzs
</a>
<dl class="layui-nav-child">
<dd>
<a href="">我的信息</a>
</dd>
<dd>
<a href="">会议</a>
</dd>
<dd>
<a href="login.jsp">退出</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 style="padding: 15px;">
<div class="layui-tab" lay-filter="openTab" 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 class="layui-footer">
<!-- 底部固定区域 -->
<div class="layui-footer" style="text-align: center;">
</div>
</div>
</div>
</div>
</body>
</html>这里分装了需要导入的css、js和base标签
作用：
简化代码，因为每个页面都需要导入该内容，很繁琐。
base标签可以防止分离的js代码找不到指定路径
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- 引入 layui.css -->
<link rel="stylesheet"
href="${pageContext.request.contextPath }/static/js/layui/css/layui.css" />
<!-- 引入 layui.js -->
<script
src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>
<!-- 对于js文件，其中请求的路径，前面都会添加项目名，根路径是WebContent -->
<base href="${pageContext.request.contextPath }/" />
<input id="ctx" type="hidden" value="${pageContext.request.contextPath }">/*扩大权限*/
var element,layer,util,$;
layui.use(['element', 'layer', 'util'], function(){
element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
$.post("${pageContext.request.contextPath}/permission.action?methodName=menus",
function(data){
//将json串转换成数组对象
var per = $.parseJSON(data);
//拼接左侧导航栏
var htmlStr = "";
$.each(per,function(i,n){
htmlStr+="<li class=\"layui-nav-item layui-nav-itemed\">";
htmlStr+="<a class='' href=\"javascript:;\">"+n.text+"</a>";
//判断如果子级是否有值
if(n.hasChildren){
var children = n.children;
//遍历子级内容
htmlStr+="<dl class=\"layui-nav-child\">";
$.each(children,function(i,n){
//在每个导航栏设置选项卡点击事件
htmlStr+="<dd><a href=\"javascript:;\" onclick=\"openTab('"+n.text+"','"+n.attributes.self.url+"','"+n.id+"')\">"+n.text+"</a></dd>";
})
htmlStr+="</dl>";
}
htmlStr+="</li>";
})
//替换原来标签内容
$("#menu").html(htmlStr);
//因为要修改之前元素的内容，防止数据出不来需要进行渲染结构传入目标容器的选择器和数据。
element.render("menu");
})
});
/*打开选项卡方法*/
function openTab(title,url,id){
//获取选项卡元素
let $node = $("li[lay-id='"+id+"']");
//判断只有没有改元素使才添加
if($node.length == 0){
//定义增加选项卡组件
element.tabAdd('openTab', {
title: title
,content: "<iframe frameborder='0' src='"+url+"' scrolling='auto' style='width:100%;height:100%;'></iframe>"
,id: id
})
}
element.tabChange('openTab', id); //切换到：用户管理
}文章浏览阅读3.2k次。本文研究全球与中国市场分布式光纤传感器的发展现状及未来发展趋势，分别从生产和消费的角度分析分布式光纤传感器的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产商的市场份额。主要生产商包括：FISO TechnologiesBrugg KabelSensor HighwayOmnisensAFL GlobalQinetiQ GroupLockheed MartinOSENSA Innovati_预计2026年中国分布式传感器市场规模有多大
文章浏览阅读1.1k次，点赞2次，收藏12次。常用组合逻辑电路结构——为IC设计的延时估计铺垫学习目的：估计模块间的delay，确保写的代码的timing 综合能给到多少HZ，以满足需求！_基4布斯算法代码
文章浏览阅读3.3k次，点赞3次，收藏5次。OpenAI Manager助手（基于SpringBoot和Vue）_chatgpt网页版
文章浏览阅读2.2k次。USACO自1992年举办，到目前为止已经举办了27届，目的是为了帮助美国信息学国家队选拔IOI的队员，目前逐渐发展为全球热门的线上赛事，成为美国大学申请条件下，含金量相当高的官方竞赛。USACO的比赛成绩可以助力计算机专业留学，越来越多的学生进入了康奈尔，麻省理工，普林斯顿，哈佛和耶鲁等大学，这些同学的共同点是他们都参加了美国计算机科学竞赛（USACO)，并且取得过非常好的成绩。适合参赛人群USACO适合国内在读学生有意向申请美国大学的或者想锻炼自己编程能力的同学，高三学生也可以参加12月的第_usaco可以多次提交吗
文章浏览阅读394次。1.1 存储程序1.2 创建存储过程1.3 创建自定义函数1.3.1 示例1.4 自定义函数和存储过程的区别1.5 变量的使用1.6 定义条件和处理程序1.6.1 定义条件1.6.1.1 示例1.6.2 定义处理程序1.6.2.1 示例1.7 光标的使用1.7.1 声明光标1.7.2 打开光标1.7.3 使用光标1.7.4 关闭光标1.8 流程控制的使用1.8.1 IF语句1.8.2 CASE语句1.8.3 LOOP语句1.8.4 LEAVE语句1.8.5 ITERATE语句1.8.6 REPEAT语句。_mysql自定义函数和存储过程
文章浏览阅读188次。半导体二极管——集成电路最小组成单元。_本征半导体电流为0
文章浏览阅读2.8k次，点赞3次，收藏18次。游戏水面特效实现方式太多。咱们这边介绍的是一最简单的UV动画（无顶点位移），整个mesh由4个顶点构成。实现了水面效果（左图），不动代码稍微修改下参数和贴图可以实现岩浆效果（右图）。有要思路是1，uv按时间去做正弦波移动2，在1的基础上加个凹凸图混合uv3，在1、2的基础上加个水流方向4，加上对雾效的支持，如没必要请自行删除雾效代码(把包含fog的几行代码删除)S..._unity 岩浆shader
文章浏览阅读5k次。广义线性模型是线性模型的扩展，它通过连接函数建立响应变量的数学期望值与线性组合的预测变量之间的关系。广义线性模型拟合的形式为：其中g(μY)是条件均值的函数（称为连接函数）。另外，你可放松Y为正态分布的假设，改为Y 服从指数分布族中的一种分布即可。设定好连接函数和概率分布后，便可以通过最大似然估计的多次迭代推导出各参数值。在大部分情况下，线性模型就可以通过一系列连续型或类别型预测变量来预测正态分布的响应变量的工作。但是，有时候我们要进行非正态因变量的分析，例如：（1）类别型.._广义线性回归模型
文章浏览阅读69次。环境保护、 保护地球、 校园环保、垃圾分类、绿色家园、等网站的设计与制作。 总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码（有用点赞△） 一套A+的网_垃圾分类网页设计目标怎么写
文章浏览阅读614次，点赞7次，收藏11次。之前找到一个修改 exe 中 DLL地址 的方法, 不太好使,虽然能正确启动, 但无法改变 exe 的工作目录,这就影响了.Net 中很多获取 exe 执行目录来拼接的地址 ( 相对路径 ),比如 wwwroot 和 代码中相对目录还有一些复制到目录的普通文件 等等,它们的地址都会指向原来 exe 的目录, 而不是自定义的 “lib” 目录,根本原因就是没有修改 exe 的工作目录这次来搞一个启动程序,把 .net 的所有东西都放在一个文件夹,在文件夹同级的目录制作一个 exe._.net dll 全局目录
文章浏览阅读1.5k次。本文为转载，原博客地址：http://blog.csdn.net/hujingshuang/article/details/46910259简介 BRIEF是2010年的一篇名为《BRIEF:Binary Robust Independent Elementary Features》的文章中提出，BRIEF是对已检测到的特征点进行描述，它是一种二进制编码的描述子，摈弃了利用区域灰度..._breif description calculation 特征点
文章浏览阅读4.1k次，点赞21次，收藏79次。本文是《基于SpringBoot的房屋租赁管理系统》的配套原创说明文档，可以给应届毕业生提供格式撰写参考，也可以给开发类似系统的朋友们提供功能业务设计思路。_基于spring boot的房屋租赁系统论文