Layui 踩坑篇
关注
分享
扫一扫
文章平均质量分 69
layui是一个“经典模块化前端 UI 框架”，这里总结项目开发进程中遇到的各种踩坑。
草巾冒小子
你的打赏，正在生成下个技术方案
展开
-
layui 日期格式不正确（date、datetime）区别
layui 日期格式不正确（date、datetime）区别问题截图：如下文代码二代码示下：<div class="layui-form-item"> <label class="layui-form-label">最后登录时间</label> <div class="layui-input-block"> 代码一： <input type="text" name="date" id="LAY-mypanel-message原创 2021-11-03 22:34:18 · 2285 阅读 · 1 评论 -
Layui 文档（含镜像站资源）
Layui 文档（含镜像站资源）资源分享：Layui 在线文档：镜像站（优）统计镜像站 · 【强烈推荐】Layui镜像站：https://www.layui.siteLayer:https://www.layui.site/layer/index.htmMobile:https://www.layui.site/layer/mobile/index.htmLayui文档：https://www.layui.site/doc/index.htmLayui示例：https://www.l原创 2021-10-20 18:30:00 · 998 阅读 · 0 评论 -
layuiAdmin + echarts动态数据：柱状图 应用
layuiAdmin + echarts动态数据：柱状图 开发（含案例、代码、截图）项目需求：用layuiAdmin框架写的后台，需要把返回的基金数据用echarts模块，实现页面可视化与数据实时更新。对于echarts.js官方而言，单独实现这个官方demo看似很轻松；但问题是，如何在layuiAdmin框架内整合该模块进而实现需要的功能？一、案例截图：二、文件bar.js代码：/** @Name：layuiAdmin EchartsV5.0+集成 @Author：前端技原创 2021-08-19 11:09:24 · 3392 阅读 · 0 评论 -
layui + echarts股票K线图（含案例、代码、截图）（转载篇）
文章目录layui + echarts股票K线图（含案例、代码、截图）（转载篇）一、案例、代码、截图经验 · 补充说明：layui + echarts股票K线图（含案例、代码、截图）（转载篇）转载地址：layuiAdmin + echarts股票K线图（案例篇）他使用layui框架，去layui官方购买admin授权版很方便一、案例、代码、截图转载地址：layuiAdmin + echarts股票K线图（案例篇）经验 · 补充说明：我直接对echart提供的示例编辑代码转载 2021-08-17 12:25:22 · 948 阅读 · 0 评论 -
解决layui隐藏域：不显示问题（含案例、代码、截图）
layui 隐藏域：不显示问题（案例篇）自定义的隐藏域不显示？只需要给隐藏域添加一个layui-input类名即可，其他不用改变。案例 · 效果图：代码示下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale原创 2021-08-10 10:48:27 · 2851 阅读 · 0 评论 -
layui弹框提示层：倒计时（layui-font-red颜色定义）
layui弹框提示层：倒计时（layui-font-red颜色定义）官方文档：https://layer.layui.com/效果图 · 截图示下：以上就是关于“ layui弹框提示层：倒计时（layui-font-red颜色定义） ”的全部内容。原创 2021-07-31 22:09:18 · 829 阅读 · 0 评论 -
layui进度条：调用、参数设置、动态渲染、数据热更新 （含案例、代码）
文章目录layui进度条：经验总结 （含案例、代码）案例截图：案例 · 代码：背景 · 设置：动态操作 · 文档截图：使用说明：layui进度条：经验总结 （含案例、代码）引言：组件如何设置调用？如何设置背景类？如何自定义提示文本？<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">如何实现 js动态操作？【动态操作进度条】讲述的是一个已经设置了过滤器（lay-filter=“demo”原创 2021-08-09 16:40:15 · 5676 阅读 · 0 评论 -
layui复选框：被js操作checked切换并显示状态（含案例、代码）
文章目录layui复选框：被js操作checked切换并显示状态 （含案例、代码）案例截图：案例 · 代码：背景 · 设置：动态操作 · 文档截图：使用说明：layui复选框：被js操作checked切换并显示状态 （含案例、代码）引言：1.应用案例；案例截图：案例 · 代码：背景 · 设置：动态操作 · 文档截图：使用说明：注意事项分析 · 总结 · 如下：以上就是关于“ layui复选框：被js操作checked切换并显示状态（含案例、代码）”的全部内容原创 2021-08-09 16:39:03 · 1028 阅读 · 0 评论 -
layui复选框组件：如何操控隐藏域实现checked状态切换（含代码、案例、截图）
文章目录layui复选框组件：原生js实现checked状态操作（含代码、案例、截图）案例 · 应用场景 · 说明：案例 · 截图 · 示下主要代码 · 示下：使用说明：博主自留：layui复选框组件：原生js实现checked状态操作（含代码、案例、截图）实现原生js对接老项目，+新框架layui的综合应用；案例 · 应用场景 · 说明：因为项目年久失修，部分逻辑代码无法重构，只能跟随老旧业务逻辑；为了使用新框架，并契合＜1%绝少部分的老旧代码，特此需要使用原生javascript或原生原创 2021-08-09 16:38:11 · 1250 阅读 · 0 评论 -
layui弹出层：使用icon图标小结
文章目录layui弹出层：icon图标小结表格示下：调用代码 · 效果图 · 示下：layui弹出层：icon图标小结layui的弹框插件layer中，有很多不同场景需要的弹框icon图标，今天小结一下，方便以后使用；官方文档地址：https://layer.layui.com/表格示下：icon截图 · 说明建议场景icon: 调用代码调用代码示例1默认：无图标任意默认：无需设置默认：无需设置2警示提醒类0icon: 03原创 2021-08-09 16:37:09 · 2332 阅读 · 0 评论 -
layui表格使用：经验总结（含案例、代码、截图）
文章目录layui表格使用：经验总结（含案例、代码、截图）一、原生table案例1.1. 原生table案例 · 效果截图：1.2. 原生table案例 · 代码示下：二、案例转化：layui-table，使用 · `经验总结：`2.1. 如何将原生table直接实时转化为layui-table?2.2. layui-table表格：各种边框设置layui表格使用：经验总结（含案例、代码、截图）引言 · 问题：html原生表格table如何实时转换为layui-table表格？转化的开关在哪里原创 2021-08-09 16:36:40 · 3525 阅读 · 0 评论 -
layui弹出层：倒计时后自动关闭（含代码、案例）
layui弹出层：倒计时后自动关闭（含代码、案例）问题描述：如何设定倒计时？如何在自动倒计时结束后关闭弹框；如何自定义“按钮文字”文案；如何在关闭后，执行函数事件；如何设置、修改、自定义皮肤？其他重要未提及内容。一、不自动关闭 · 代码方案：1.1. 代码方案：layer.msg('你今天获取验证码次数已达到上限！', { time: 0 //不自动关闭 ,btn: ['我知道了'] ,yes: function(index){ layer.close(i原创 2021-07-31 22:09:50 · 2397 阅读 · 0 评论 -
layui弹出层：皮肤扩展（文档解读）
layui弹出层：皮肤扩展（文档解读）layui弹出层：样式自定义官方文档：https://layer.layui.com/皮肤扩展 · 官方教程：官方文档：https://layer.layui.com/skin.html教程如下：自定义皮肤说明/* 自定义皮肤说明 */layer 提供了强健的皮肤扩展属性，这意味着如果你对 layer 默认的样式不太满意，你还有更多的选择。 一：命名文件夹在 layer 的 skin 目录建立一个文件夹，假设您将该文件夹命名为：原创 2021-07-31 22:10:25 · 1430 阅读 · 0 评论 -
layui自带验证体系：手机号验证、邮箱验证、必填项非空验证、数字验证（含代码、案例）
layui自带验证体系：手机号验证、邮箱验证、必填项非空验证、数字验证（含代码、案例）案例 · 截图：实例代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>更改手机-排原创 2021-07-31 22:10:53 · 5714 阅读 · 0 评论 -
layui响应式：隐藏与显示（class 类名后缀）
文章目录layui响应式：隐藏与显示官方文档 · 地址：1.1. 转化前：小尺寸，隐藏1.2. 转化前：大尺寸，显示2.1. 转化后：小尺寸，隐藏2.2. 转化后：大尺寸，显示案例 · 效果截图：代码示例：重要代码 · 使用说明：注意bug：layui响应式：隐藏与显示在指定宽度的屏幕显示或者隐藏某个元素；1. 隐藏class类名：layui-hide-后缀2. 显示class类名：layui-show-后缀官方文档 · 地址：https://www.layui.com/doc原创 2021-08-09 16:42:35 · 9553 阅读 · 0 评论 -
layui实现select下拉选择框组件（含代码、案例、截图）
layui实现select下拉选择框组件（含代码、案例、截图）案例 · 效果图：全部代码如下：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>select下拉框组件<原创 2021-08-09 16:41:31 · 4870 阅读 · 0 评论 -
layui横线：带标题的横线（含代码、案例）
layui横线：带标题的横线（含代码、案例）官方文档：https://www.layui.com/doc/element/auxiliar.html案例· 截图：代码示下：/* 分割线（含标题的分割线） */.site-border-default fieldset{border-top: 1px solid #eee;}.site-border-red fieldset{border-top: 1px solid #FF5722;}.site-border-orange fie原创 2021-07-31 22:13:52 · 1692 阅读 · 0 评论 -
layui表单验证 && 内置自定义规则 - 使用说明
关于 layui表单的验证规则、调用、自定义规则的使用经验总结：除了 layui 本身配套的一个验证体系，还支持开发者自定义验证规则（如上表中的【自定义密码验证（代码参考下文）】），并直接嵌入到页面的js代码中。验证表单对象 · 都有哪些？如何调用规则和验证？ 如下表所示：验证表单对象 / 元素部分重要验证规则的设定代码调用实例（参考下文的代码实例）其他注解说明...原创 2019-01-24 16:06:26 · 37227 阅读 · 0 评论 -
layui入门基础：资源汇总
这里主要收集了些layui资源，可用于入门进阶学习和做项目的参考。以上就是关于“ layui基础 资源汇总 ” 的全部内容。原创 2019-01-14 17:51:14 · 1015 阅读 · 0 评论