Layui个人入门学习记录

最新推荐文章于 2024-03-12 23:59:33 发布

Silence-114

最新推荐文章于 2024-03-12 23:59:33 发布

阅读量753

点赞数 1

分类专栏： layui 文章标签： layui 前端 javascript

本文链接：https://blog.csdn.net/Strivedd/article/details/124936492

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

官网：https://layuion.com/

此篇仅为个人学习记录，具体文档参考官网文档。

01 layui简介

Layui的简介

Layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。

02 layui下载和目录文件介绍

获取layui，在官网首页下载，也可通过GitHub和码云得到layui的完整开发包，或采用npm安装。

官网：https://layuion.com/

目录结构

├─css //css目录

│ └─modules //模块css目录

│ └─layui.css //核心样式文件

├─font //字体图表目录

└─layui.js //基础核心库

03 layui功能演示

最终实现基于layui项目的增删改查基础功能。

04 layui环境搭建

新建一个web项目，将layui完整部署到项目目录，引入layui.css和layui.js。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Layui环境初始化</title>
		<!-- 引入layui -->
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
	</head>
	<body>
		<!-- 引入layui的js库 -->
		<script  src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
	</body>
</html>

05 layui中模块的概念

layui定义为经典模块化，一般推荐使用layui的模块规范建立一个入口文件，并通过layui.use()方式来加载该入口文件。

06 layui的布局文件

1）布局元素

Layui是一套响应式的前端框架，布局采用响应式框架通用的栅格系统进行布局，引入容器的概念，栅格系统和其他响应式框架一样将容器在水平方向进行12等分，将水平分为12列，可以满足当前绝大多数的设备屏幕的适配。

容器（2种）

<!-- 固定宽度并且居中的容器 -->
<div class="layui-container" style="height: 200px;background-color: red;">
			
</div>
		
<!-- 宽度不固定100%适应的容器 -->
<div class="layui-fluid" style="height: 200px;background-color: pink;">
			
</div>

行

<div class="layui-row">

</div>

列

layui-col-lg* //*代表当前占12列中的多少列的宽度桌面>=1200px

layui-col-md* //桌面>=992px

layui-col-sm* //平板>=768px

layui-col-xs* //手机<768px

列偏移

layui-col-md-offset* //*代表当前列向右偏移多少列

列嵌套

            <!-- 行 -->
			<div class="layui-row">
				<div class="layui-col-md3" style="height: 200px;background-color: blue;">
					<!-- 列嵌套 -->
					<div class="layui-row">
						<div class="layui-col-md6" style="height: 100px;background-color: #00F7DE;">
							
						</div>
						<div class="layui-col-md6" style="height: 80px;background-color: purple;">
							
						</div>
						
					</div>
				</div>
				<div class="layui-col-md9" style="height: 200px;background-color: yellow;">
					
				</div>
			</div>

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Layui环境初始化</title>
		<!-- 引入layui -->
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
	</head>
	<body>
		<!-- 固定宽度并且居中的容器 -->
		<div class="layui-container" style="height: 300px;background-color: red;">
			<!-- 行 -->
			<div class="layui-row">
				<div class="layui-col-md3" style="height: 200px;background-color: blue;">
					<!-- 列嵌套 -->
					<div class="layui-row">
						<div class="layui-col-md6" style="height: 100px;background-color: #00F7DE;">
							
						</div>
						<div class="layui-col-md6" style="height: 80px;background-color: purple;">
							
						</div>
						
					</div>
				</div>
				<div class="layui-col-md9" style="height: 200px;background-color: yellow;">
					
				</div>
			</div>
		</div>
		
		<!-- 宽度不固定100%适应的容器 -->
		<div class="layui-fluid" style="height: 200px;background-color: pink;">
			
		</div>
		
		<hr>
		<div class="layui-container">
			<div class="layui-row">
				<!-- 列偏移，想要B内容区且居中 -->
				<!-- <div class="layui-col-md4" style="height: 200px;background-color: pink;">
					A内容区
				</div> -->
				
				<div class="layui-col-md4 layui-col-md-offset4" style="height: 200px;background-color: palevioletred;">
					B内容区
				</div>
				
				<!-- <div class="layui-col-md4" style="height: 200px;background-color: paleturquoise;">
					C内容区
				</div> -->
				
			</div>
			
		</div>
		
		<!-- 引入layui的js库 -->
		<script  src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
	</body>
</html>

效果图

07 layui的字体图标

2）其他样式元素

字体图标，具体查找见官网文档，通常对一个内联元素（一般推荐用i标签）设定class="layui-icon"来定义一个图标，然后对元素加上对应的font-class，还可以定义其颜色和大小

图标使用

<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>

08 layui的按钮

官网介绍了两个基础标签作为按钮的元素

用法

<button type="button" class="layui-btn">一个标准的按钮</button>

<a href="" class="layui-btn">一个可跳转的按钮</a>

主题

名称	组合
原始	class="layui-btn layui-btn-primary"
默认	class="layui-btn"
百搭	class="layui-btn layui-btn-normal"
暖色	class="layui-btn layui-btn-warm"
警告	class="layui-btn layui-btn-danger"
禁用	class="layui-btn layui-btn-disabled"

名称	组合
主色	class="layui-btn layui-btn-primary layui-border-green"
百搭	class="layui-btn layui-btn-primary layui-border-blue"
暖色	class="layui-btn layui-btn-primary layui-border-orange"
警告	class="layui-btn layui-btn-primary layui-border-red"
深色	class="layui-btn layui-btn-primary layui-border-black"

尺寸

尺寸	组合
大型	class="layui-btn layui-btn-lg"
默认	class="layui-btn"
小型	class="layui-btn layui-btn-sm"
迷你	class="layui-btn layui-btn-xs"

尺寸	组合
大型百搭	class="layui-btn layui-btn-lg layui-btn-normal"
正常暖色	class="layui-btn layui-btn-warm"
小型警告	class="layui-btn layui-btn-sm layui-btn-danger"
迷你禁用	class="layui-btn layui-btn-xs layui-btn-disabled"

尺寸	组合
大型百搭	class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"
小型警告	class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger"
迷你禁用	class="layui-btn layui-btn-xs layui-btn-radius layui-btn-disabled"

流体按钮

<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>

圆角

主题	组合
原始	class="layui-btn layui-btn-radius layui-btn-primary"
默认	class="layui-btn layui-btn-radius"
百搭	class="layui-btn layui-btn-radius layui-btn-normal"
暖色	class="layui-btn layui-btn-radius layui-btn-warm"
警告	class="layui-btn layui-btn-radius layui-btn-danger"
禁用	class="layui-btn layui-btn-radius layui-btn-disabled"

等等这些在官网都可找到

09 layui的表单

在一个容器中设定 class="layui-form" 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。

依赖加载模块： form（请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

示例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Layui环境初始化</title>
		<!-- 引入layui -->
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
	</head>
	<body>
		
		<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-md6 layui-col-md-offset3">
					<!-- form表单 -->
					<form class="layui-form" action="">
					  <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">
					    </div>
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label">密码框</label>
					    <div class="layui-input-inline">
					      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
					    </div>
					    <div class="layui-form-mid layui-word-aux">辅助文字</div>
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label">选择框</label>
					    <div class="layui-input-block">
					      <select name="city" lay-verify="required">
					        <option value=""></option>
					        <option value="0">北京</option>
					        <option value="1">上海</option>
					        <option value="2">广州</option>
					        <option value="3">深圳</option>
					        <option value="4">杭州</option>
					      </select>
					    </div>
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label">复选框</label>
					    <div class="layui-input-block">
					      <input type="checkbox" name="like[write]" title="写作">
					      <input type="checkbox" name="like[read]" title="阅读" checked>
					      <input type="checkbox" name="like[dai]" title="发呆">
					    </div>
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label">开关</label>
					    <div class="layui-input-block">
					      <input type="checkbox" name="switch" lay-skin="switch">
					    </div>
					  </div>
					  <div class="layui-form-item">
					    <label class="layui-form-label">单选框</label>
					    <div class="layui-input-block">
					      <input type="radio" name="sex" value="男" title="男">
					      <input type="radio" name="sex" value="女" title="女" checked>
					    </div>
					  </div>
					  <div class="layui-form-item layui-form-text">
					    <label class="layui-form-label">文本域</label>
					    <div class="layui-input-block">
					      <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
					    </div>
					  </div>
					  <div class="layui-form-item">
					    <div class="layui-input-block">
					      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
					      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
					    </div>
					  </div>
					</form>
				</div>
				
			</div>
			
		</div>
		
		<!-- 引入layui的js库 -->
		<script  src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
		
		<script type="text/javascript">
			
			// 引入表单模块‘
			layui.use(['form'],function(){
				
			});
		</script>
	</body>
</html>

10 layui的表格

静态表格支持以下基础属性，可定义不同风格/尺寸的表格样式：

属性名	属性值	备注
lay-even	无	用于开启隔行背景，可与其它属性一起使用
lay-skin="属性值"	line （行边框风格） row （列边框风格） nob （无边框风格）	若使用默认风格不设置该属性即可
lay-size="属性值"	sm （小尺寸） lg （大尺寸）	若使用默认尺寸不设置该属性即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Layui环境初始化</title>
		<!-- 引入layui -->
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
	</head>
	<body>
		<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-md6 layui-col-md-offset3">
					<table lay-skin="line" lay-even class="layui-table">
					  <colgroup>
					    <col width="150">
					    <col width="200">
					    <col>
					  </colgroup>
					  <thead>
					    <tr>
					      <th>昵称</th>
					      <th>加入时间</th>
					      <th>签名</th>
					    </tr> 
					  </thead>
					  <tbody>
					    <tr>
					      <td>贤心</td>
					      <td>2016-11-29</td>
					      <td>人生就像是一场修行</td>
					    </tr>
					    <tr>
					      <td>许闲心</td>
					      <td>2016-11-28</td>
					      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
					    </tr>
					  </tbody>
					</table>
				</div>
			</div>
		</div>
		
		
		<!-- 引入layui的js库 -->
		<script  src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
	</body>
</html>

11 layui的弹出层(消息提示)

模块加载名称：layer

Layui要想使用模块首先就是页面中加载模块,加载模块的方式使用 layui.use(‘layer’,function(){ //执行的代码 });

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Layui环境初始化</title>
		<!-- 引入layui -->
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
	</head>
	<body>
		<!-- 引入layui的js库 -->
		<script  src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
		
		<script type="text/javascript">
			
			// 加载layer模块
			layui.use('layer',function(){
				//获取layer对象
				var layer = layui.layer;
				layer.msg("弹出消息的弹出层...");
			});
		</script>
	</body>
</html>

12 layui的弹出层(询问对话框)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Layui环境初始化</title>
		<!-- 引入layui -->
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
	</head>
	<body>
		
		<button id="btn">删除</button>
		<!-- 引入layui的js库 -->
		<script  src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
		
		<script type="text/javascript">
			
			// 加载layer模块
			layui.use('layer',function(){
				//获取layer对象
				var layer = layui.layer;
				layer.msg("弹出消息的弹出层...");
				
				//绑定按钮事件
				var btnEle = document.getElementById("btn");
				
				btnEle.onclick=function(){
					//弹出询问对话框
					layer.confirm("是否删除？",function(index){
						console.log("删除...");
						//关闭弹出层
						layer.close(index);
					})
				}
			});
		</script>
	</body>
</html>

13 layui的时间控件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Layui环境初始化</title>
		<!-- 引入layui -->
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
	</head>
	<body>
		
		<div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
		  <input type="text" class="layui-input" id="test1">
		</div>
		
		<!-- 引入layui的js库 -->
		<script  src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			//加载laydate模块
			layui.use(['laydate'],function(){
				// 获取laydate对象
				var laydate = layui.laydate;
				//执行一个laydate实例
				laydate.render({
					//绑定元素
					elem:"#test1",
					type:"datetime"
					,trigger:'click'
				});
				
			});
		</script>
	</body>
</html>

14 layui的数据表格01

创建一个table实例最简单的方式是，在页面放置一个元素 <table id="demo"></table>，然后通过 table.render() 方法指定该容器，同时要注意数据格式

默认规定的数据格式

{

"code": 0,

"msg": "",

"count": 1000,

"data": [{}, {}]

}

可借助 parseData 回调函数将数据解析成 table 组件所规定的数据格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Layui环境初始化</title>
		<!-- 引入layui -->
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
	</head>
	<body>
		
		<table id="demo"></table>
		<!-- 引入layui的js库 -->
		<script  src="layui/layui.js" type="text/javascript" charset="UTF-8"></script>
		<script type="text/javascript">
			layui.use("table",function(){
				var table = layui.table;
				// {}在js中表示对象
				table.render({
					elem:"#demo",//绑定元素
					url:"",//获取数据的地址
					page:true,//是否开启分页
					parseDate:function(res){
						console.log("res=",res);
						
					},
					cols:[[//表头
						{
							field: 'id', //要与数据对应
							title: 'ID', //自己起
							sort: true//是否排序
						},
						,{field: 'username', title: '用户名', width:80}
						      ,{field: 'sex', title: '性别', width:80, sort: true}
						      ,{field: 'city', title: '城市', width:80} 
						      ,{field: 'sign', title: '签名', width: 177}
						      ,{field: 'experience', title: '积分', width: 80, sort: true}
						      ,{field: 'score', title: '评分', width: 80, sort: true}
						      ,{field: 'classify', title: '职业', width: 80}
						      ,{field: 'wealth', title: '财富', width: 135, sort: true}
						     
					]]
				})
			});
		</script>
	</body>
</html>

15 layui的数据表格02_自定义列模板

templet，自定义列模板，模板遵循laytpl语法。这是一个非常实用的功能，可借助其实现逻辑处理，以及将原始数据转化成其它格式，如时间戳转化为日期字符等。

templet 提供了三种使用方式，请结合实际场景选择最合适的一种：

如果自定义模版的字符量太大，推荐采用【方式一】；
如果自定义模板的字符量适中，或者想更方便地调用外部方法，推荐采用【方式二】；
如果自定义模板的字符量很小，推荐采用【方式三】

方式一：绑定模版选择器。

方式二：函数转义。

方式三：直接赋值模版字符。

16 layui的表单模块

模块加载名称：form，在UI上的渲染只要求一点，必须给表单体系所在的父元素加上class="layui-form"

详见官网：表单模块文档 - Layui

Silence-114

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Layui个人入门学习记录

官网：https://layuion.com/01 layui简介Layui的简介Layui(谐音:类UI)是一款采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。02 layui下载和目录文件介绍获取layui，在官网首页下载，也可通过GitHub和码云得到layui的完整开发包，或采用npm安装。官网：https://layuion.com/目录结构├─css //css目录│ └─modules/...
复制链接

扫一扫