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 的相关文章

  • 简单制作后台系统页面(含菜单)

    第一步 制作数据库表 我个人喜欢在PowerDesigner先建好数据库模型 然后导入到mysql里 导入方式 在PowerDesigner导航栏点开Datebase选择Datebase Generation再选择最后的preview 然后
  • Layui之选项卡案例 详细易懂

    本期精彩 利用Layui框架实现动态选项卡 继上一篇已经实现了左边的树形菜单栏 这一关卡我们已通过 接下来就是实现右边的动态选项卡的关卡 上个关卡的效果及链接 链接 http t csdn cn tYccL 目录 本期精彩 利用Layui框
  • layui中关于table表格reload后有缓存问题的解决办法

    问题描述 我在父窗口的table中的数据渲染方式不是异步请求后端 而是直接从后端加载数据 渲染到模板的时候直接渲染的 也就是下图中的data tableDatas 如下图 表格渲染 table render elem mytable tex
  • 会议OA项目之会议发布(多功能下拉框的详解)

    Welcome Huihui s Code World 接下来看看由辉辉所写的关于OA项目的相关操作吧 目录 Welcome Huihui s Code World 一 主要功能点介绍 二 效果展示 三 前端代码 jsp js 四 后端代码
  • Layui项目实战

    使用语言 C Js Html 使用框架 MVC Layui 使用插件 JQuery Layui 一 Layui父窗体前端代码 1 Html代码 div class layui col md12 style padding 8px div c
  • layui文档,最新文档地址,官网已经下线

    最新文档地址 官网已经下线了 http layui shagua wiki layuidoc doc index html
  • layui 前端下载文件方法

    文件下载 function downLoadFile ids name 获取token var tableName layui data setter tableName 创建下载请求 var oReq new XMLHttpRequest
  • layui显示表格数据的id的两种形式

    1 获取数据库表字段id field id title 用户ID width 100 fixed left align center templet function d return d id 2 templet属性获得id为 title
  • layui table 跨页、翻页记忆选择

    示例 table class layui table table layui 需要初始化的 form layui form layfilter layui layfilter table render
  • layui跨域问题

    由于浏览器存在同源策略 所以如果 layui 里面含图标字体文件 所在的地址与你当前的页面地址不在同一个域下 即会出现图标跨域问题 所以要么你就把 layui 与网站放在同一服务器 要么就对 layui 所在的资源服务器的 Response
  • LayUI之CRUD(增删改查)

    目录 前言 一 前端静态模板 二 用户管理后台代码 查看表 MySQL数据库 表结构 实体类 Dao方法 UserDao 查询 增加 删除 修改 测试后台dao方法 Junit UserDaoTest 查询 增加 修改 删除 web 三 用
  • 2021-12-23 工作记录--LayUI-单击行内容展示子表(手风琴效果),堪称yyds

    LayUI 单击行内容展示子表 手风琴效果 百度了好多办法 都不能达到这种效果 所以记录一下 最开始使用layui soul table 但是它不能实现单击行内容展示子表 而是单击行最左列展示子表 所以与项目不符 则放弃了 但是感兴趣的小萝
  • LayUI系列(一)之layui介绍以及登录功能的实现

    文章目录 一 layui简介 1 1 layui介绍 1 2 主要构成 1 3 迭代历程 1 4 layui easyui和bootstrap对比 1 4 1 layui与bootstrap对比 这两个都属于ui渲染框架 1 4 2 lay
  • 让Layui的table模块支持动态表头

    layui自带的table js插件是不支持的 这里我们简单的加几个字符进去 就可以支持了 1 打开插件目录下的layui lay modules目录 用文本文件打开table js 然后搜索 item2 title 在table js将
  • LayUi介绍&前言

    目录 1 什么是layui 2 layui easyui与bootstrap的对比 有趣的对比方式 嘿嘿嘿 easyui jquery html4 用来做后台的管理界面 半老徐娘 bootstrap jquery html5 美女 拜金 l
  • 使用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
  • js常用正则表达式 匹配多个汉字、数字、英文、所有字符(附带Layui中form的表单验证)

    常用正则表达式 转自 菜鸟工具 https c runoob com front end 854 一 校验数字的表达式 数字 0 9 n位的数字 d n 至少n位的数字 d n m n位的数字 d m n 零和非零开头的数字 0 1 9 0
  • uview的select组件选择问题

    官方文档羞涩难懂 直接用拖拽工具 对于常用的表单组件 可直接帮你生成相关事件 时间 单列多列等选择器等支持数据回显功能 免开发 在拖拽面板中的 formitem 表单项中 转载 uniapp页面速成提效工具 uniapp uview ui

随机推荐

  • 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