Layui-页面元素规范与说明

最新推荐文章于 2024-06-30 01:25:09 发布
最新推荐文章于 2024-06-30 01:25:09 发布
阅读量1.4k 收藏 2
点赞数 1
文章标签： c# layui css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57725431/article/details/121619982
版权
本文档介绍了Layui框架在编写HTML和CSS时需要遵循的规范，包括CSS内置公共基础类的使用，命名规范，以及HTML结构和公共属性的要求。通过遵循这些规则，可以更好地与Layui的组件和功能配合，确保代码的正确性和可维护性。
摘要由CSDN通过智能技术生成

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-v2.5.4.zip
06-29
同时，layui也支持AMD和CMD模块化规范，便于与RequireJS、Sea.js等模块加载器配合使用。 "文档与示例"目录则是layui的官方文档和实例代码，通常包括详细的使用指南、API参考以及各种应用场景的示例代码。通过这些...
页面元素
m0_46350939的博客
10-19 210
CSS命名规范： class命名前缀：layui，连接符：-，如：class=“layui-form” 命名格式一般分为两种：一：layui-模块名-状态或类型，二：layui-状态或类型。因为有些类并非是某个模块所特有，他们通常会是一些公共类。如：一（定义按钮的原始风格）：class=“layui-btn layui-btn-primary”、二（定义内联块状元素）：class=“layui-inline” 大致记住这些简单的规则，会让你在填充HTML的时候显得更加得心应手。另外，如果你是开发Layui拓
layui中，lay-filter的使用，一个form表单中两个单选框，form.on()事件
热门推荐
Prodigal
04-16 9万+
lay-filter是用于区分的，相当于选择器一样。 需求：需要按照类型和专业查询信息。所以需要两个单选框，进行选择。 在单选框中，每一个都要加lay-filter用于区别两个单选框。 点击事件：用于区分 如果你只有一个单选框，那就不用区分，直接可以写 前端菜鸟。啥都不会。 ...
【Layui】Layui如何做异步按钮
最新发布
tttzzzqqq2018的博客
06-30 442
在这个示例中，我们绑定了一个async-btn的过滤器到按钮上，当按钮被点击时，会触发一个异步的表单提交。我们使用了layer.load来显示一个加载图标，表示正在进行操作。操作完成后，根据服务器的响应状态使用layer.msg显示相应的提示信息。注意，我们使用$.post来发送异步请求，并且最后返回false来阻止表单的默认同步提交行为。在Layui框架中，可以通过使用form模块的submit方法来实现异步按钮。你需要为按钮绑定一个click事件，并在事件处理函数中调用form.submit方法。
Layui事件监听（表单和数据表格）
深蓝旭的博客
03-11 9272
一、表单的事件监听 先介绍一下几个属性的用法 1、lay-filter 事件过滤器 相当于选择器，layui的专属选择器 2、lay-verify 验证属性 属性值可以是 ：required必填项， phone手机号，email邮箱，url网址，number数字，date日期，identity身份证。这个相当于正则判断，当然你也可以定义自己的正则，做一些复杂的判断，例如： <input type="text" lay-verify="required"> //这里写requir.
Layui框架学习
一个人走的博客
09-11 2967
本笔记只记比较难的 选项卡 layui的element对象有什么用？ 请点击查看 常用元素操作是个什么鬼，从官方解释简单来说就是在页面中有一些动态的效果，当然不是我们说的动态网页那个动态，这些动态效果呢，就是通过我们去加载element模块以后，默认为页面的这些元素添加的一些动态效果，比如layui文档顶部的导航下部的小滑块的效果 lay-filter=“demo” 是类似于id的意思，可用于标记 ...
第一章 使用layui的表格和表单
目小温的博客
08-09 3559
0809
layui通过lay-submit lay-filter=“action“监听失败的处理
inroll的专栏
09-03 4370
在layui表单中加入 <button type="button" class="layui-btn layui-btn-sm" lay-submit lay-filter="action">...</button> 并在js脚本中添加了 form.on('submit(action)',function (data) {return false;} 结果直接触发表单提交，多次尝试后发现，layui在表单处理时，先进行表单验证，后处理事件监听。由于表单在此button后存
layui-tinymce.zip
06-16
4. **自定义皮肤**：为了保持与layui整体风格的一致性，你可能需要定制tinymce的皮肤，使其符合layui的设计规范。tinymce允许自定义皮肤，你可以修改其提供的皮肤CSS文件，或者创建新的皮肤。 5. **功能扩展**：...
layui-2.8.11.zip
07-25
layui-2.8.11（layui-v2.8.11.zip、layui-2.8.11.zip、layui-2.8.11.tar.gz...确切地说，它更多是面向于追求简单的务实主义者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。
layui-v2.5.6.zip
08-26
1. layui的模块化规范： layui引入了模块化的概念，将功能拆分为独立的模块，如表格、表单、按钮、图标等。每个模块都有自己的HTML结构、CSS样式和JavaScript逻辑，使得代码组织更加清晰，易于维护和扩展。 2. ...
layui-用户登录界面响应式动画模板
06-01
1. 表单设计：layui提供了完整的表单控件，如输入框、密码框、验证码输入等，可以方便地创建出符合规范的登录表单。 2. 提示信息：通过layui的提示组件，可以在用户输入时实时显示错误或成功信息，提升用户操作的...
layui框架使用方法详解
01-07 2万+
前言 首先我们先了解一下什么是layui。 layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。 layui框架结构 ├─css //css目录 │ ...
layui.table 头部工具栏与行工具栏的实例
weixin_44533365的博客
06-13 1万+
书接上文，话说这 layui 建好数据表格之后，后面往往还要加上几个按钮，上面可能还有个批量删除什么的，今天主要来说说这些功能是怎么实现的。 首先是html页面，还是就一个空 table ，代码如下： <table id="layTable" lay-filter="tableTest"></table> 生成数据表格的 js 代码如下： function table()...
layui的表单中的一些常见的标签的含义，含在线实战。
谁偷了我的小熊饼干
01-01 776
lay-submit和lay-filter组合使用实现表单的提交,表单的检验。
layui实现分页，筛选功能
loveisbunny的博客
11-30 4289
layui实现分页筛选操作
lay-filter
SharkArmy
10-22 123
用于区分组件 例子： <table class="layui-table" id="tableList" lay-filter="tableList"></table> //监听行双击事件table.on('rowDouble(tableList)', function (obj) { active.view(obj.data);}); ...
layui绑定指定下拉框lay-filter属性触发事件
king_miQ的博客
04-03 4943
var form = layui.form, layer = layui.layer; form.on('select(Add_company)', function (data) { { alert(123); } }); HTML中下拉框添加layui的 lay-filter="Add_company"属性 具体如下 ...
lay-submit
hello world
03-22 9743
<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神马的都是我们所说的预设的元素属性，他们可以使得一些交互操作交由.
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
可以将重复出现的代码进行封装，减少代码的冗余。例如，可以将按钮的class属性提取出来，写成一个变量，然后在生成按钮时直接使用该变量。同时，也可以使用模板字符串来简化代码。优化后的代码如下： ```javascript 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-orange" lay-event="add">上架</a>`; const delBtn = `<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">下架</a>`; const detBtn = `<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="det">详情</a>`; if (d.groundingState == 0 || d.groundingState == 3) { result = `${editBtn} ${addBtn} <a class="${btnDisabledClass}">下架</a> ${detBtn}`; } else if (d.groundingState == 1) { result = `<a class="${btnDisabledClass} edit">编辑</a> <a class="${btnDisabledClass} edit">上架</a> <a class="${btnDisabledClass}">下架</a> ${detBtn}`; } else if (d.groundingState == 2) { result = `<a class="${btnDisabledClass} edit">编辑</a> <a class="${btnDisabledClass} edit">上架</a> ${delBtn} ${detBtn}`; } else if (d.groundingState == 4 || d.groundingState == 5) { result = `<a class="${btnDisabledClass} edit">编辑</a> <a class="${btnDisabledClass} edit">上架</a> <a class="${btnDisabledClass}">下架</a> ${detBtn}`; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值