layui笔记

最新推荐文章于 2022-12-06 17:38:47 发布
最新推荐文章于 2022-12-06 17:38:47 发布
阅读量602 收藏
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51375107/article/details/115768722
版权

layui

一、开始

引入网络中资源

<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.4/dist/css/layui.css">
 
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.6.4/dist/layui.js">

已经导入layui到根目录

<!--导入css-->
<link rel="stylesheet" href="./layui/css/layui.css">
<!--导入js-->
<script src="./layui/layui.js"></script>

模板

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用 layui</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
 
<!-- 你的 HTML 代码 -->
 
<script src="./layui/layui.js"></script>
<script>
layui.use(['layer', 'form'], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg('Hello World');
});
</script> 
</body>
</html>

二、栅格系统

容器

列组合

  1. 定义行: .layui-row
  2. 定义列: .layui-col-md*
    • md表示不同屏幕的标识(xs,sm,md,lg)
    • *标识数量
  3. 每一行被分为十二列，列的总数不能超过12列，超过的话元素会换行
  4. 响应式规则
    • 栅格会自动根据屏幕分辨率选择对应的样式效果

列边距

  • 在行上写: .layui-col-space*
    • *代表的是px值(1-30)

列偏移

  • 在列上写： .layui-col-md-offset*
    • *代表格数

列嵌套

  • 列与列之可以无限嵌套

三、组件

按钮

  • 按钮链接
  • 像任意html元素设定*class=“layui-btn” ,就可以建立一个基础按钮
  • 通过追加格式为 layui-btn-{type} 的class来定义其他按钮风格
    • layui-btn-primary 原始按钮
    • layui-btn-lg 大型
    • layui-btn-radius 圆角
  • 可以设置layui-icon 来添加效地图标

导航

  • 水平导航 layui-nav
    • layui-nav-item 表示的是导航的子项
    • layui-this 表示当前被选中项
    • layui-nav-child 表示的是二级菜单
  • 垂直导航 layui-nav layui-nav-tree
  • 侧边导航 layui-nav layui-nav-tree layui-nav-side
  • 导航的主题色
    • layui-bg-颜色
      • 墨绿：molv
      • 藏青：cyan
      • 艳蓝：blue
  • 面包屑式导航
    • layui-breadcrumb
    • 通过lay-separator="符号"设置面包屑的导航分隔符

选项卡

  • 需要添加element组件
    • layui-tab 表明他是一个选项卡
    • layui-tab-title 选项卡标题
    • layui-this表明该选项初始被选中
    • layui-tab-content 对应选项卡的内容
  • 风格
    • 简单的风格： layui-tab-brief
    • lay-allowClose=“true” 可关闭的选项卡
    • lay-id=“111” lay-id用于实现动态操作

表格

  • class=“layui-table”
  • 常用属性
    • lay-even 隔行换色
    • lay-skin 表格边框风格
      • line 行边框风格
      • row 列边框风格
      • nob 无边框风格
    • lay-size 设置表格尺寸
      • sm
      • lg

表单

  • class=“layui-form”
  • 需要加载form模块
  • 格式
<form class="layui-form" action="">
	<!--这是一个input-->
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
  • 常用属性：
    • required 必填字段
    • lay-verify 需要验证的类型
    • class=“layui-input” 提供通用的样式
    • class=“layui-input-inline” 提供行内样式

输入框

  • type=“text”
  • placeholder 当文本框为空时，提供提示信息
  • autocomplete 表单元素是否自动填充
<input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">

下拉框

  • type=“select”
  • 一个option对应一个选项，option标签的value属性必须有值
  • optgroup标签是提示
  • lay-search 搜索匹配，可以在下拉框上进行搜索
  • disable 把选项设成不可用状态
<select name="quiz">
  <option value="">请选择</option>
  <optgroup label="城市记忆">
    <option value="你工作的第一个城市">你工作的第一个城市？</option>
  </optgroup>
  <optgroup label="学生时代">
    <option value="你的工号">你的工号？</option>
    <option value="你最喜欢的老师">你最喜欢的老师？</option>
  </optgroup>
</select>

复选框

  • type=“checkbox”
  • title代表用来提示的字段
  • check 默认选中
  • disable 表示禁用
  • lay-skin=“primary”
    • primary :原始风格
    • switch: 开关风格
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆"> 
<input type="checkbox" name="" title="禁用" disabled>

单选框

  • type=“radio”
  • 属性title可自定义文本
  • 属性disabled开启禁用
  • 设置value="xxx"可自定义值，否则选中时返回的就是默认的on
<input type="radio" name="sex" value="nan" title="男">
<input type="radio" name="sex" value="nv" title="女" checked>
<input type="radio" name="sex" value="" title="中性" disabled>

行内组装表单项

  • 我认为他还是一个表单项
  • class=“layui-inline”：定义外层行内
  • class=“layui-input-inline”：定义内层行内
<div class="layui-form-item">
 
  <div class="layui-inline">
    <label class="layui-form-label">范围</label>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-form-mid">-</div>
    <div class="layui-input-inline" style="width: 100px;">
      <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
    </div>
  </div>

忽略美化

给标签添加lay-ignore属性该标签就会不受layui的影响，变成原始样式

表单方框式规则

给表单的class添加layui-form-pane,使表单变成方框式的

弹出层

引入方式

  • 作为独立组件使用
    • 如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。
  • layui 模块化使用
    • 如果你使用的是 layui，那么你直接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但需要引入layui.css和layui.js

layer重要参数

/!*
 如果是页面层
 */
layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
//Ajax获取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});
/!*
 如果是iframe层
 */
layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
}); 
/!*
 如果是用layer.open执行tips层
 */
layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});

日期与时间选择

  • 先引用laydate模块
  • 使用laydate的render方法给特定的标签赋日期值
    • elem:代表指定的标签，可以用id，也可以使用dom获取
    • type: 代表获取的是月还是年等等
    • format: 规定时间格式
layui.use("laydate",function(){
				var laydate=layui.laydate;
				laydate.render({
					elem:"#date1",
					type:"day",
					format:"yyyy-MM-dd"
				});
			})

分页

  • 先引用laydate模块
  • 使用laydate的render方法把特定的标签变成分页条
    • elem: 代表指定的标签,可以用id（不需要加#），也可以使用dom
    • count: 代表数据总条数，一般从后台获取
    • limit:每页展示数据条数
    • thmeme: 主题颜色
    • limits:[] 可以让用户设定每页条数，需要加在layout中
    • layout:[] 该属性可自定义分页条,通过向数组中写入元素的方法规定分页条显示那些东西
      • prev: 上一页
      • page: 中间的页数
      • next: 下一页
      • limit:让用户选择每页多少条数据
      • skip : 跳到那一页

四、数据表格

使用

  • 先导入layui的js和css
  • 启用table模块
  • 写一个table标签
  • 给table标签填上相应的值
<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-lg8 layui-col-lg-offset2">
					<table class="layui-table" id="table01"></table>
				</div>
			</div>
		</div>

layui.use("table",function(){
   			var table =layui.table;
   			//加载table示例
   			table.render({
   				elem:"#table01",
   				url:"http://1.116.92.204:8787/clockin/member/getMembers?pageNum=1&pageSize=10",
   				page:"true",
   				cols:[[
   					{field:'id',title:'id',sort:true,width:100},
   					{field:'name',title:'姓名',sort:true,width:160},
   					{field:'qq',title:'QQ',width:130},
   					{field:'state',title:'状态',sort:true,width:80},
   				]],
   			})
   		});

渲染方式

  1. 方法渲染: 用JS方法的配置完成渲染 （推荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。
  2. 自动渲染: HTML配置，自动渲染 无需写过多 JS，可专注于 HTML 表头部分
  3. 转换静态表格: 转化一段已有的表格元素 无需配置数据接口，在JS中指定表格元素，并简单地给表头加上自定义属性即可

属性

layui的table有很多的属性，详细内容请参考官方文档

添加头/行工具栏

  • 首先写一个头/行工具栏
  • 然后通过创建表格时的数据来添加头/行工具栏
<script type="text/html" id="barDemo">
		  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
		  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>
<script type="text/html" id="toolbarDemo">
		<div class="layui-container">
			<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
			<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
			<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
		</div>
</script>
狴犴ys
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Layui的笔记
qq_61576523的博客
03-17 1032
当大家进入layui的时候，看文档的第一眼，就是如何使用layui，首先要想使用layui的话，要先导如layui的文件，这个文件可以在layui的界面中下载，这里就不提供了。要想引入文件的话，首先要写标签，当然还要引入jquery的jar包，这个更不能忘记，他们都是关联的。 我的layui和jquery都放在一个名为js的文件下面。 layui导入： <script type="text/javascrpt" src="js/jquery-1.8.3.js"></script&
allure笔记
yboar的博客
11-01 207
1，打开报告的基础步骤 在文件下打开cmd后，输入 pytest [测试文件名称] -s -q --alluredir=./result/ 所有测试用例完成之后相关数据会被保存在result文件下，输入 allure serve ./result/ 使用之前保存的数据，创建展示报告的网站 2，保存下报告数据，下次可以直接打开网页 在生成result文件之后，输入 allure generate ./result/ -o ./tmp/ --clean 将result文件下的相关数据，制作
LayUI 页面渲染 页面动态修改后渲染 忽略渲染
小九九的博客
04-30 2718
//培训经历增加 $("#trainedAdd").click(function () { var trainedSss = "trainedS" + trainid.toString(); $("#trained").append("<div class='manage_list_bg trainclasss'>" + "&l...
元素标签禁止禁用layui、不让 layui 渲染控件，不让 layui 生效
小熊猫
05-19 732
假如有个表单中，我们有很多元素，我们将这些元素都渲染成了 layui 的样式，但是某些控件，我不想让其渲染，我就想用原始的 HTML 控件，不让 layui 生效，怎么办呢？ 为这个控件加上lay-ignore，比如：<select lay-ignore ...
layui表单
taiyangwojiu的博客
12-13 604
layui表单 使用定义: 在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。 注意: 依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能） 表单控件 控件 含义 ...
layui，Table中下拉框问题。
最新发布
望生帝的博客
12-06 1385
实操：layui，Table中下拉框问题。
layui 表单元素
Charge8的博客
07-03 2004
form结构：点击打开链接 在一个容器中设定class="layui-form"来标识一个表单元素块，并通过内置的form模块来完成各种渲染和交互。 依赖加载模块：form（请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能） <div class="layui-form"> <di...
layui笔记.docx
08-06
layui学习笔记 layui是一个基于JavaScript的前端框架，提供了一系列的UI组件和插件，帮助开发者快速构建Web应用程序。layui的 栅格系统是其核心组件之一，提供了灵活的布局方式，能够满足不同屏幕大小和设备的需求...
Layui2.x讲义代码笔记.zip
03-25
这份“Layui2.x讲义代码笔记”很可能是对这个框架的深入讲解和实例代码集合，旨在帮助开发者更好地理解和使用Layui。 在Layui2.x中，主要知识点包括： 1. **模块化设计**：Layui采用了模块化的开发方式，将各个...
【学习笔记】前端框架LayUI.pdf
09-13
LayUI是一个流行的前端框架，它提供了丰富的UI组件和功能强大的JavaScript插件，帮助开发者快速构建Web应用程序。下面是对LayUI的详细介绍： 1. LayUI概述 LayUI是一个基于HTML/CSS/JS的前端框架，它提供了丰富的...
LayUI学习资料.zip
08-21
本人在b站学习LayUi的代码+笔记
全网最全的layUI整理笔记
03-16
LayUI的整理笔记
Layui-导航
chen2745213271的博客
12-09 5586
这次介绍layui里面的导航栏的样式，首先导航栏的功能依附于element模块，所以想要使用layui的导航栏功能就需要启用该模块，其次是layui的css样式，有了这两样layui里的导航栏就可以正常的使用了，下面我将介绍如何启用模块和css样式的各种用法 首先启用模块，如下图 下面就是HTML的部分了 首先是水平导航栏，在外层使用ul标签并使用class名layui-nav作为导航栏的容器，接着下面的li子标签需要使用class名layui-nav-item，其次layu...
解决Layui框架radio、checkbox、select等组件不能动态显示的办法
深夜学长的csdn
12-25 962
前言 最近在写项目时发现layui框架中对于表单模块给予了内置的一套规则，有时候我们需要在表单元素，如radio、checkbox、select等组件让其动态显示，而作者在执行全选时遇到了一个问题，就是将组件绑定点击事件之后，js修改组件的checked，但是网页中组件元素的样式并没有发生改变，相信你也遇到过这样的问题。 当然layui作者当时是这样解释的 有些时候，你的有些表单元素可能是动态插...
031-表单元素
aihiao的专栏
01-25 690
1. 在一个容器中设定class="layui-form"来标识一个表单元素块, 通过规范好的html结构及CSS类, 来组装成各式各样的表单元素, 并通过内置的form模块来完成各种交互。 2. 表单元素依赖form模块。(请注意: 如果不加载form模块, select、checkbox、radio等将无法显示, 并且无法使用form相关功能)。 3. 表单容器 3.1. form元素添加class="layui-form"属性, 作为layui的表单容器: <form class="
layui禁用输入框_layui 表单模块常见问题
weixin_39850699的博客
12-19 2900
layui 设置select宽度直接设置select外层的宽度就行，layui的select会自适应宽度layui 设置select会被百度编辑器挡住问题是因为百度编辑器把layui的select挡住了，所以设置一下select的z-index就好了/*如果不设置z-index选择框会被挡住*/.layui-form-selecteddl{display:block;z-index:100...
layui数据表格接收不到数据问题
普通还不自信的程序员
08-26 1251
前端数据表格显示无数据时，可能是json对象格式不对。 结果类属性如下 @Data @NoArgsConstructor public class UserResult { private Integer code; private String msg; private Integer count; private List<User> data; public UserResult(Integer code, String msg, Integer
layui监听select下拉选择框
WalnutLin的博客
02-26 3589
layui监听select下拉选择框1、方法一2、方法二 1、方法一 可以用 form.on('select(type)', function(data){ console.log(data.value)//选中的值 }) type为select标签中的lay-filter属性值 该方法保留了layui的样式 2、方法二 用原生js，但先要去掉layui自带的样式和js， 去掉方法：在select标签上加上lay-ignore属性 $('#type').change(function() { }）
小程序中input输入框如何实现文本右对齐
热门推荐
weixin_51375107的博客
07-14 1万+
小程序中偶尔会有让文字右对齐的需求 我们设置input标签的css样式text-align: right;即可 input{ text-align: right; } 当我们只想让输入框中默认字体向右对，其我们可以这样 <input placeholder="请输入" placeholder-style='text-align:right'></input> ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狴犴ys

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值