Layui-页面元素规范与说明

最新推荐文章于 2024-01-01 12:27:05 发布
最新推荐文章于 2024-01-01 12:27:05 发布
阅读量1.4k 收藏 2
点赞数 1
文章标签： c# layui css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57725431/article/details/121619982
版权

Layui提倡返璞归真，遵循于原生态的元素书写规则，所以通常而言，你仍然是在写基本的HTML和CSS代码，不同的是，在HTML结构上及CSS定义上需要小小遵循一定的规范。

CSS内置公共基础类

类名（class） 说明
布局 / 容器
layui-main 用于设置一个宽度为 1140px 的水平居中块（无响应式）
layui-inline 用于将标签设为内联块状元素
layui-box 用于排除一些UI框架（如Bootstrap）强制将全部元素设为box-sizing: border-box所引发的尺寸偏差
layui-clear 用于消除浮动（一般不怎么常用，因为layui几乎没用到浮动）
layui-btn-container 用于定义按钮的父容器。（layui 2.2.5 新增）
layui-btn-fluid 用于定义流体按钮。即宽度最大化适应。（layui 2.2.5 新增）
辅助
layui-icon 用于图标
layui-elip 用于单行文本溢出省略<
最低0.47元/天 解锁文章
加油，少年！
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Layui事件监听（表单和数据表格）
深蓝旭的博客
03-11 8687
一、表单的事件监听 先介绍一下几个属性的用法 1、lay-filter 事件过滤器 相当于选择器，layui的专属选择器 2、lay-verify 验证属性 属性值可以是 ：required必填项， phone手机号，email邮箱，url网址，number数字，date日期，identity身份证。这个相当于正则判断，当然你也可以定义自己的正则，做一些复杂的判断，例如： <input type="text" lay-verify="required"> //这里写requir.
lay-filter
weixin_39844092的博客
10-22 92
用于区分组件 例子： <table class="layui-table" id="tableList" lay-filter="tableList"></table> //监听行双击事件table.on('rowDouble(tableList)', function (obj) { active.view(obj.data);}); ...
lay-submit
滕青山博客
03-22 9654
<input type="text" lay-verify="email"> <input type="checkbox" checked lay-skin="switch" lay-filter="encrypt" title="是否加密"> <button lay-submit>提交</button> 上述的lay-verify、lay-skin、lay-filter、lay-submit神马的都是我们所说的预设的元素属性，他们可以使得一些交互操作交由.
转载: Layui 事件监听lay-filter 验证lay-verify
代码笔记
06-21 327
原文地址:
Layui表单验证及提交
foxbamboo的博客
10-13 3004
查了很多人写的，真是试了各种方法，最后在这个帖子里看到的方法起了作用。 看代码： html页面 导入layui相关包后，关键代码是“ 保存”按钮中的 lay-filter=“saveArticle” lay-submit <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:mo="https://gitee.com/aun/Timo"> <head> <li
layui-v2.5.6
07-04
layui相关资源
layui-v2.5.5_layui前端模板_substanceb4u_layui-v2.5.5_wplayui-v2.5.5_
10-01
layui前端模板，提供了各种前端插件的使用实例以及使用模板
layui-高级表格-soul-table.rar
12-06
layui 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心...
laravel-layui-admin:基于Laravel，Layui构建的RBAC后台管理系统
03-11
Laravel-layui-admin 基于Laravel，Layui构建的RBAC基础后台管理系统。 如果你想要vue版本的后台系统，移步 截图 要求 最低支持laravel5.8，支持6.0 安装 首先安装laravel，并确保您配置了正确的数据库连接。 ...
layui-soul-table:layui-table 表头筛选、列顺序调整、列快速隐藏、excel导出等
05-05
给 layui-table 注入点灵魂 当前layui版本 v2.5.6 在线demo及文档： 国内下载地址: 扩展功能 表头筛选、自定义条件（支持前端筛选、后台筛选介绍请看 ） 拖动列调整顺序、隐藏显示列 excel导出（根据筛选条件和列...
layui表单2个按钮分别提交怎么做不同验证
weixin_43988238的博客
09-01 1345
layui表单2个按钮分别提交怎么做不同验证 1.业务场景 审核页面，一个是“通过”，一个是“拒绝”按钮, <input type="button" id="ty" lay-submit lay-filter="ty" value="同意"/> <input type="button" id="jj" lay-submit lay-filter="jj" value="拒绝"/> /** * 表单提交,同意 */
layui的表单中的一些常见的标签的含义，含在线实战。
最新发布
谁偷了我的小熊饼干
01-01 699
lay-submit和lay-filter组合使用实现表单的提交,表单的检验。
layui中，lay-filter的使用，一个form表单中两个单选框，form.on()事件
我是一只蘑菇17的博客
10-20 741
需求：需要按照类型和专业查询信息。所以需要两个单选框，进行选择。在单选框中，每一个都要加lay-filter用于区别两个单选框。如果你只有一个单选框，那就不用区分，直接可以写。lay-filter是用于区分的，相当于。
layui的form表单提交问题
weixin_51964457的博客
05-20 7402
layui表单
layui-表单
博客园: https://www.cnblogs.com/fger/
06-14 329
首先不管是单选框还是复选框或者是下拉框，都要在你写的标签外面套一层div或者是form标签，如： &amp;amp;lt;div class=”layui-input-block”&amp;amp;gt;&amp;amp;lt;input type=”radio” name=”sex” value=”0” title=”男”&amp;amp;gt;&amp;amp;l
layui表单提交到后台
热门推荐
liqz666的博客
10-17 7万+
思路:我在开发问卷调查模块时，想添加问卷的时候使用layui弹出一个表单,然后经过校验提交到ssm下的Controller里 一：jsp要弹出的表单 &lt;button id="add" class="layui-btn layui-btn-sm"&gt;添加问卷&lt;/button&gt; &lt;div class="layui-row" id="test" style=&
Layui表单提交问题
骜蛟的博客
01-30 3982
踩过的坑 1、Layui的form表单提交问题 ​ 在提交表单数据时，提交按钮为 submit 类型，以layui为js框架时，会重复提交表单数据。如何解觉这一问题？以下给出我认为便捷的三种方法： 设置button的type=button，否则默认submit，就会重复提交 在监听提交的form.on里加上return flase form.on("submit(formDemo)",function(data){ //do something return false; });
layui源码详细分析系列之element模块以及自定义事件机制
玉案轩窗的博客
07-27 1万+
element内置模块时layui框架中页面元素的交互功能的实现，主要是选项卡、面板、导航等的交互的实现。下面先分析element模块的组织结构，具体如下图所示： 从上图中可以看出，element模块使用该框架自己的模块加载机制来加载该模块。该框架内置的模块都是采用面向对象的编程，该模块也是，定义了Element构造函数，对外的API接口都定义在Element的原型对象上，使用JQuery来绑定一
layui框架学习
du_ai_me的博客
07-06 653
layui框架学习
if (d.groundingState == 0 || d.groundingState == 3) {//layui-btn-disabled edit result = `<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="add">上架</a> <a class="layui-btn layui-btn-xs layui-btn-danger layui-btn-disabled">下架</a> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="det">详情</a>` } else if (d.groundingState == 1) { result = `<a class="layui-btn layui-btn-xs layui-btn-disabled edit">编辑</a> <a class="layui-btn layui-btn-xs layui-btn-disabled edit">上架</a> <a class="layui-btn layui-btn-xs layui-btn-danger layui-btn-disabled">下架</a> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="det">详情</a>` } else if (d.groundingState == 2) { result = `<a class="layui-btn layui-btn-xs layui-btn-disabled edit">编辑</a> <a class="layui-btn layui-btn-xs layui-btn-disabled edit">上架</a> <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">下架</a> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="det">详情</a>` } else if (d.groundingState == 4 || d.groundingState == 5) { result = `<a class="layui-btn layui-btn-xs layui-btn-disabled edit">编辑</a> <a class="layui-btn layui-btn-xs layui-btn-disabled edit">上架</a> <a class="layui-btn layui-btn-xs layui-btn-disabled">下架</a> <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="det">详情</a>` }优化一下
06-09
const btnDisabledClass = "layui-btn layui-btn-xs layui-btn-disabled"; const editBtn = `<a class="layui-btn layui-btn-xs edit">编辑</a>`; const addBtn = `<a class="layui-btn layui-btn-xs layui-bg-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值