LayUI中的内置模块之 常用元素操作 - layui.element

2023-10-27

前言

最近在准备找工作的事项,但是作为一个后台也是需要了解一些前端框架的。就目前的来说有大火的VUE,但是VUE还是存在一定的学习成本,所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手,后面会考虑使用VUE+ElementUI做一个大型一点的SAAS系统。查阅资料后得到如下文章,作为学习记录使用。

常用元素操作

页面中有许多元素需要自动去完成一些处理,譬如导航菜单的小滑块、Tab 的切换等操作,他们往往不需要去单独调用一个方法来开启一项功能,而页面上恰恰有太多这样的小交互,所以我们统一归类为 element 组件。
模块加载名称:element

快速使用

元素功能的开启只需要加载element模块即会自动完成,所以不用跟其它模块一样为某一个功能而调用一个方法。她只需要找到她支持的元素,如你的页面存在一个 Tab元素块,那么element模块会自动赋予她该有的功能。

<div class="layui-tab" lay-filter="demo">
  <ul class="layui-tab-title">
    <li class="layui-this">网站设置</li>
    <li>商品管理</li>
    <li>订单管理</li>
  </ul>
  <div class="layui-tab-content">
    <div class="layui-tab-item layui-show">内容1</div>
    <div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
  </div>
</div>

前提是你要加载element模块

layui.use('element', function(){
  var element = layui.element;
  
  //一些事件触发
  element.on('tab(demo)', function(data){
    console.log(data);
  });
});
预设元素属性

我们通过自定义元素属性来作为元素的功能参数,他们一般配置在容器外层,如:

<div class="layui-tab" lay-allowClose="true" lay-filter="demo">…</div>      
<span class="layui-breadcrumb" lay-separator="|"></span>
 
 And So On

element 模块支持的元素如下表:
在这里插入图片描述

基础方法

基础方法允许你在外部主动对元素发起一起操作,目前element模块提供的方法如下:
在这里插入图片描述
在这里插入图片描述

更新渲染

跟表单元素一样,很多时候你的页面元素可能是动态生成的,这时element的相关功能将不会对其有效,你必须手工执行 element.init(type, filter) 方法即可。注意:2.1.6 开始,可以用 element.render(type, filter); 方法替代

第一个参数:type,为表单的type类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表:

在这里插入图片描述

element.init(); //更新全部  2.1.6 可用 element.render() 方法替代
element.render('nav'); //重新对导航进行渲染。注:layui 2.1.6 版本新增
//……

第二个参数:filter,为元素的 lay-filter="" 的值。你可以借助该参数,完成指定元素的局部更新。

【HTML】
<div class="layui-nav" lay-filter="test1">
  …
</div>
 
<div class="layui-nav" lay-filter="test2">
  …
</div>
      
【JavaScript】
//比如当你对导航动态插入了二级菜单,这时你需要重新去对它进行渲染
element.render('nav', 'test1'); //对 lay-filter="test1" 所在导航重新渲染。注:layui 2.1.6 版本新增
//……      
事件触发

语法:element.on(‘event(过滤器值)’, callback);

element 模块在 layui 事件机制中注册了element 模块事件,所以当你使用 layui.onevent() 自定义模块事件时,请勿占用 element 名。目前 element 模块所支持的事件如下表:
在这里插入图片描述
默认情况下,事件所触发的是全部的元素,但如果你只想触发某一个元素,使用事件过滤器即可。
如:

element.on('tab(test)', function(data){
  console.log(data);
});
触发选项卡切换

Tab选项卡点击切换时触发,回调函数返回一个object参数,携带两个成员:
element.on(‘tab(filter)’, function(data){
console.log(this); //当前Tab标题所在的原始DOM元素
console.log(data.index); //得到当前Tab的所在下标
console.log(data.elem); //得到当前的Tab大容器
});

触发选项卡删除

Tab选项卡被删除时触发,回调函数返回一个object参数,携带两个成员:

element.on('tabDelete(filter)', function(data){
  console.log(this); //当前Tab标题所在的原始DOM元素
  console.log(data.index); //得到当前Tab的所在下标
  console.log(data.elem); //得到当前的Tab大容器
});

注:该事件为 layui 2.1.6 新增

触发导航菜单的点击

当点击导航父级菜单和二级菜单时触发,回调函数返回所点击的菜单DOM对象:

element.on('nav(filter)', function(elem){
  console.log(elem); //得到当前点击的DOM对象
});
触发折叠面板

当折叠面板点击展开或收缩时触发,回调函数返回一个object参数,携带三个成员:

element.on('collapse(filter)', function(data){
  console.log(data.show); //得到当前面板的展开状态,true或者false
  console.log(data.title); //得到当前点击面板的标题区域DOM对象
  console.log(data.content); //得到当前点击面板的内容区域DOM对象
});
动态操作进度条

你肯定不仅仅是满足于进度条的初始化显示,通常情况下你需要动态改变它的进度值,element模块提供了这样的基础方法:element.progress(filter, percent);。

<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true">
  <div class="layui-progress-bar" lay-percent="0%"></div>
</div>
 
上述是一个已经设置了过滤器(lay-filter="demo")的进度条
现在你只需要在某个事件或者语句中执行方法:element.progress('demo', '50%');
即可改变进度

官网链接

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

LayUI中的内置模块之 常用元素操作 - layui.element 的相关文章

  • layui的框架导入

    目录 1 导入步骤 2 框架包含的组件 1 导入步骤 1 1 下载框架包 http www layui com 1 2 将layui文件夹拷入项目位置 1 3 页面中导入 layui all js layui css 和 jquery 即可
  • layui中关于table表格reload后有缓存问题的解决办法

    问题描述 我在父窗口的table中的数据渲染方式不是异步请求后端 而是直接从后端加载数据 渲染到模板的时候直接渲染的 也就是下图中的data tableDatas 如下图 表格渲染 table render elem mytable tex
  • LayUi之手风琴的趣味案例

    Welcome Huihui s Code World 接下来看看由辉辉所写的关于LayUi的相关操作吧 目录 Welcome Huihui s Code World 一 手风琴是什么 二 手风琴在什么时候使用 常见使用场景 三 怎么完成手
  • 基于LayUI+Servlet的权限管理系统的设计

    权限管理是所有后台系统的都会涉及的一个重要组成部分 主要目的是对不同的人访问资源进行权限的控制 避免因权限控制缺失或操作不当引发的风险问题 如操作错误 隐私数据泄露等问题 本系统基于JSP Servlet JDBC LayUI的技术 在系统
  • layUI基本使用——布局

    layui特点 1 layui属于轻量级框架 简单美化 是用于开发后端模式 它在服务端页面上有非常好的效果 2 layui是提供给后端开发人员的ui框架 基于DOM驱动 layui的使用 引入layui的核心css文件 引入layui的he
  • layui+PHP文件上传

    layui官方网站 http www layui com 一个很好的前端框架 现在也出了后台模板 收费 值得我们学习和借鉴 非常感谢作者 贤心 的开源和维护 一 下载layui部署到项目 在页面引入layui css和layui js 二
  • java毕业设计,基于layui+SSM实现母婴商场系统

    以下是我今年的论文加作品源码 感谢阅读 如需要源码学习 和本论文进行参考 可私聊我 如遇什么不懂的 我很乐意帮助你 让我们一起成长 目录 摘 要 ABSTRACT 1 绪论 1 1 研究背景 1 2 研究意义 1 3 国内外研究现状 2 开
  • layui 前端下载文件方法

    文件下载 function downLoadFile ids name 获取token var tableName layui data setter tableName 创建下载请求 var oReq new XMLHttpRequest
  • layui日期多选

    先引入layui的css和js html部分 div class layui inline div
  • xShell操作Linux的常用命令

    我们需要在本地连接Linux服务器 可以用winscp来进行连接 优点是图形化界面 文件的层级关系类似于Windows 更容易操作 也可以使用xShell来进行连接 查看和操作文件就需要使用Linux命令 文件的层级关系没有前者直观 但作为
  • layui 手风琴折叠

    效果图 1 引入文件 注意 文件的位置不一样 引入的路径也不同 2 编写div样式 div style width 100 div class layui collapse div class layui c div div div
  • OA项目之项目整体业务分析【附项目原型图演示】

    Welcome Huihui s Code World 接下来看看由辉辉所写的关于OA项目的相关操作吧 目录 Welcome Huihui s Code World 一 项目简介 1 目的 2 人员名词解释 3 主界面展示 二 会议管理 1
  • 解决layui轮播图满屏是高度自适应的问题

    在做官网时 遇到轮播图的问题 本来自己写了个轮播图 怎奈有个问题 当我打开页面后去浏览其他页面 回来首页后会有图片会来回闪动 没有正确轮播 一直没有解决 后来看到了layui插件的轮播图 就拿过来用了 但是图片高度不会自适应 图片变形 如图
  • 解决width: 100%;再设置margin问题

    最近在做前端 遇到了这么个小问题 就是当我们把一个 div 的 width 设置为 100 之后 再设置 margin 的时候 这个div 莫名其妙的超出了屏幕 情景如下图 这就很难受了啊 不过办法总比困难多 下面 我将讲两种解决方法 方法
  • layui 数据表格 sort排序,filter过滤——soulTable

    1 效果图 2 页面代码 div class fp table style margin left 0 5 width 86 table style margin bottom 0px table div 3 js代码 引入扩展组件 lay
  • 使用layui/layuiAdmin的总结

    layui是一个前端UI框架 主要是配合JQuery使用 开始使用 首先是下载文件 然后引入css和js文件 引入之后就需要在
  • 会议OA项目----我的审批

    前言 上一篇博客我将我的会议的送审和会议排座这两个功能完成 送审之后就到了审批阶段 那么这次做的就是 我的审批 一 实现思路 根据产品原型图 见产品原型图 我的审批界面与我的会议界面大同小异 那么我们可以调用之前的写好的SQL语句 只不过将
  • layui switch 设置默认开关属性

    给元素定义ID switch order var flag true if flag document getElementById switch order setAttribute checked on else document ge
  • layui php+PHPExcel 拉取excel表格数据一键导入

    需求 大量数据需要导入数据库 直接拉取excel表格进行读取数据并存入数据库 过程中不对文件进行存储 使用上传过程中的缓存文件 前端代码 layui php
  • layui与flask模板语言{{}}冲突的最佳方案

    使用 Jinja2的 raw 和 endraw 标签把 JavaScript 模板部分标记出来即可 raw endraw 但这是就需要注意区分项目中的 的值是jinja2还是layui

随机推荐

  • Element框架更换主题色

    Element 默认的主题色是鲜艳 友好的蓝色 但是UI小姐姐在设计的时候会为了更贴合项目主旨设计出其他颜色的主题色 比如新能源项目一般选用绿色做为主题色 此时我们就需要更改Element框架的主题色 一开始博主的想法是全局修改框架默认样式
  • JDBC连接各种数据库

    ConnectHSQLDB java Java代码 ConnectHSQLDB java package com javaworkspace connecthsqldb import java sql Connection import j
  • /usr/lib64/sa/sa2脚本解释

    文章目录 前言 脚本原文 脚本解释 前言 usr lib64 sa sa1脚本和 usr lib64 sa sa2脚本都是Linux 系统上的 sysstat 工具的一部分 在 etc cron d sysstat这个定时任务下执行 用来收
  • arm+linux swap出错问题

    今天 程序跑了两个小时 忽然出现如下信息 swap dup Bad swap file entry 002fdf80 VM killing process intrusion test swap free Bad swap file ent
  • Android-S模拟器

    0 前言 参考资料 1 基于Android P对Emulator的使用进行了说明 Android S情况有变 因此撰写本文进行记录 1 编译 根据参考资料 1 的方法编译 aosp x86 64 eng 完成后执行emulator无法正常进
  • 南京美食,为吃遍天下做准备~~

    标点美食地址 1 羊肉泡馍 长白街348号有家 老陕家 面馆 郑和公园北面 肉加馍 2 蓝空饭店 三条巷那边 稻香鸭 红烧老鹅 韭香脆皮鸡 是很好的还有一个叫什么牛肉粒的也好吃昏的了 3 山西炸酱面馆 顺着流行青年广场旁的天桥走到马路对面
  • 【阅读笔记】联邦学习实战——构建公平的大数据交易市场

    联邦学习实战 构建公平的大数据交易市场 前言 1 大数据交易 1 1 数据交易定义 1 2 数据确权 1 3 数据定价 2 基于联邦学习构建新一代大数据交易市场 3 联邦学习激励机制助力数据交易 4 FedCoin支付系统设计 4 1 Po
  • stm32 SystemInit函数详解

    官方固件库中的对应函数为 void SystemInit void Reset the RCC clock configuration to the default reset state for debug purpose Set HSI
  • 终于明白协方差的意义了

    转自 https blog csdn net GoodShot article details 79940438 协方差其意义 度量各个维度偏离其均值的程度 协方差的值如果为正值 则说明两者是正相关的 从协方差可以引出 相关系数 的定义 结
  • 程序员必读书目推荐

    1 Effective Java Joschua 稍许过时 但没有替代java方面的书 2 Effectvie C Scott Meyer 3 More Effective C Scott Meyer的书是非常非常好书 每次读都感到汗颜 自
  • Vue 动态锚点

    这是封装的组件 判断容器的滚动 接收父组件传来的Tab参数
  • Qt Quick里的图形效果——混合(Blend)

    Blend 元素用指定的模式混合两个 Item 在我们使用 QPainter 绘图时 支持 Composition Modes Blend 干的事儿与此类似 使用 Blend 需要 import QtGraphicalEffects 1 0
  • IDEA导入MySQL的jdbc驱动出现“java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver”

    目录 一 一般的解决思路 1 JDBC下载链接 2 选择下载内容 并进行下载 3 将驱动导入java项目 二 依然导入驱动失败怎么办 当我们在idea中使用java操作mysql数据库时会出现 Exception in thread mai
  • 自动驾驶多边形iou计算Shapely库笔记

    参考 https cloud tencent com developer ask 42755 https blog csdn net u014421797 article details 89501572 https www itransl
  • MMDetection= Cuda10.0.130 + Pytorch1.4.0 + torchvision0.5.0 + mmcv-full1.1.6 + mmdet2.5.0

    1 版本选取 MMDetection的版本选择 安装的时候 需要选择合适的版本 下载不同版本的MMDetection 从 Github 的历史版本中选择合适的版本 https github com open mmlab mmdetectio
  • Python之线程编程(Thread)

    线程基本概念 1 什么是线程 1 线程被称为轻量级的进程 2 线程也可以使用计算机多核资源 是多任务编程方式 3 线程是系统分配内核的最小单元 4 线程可以理解为进程的分支任务 2 线程特征 1 一个进程中可以包含多个线程 2 线程也是一个
  • Untiy UDP局域网 异步发送图片

    同步画面有问题 传图片吧 using System Text using System Net Sockets using System Collections using System Collections Generic using
  • WSL2 Ubuntu中apt update命令报错,无法解析域名解决方法

    参考链接 参考链接 1 sudo apt get update失败 在ubuntu16中 当我们输入sudo apt get update会失败 这里有很多原因 1 网络原因 先检查网络好不好用 2 ubuntu16 自带的源不好用 或者有
  • 大数据技术学习代码记录——Scala

    文章目录 一 Scala 二 Day01代码记录 2 1 HelloWord scala 2 1 1 TestHelloWorld scala 2 2 ifelse scala 2 3 PrintStudentInfo scala 三 Da
  • LayUI中的内置模块之 常用元素操作 - layui.element

    前言 最近在准备找工作的事项 但是作为一个后台也是需要了解一些前端框架的 就目前的来说有大火的VUE 但是VUE还是存在一定的学习成本 所以决定先从对后台友好的LayUI开始入手先做一些小项目练练手 后面会考虑使用VUE ElementUI