Layui学习总结
Layui学习总计快速入门
- Layui的下载和安装
下载地址：点我下载layui文件
快速上手：获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：
./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js
没错，不用去管其它任何文件。因为他们（比如各模块）都是在最终使用的时候才会自动加载。这是一个基本的入门页面：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>开始使用layuititle>
<link rel="stylesheet" href="../layui/css/layui.css">
head>
<body>
<script src="../layui/layui.js">script>
<script>
//一般直接写在一个js文件中
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
layer.msg('Hello World');
});
script>
body>
html>
layui 的模块的使用
<script>
layui.use(['mod1', 'mod2'], function(args){
var mod = layui.mod1;
script>
});
- Layui提供的页面元素
layui提供了15中页面元素，其中包括了：布局、颜色、图标、动画、按钮、表单、导航、
菜单、选项卡、进度条、面板、表格、徽章、时间线、辅助等模块
栅格系统与后台布局
为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。
栅格布局规则：
1.采用 layui-row 来定义行，如：
2.采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。
3.列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
4.可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
5. 最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！
实例：
<div class="layui-container">
常规布局（以中型屏幕桌面为例）：
<div class="layui-row">
<div class="layui-col-md9">
你的内容 9/12
div>
<div class="layui-col-md3">
你的内容 3/12
div>
div>
栅格布局还包括了，间距、偏移、嵌套等多种使用方法
具体规则可查看：http://www.uimaker.com/layui/doc/element/layout.html
按钮 - 页面元素
用法：
<button type="button" class="layui-btn">一个标准的按钮button>
<a href="http://www.layui.com" 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” |
layui的按钮组件还可以配合图标进行使用
<button type="button" class="layui-btn">
<i class="layui-icon layui-icon-down layui-font-12">i> 按钮
button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary">
<i class="layui-icon layui-icon-left">i>
button>
按钮组件对大小尺寸、样式、圆角、按钮组等都提供了方法：点此处查看按钮组件
表单
在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。
依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用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>
<script>
//Demo
layui.use('form', function(){
var form = layui.form;
//监听提交
form.on('submit(formDemo)', function(data){
layer.msg(JSON.stringify(data.field));
return false;
});
});
script>
表单对单选、复选、输入框都提供了统一的样式，遵循layui模块规范可以直接引用
- 输入框
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
- 下拉选择框
<select name="city" lay-verify="">
<option value="">请选择一个城市option>
<option value="010">北京option>
<option value="021">上海option>
<option value="0571">杭州option>
select>
selected 来设定默认选中项
<select name="city" lay-verify="">
<option value="010">北京option>
<option value="021" disabled>上海（禁用效果）option>
<option value="0571" selected>杭州option>
select>
- 复选框
默认风格：
<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆">
<input type="checkbox" name="" title="禁用" disabled>
原始风格：
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
<input type="checkbox" name="" title="发呆" lay-skin="primary">
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title） 属性checked可设定默认选中
属性lay-skin可设置复选框的风格 设置value="1"可自定义值，否则选中时返回的就是默认的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>
- 预设元素属性
| 属性名 | 属性值 | 说明 |
|---|---|---|
| title | 任意字符 | 设定元素名称，一般用于checkbox、radio框 |
| lay-skin | switch（开关风格） primary（原始风格） | 定义元素的风格，目前只对 checkbox 元素有效，可将其转变为开关样式 |
| lay-ignore | 任意字符或不设值 | 是否忽略元素美化处理。设置后，将不会对该元素进行初始化渲染，即保留系统风格 |
| lay-filter | 任意字符 | 事件过滤器，主要用于事件的精确匹配，跟选择器是比较类似的。其实它并不私属于form模块，它在 layui 的很多基于事件的接口中都会应用到。 |
| lay-verify | required（必填项）phone（手机号）email（邮箱）url（网址）number（数字）date（日期）identity（身份证） | 自定义值 同时支持多条规则的验证，格式：lay-verify="验证A |
| 如：lay-verify="required | phone | number"另外，除了我们内置的校验规则，你还可以给他设定任意的值，比如lay-verify=“pass”，那么你就需要借助form.verify()方法对pass进行一个校验规则的定义。详见表单验证 |
| lay-verType | tips（吸附层）alert（对话框）msg（默认） | 用于定义异常提示层模式。 |
| lay-reqText | 任意字符 | 用于自定义必填项（即设定了 lay-verify=“required” 的表单）的提示文本注意：该功能为 layui 2.5.0 新增 |
| lay-submit | 无需填写值 | 绑定触发提交的元素，如button |
- 监听事件
语法：
form.on(‘event(过滤器值)’, callback);
form模块在 layui 事件机制中注册了专属事件，所以当你使用layui.onevent()自定义模块事件时，请勿占用form名。form支持的事件如下：
| event | 描述 |
|---|---|
| select | 触发select下拉选择事件 |
| checkbox | 触发checkbox复选框勾选事件 |
| switch | 触发radio单选框事件 |
| radio | 触发select下拉选择事件 |
| submit | 触发表单提交事件 |
-默认情况下，事件所触发的是全部的form模块元素，但如果你只想触发某一个元素，使用事件过滤器即可。
如：
form.on('select(test)', function(data){
console.log(data);
});
- Layui提供的内置模块
弹出层
layer 至今仍作为 layui 的代表作，它的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在 Web 开发者的圈子里口口相传，乃至于成为今天的 layui 最强劲的源动力。目前，layer 已然成为网页弹出层的首选交互方案，几乎随处可见。
模块加载名称：layer，独立版本：layer.layui.com
layer可以作为单独的组件使用
引入好layer.js后，直接用即可
<script src="layer.js">script>
<script>
layer.msg('hello');
script>
在 layui 中使用 layer
<script>
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('hello');
});
script>
我们提到的基础参数主要指调用方法时用到的配置项，如：layer.open({content: ‘’})layer.msg(’’, {time: 3})等，其中的content和time即是基础参数，以键值形式存在，基础参数可合理应用于任何层类型中，您不需要所有都去配置，大多数都是可选的。而其中的layer.open、layer.msg就是内置方法
type - 基本层类型
类型：Number，默认：0
layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）。 若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
title - 标题
类型：String/Array/Boolean，默认：‘信息’、
title支持三种类型的值，若你传入的是普通的字符串，如title :‘我是标题’，那么只会改变标题文本；若你还需要自定义标题区域样式，那么你可以title: [‘文本’, ‘font-size:18px;’]，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
content - 内容
类型：String/DOM/Array，默认：’’
content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。譬如：
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
<link rel="stylesheet" href="../css/layui.css" type="text/css" />
head>
<body>
<div style="display: none;" id="div1">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">输入框label>
<div class="layui-input-inline">
<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>
form>
div>
<button class="layui-btn" onclick="xxbtn()">消息按钮button>
<button class="layui-btn" onclick="ymcbtn()">页面层button>
<button class="layui-btn" onclick="ckc()">iframe层button>
<button class="layui-btn" onclick="jzbtn()">加载层button>
<button class="layui-btn" onclick="tsbtn()">tips层button>
<div id="ts" style="width: 100px;height: 30px;color: #000000;border: 1px saddlebrown solid;">div>
<script src="../js/jquery-3.6.0.js">script>
<script src="../layer/layer.js">script>
<script src="../js/layui.js">script>
<script>
//消息提示
layer.msg("我是弹窗");
function xxbtn(){
layer.open({
type:0,
title:"消息框",
content:"内容区域"
})
}
function ymcbtn(){
layer.open({
type:1,
title:"加载页面",
content:$("#div1")
})
}
function ckc(){
layer.open({
type:2,
title:"iframe",
content:"http://www.uimaker.com/layui/doc/modules/layer.html"
})
}
function jzbtn(){
layer.open({
type:3,
title:"加载层",
})
}
function tsbtn(){
alert("!11");
layer.open({
type:4,
content:['我是提示层','#ts']
})
}
script>
body>
html>
- skin - 样式类名 类型：String，默认：’’
- area - 宽高 类型：String/Array，默认：‘auto’ 在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: ‘500px’，高度仍然是自适应的。当你宽高都要定义时，你可以area: [‘500px’, ‘300px’]
- offset - 坐标 类型：String/Array，默认：垂直水平居中
- icon - 图标。信息框和加载层的私有参数 类型：Number，默认：-1（信息框）/0（加载层）
<script>
//eg1
layer.alert('酷毙了', {icon: 1});
//eg2
layer.msg('不开心。。', {icon: 5});
//eg3
layer.load(1); //风格1的加载
script>
- btn - 按钮 类型：String/Array，默认：‘确认’
- btnAlign - 按钮排列 类型：String，默认：r
- closeBtn - 关闭按钮 类型：String/Boolean，默认：1
- shade - 遮罩 类型：Boolean，默认：false
- time - 自动关闭所需毫秒 类型：Number，默认：0
- id - 用于控制弹层唯一标识 类型：String，默认：空字符
- anim - 弹出动画 类型：Number，默认：0
- isOutAnim - 关闭动画 （layer 3.0.3新增） 类型：Boolean，默认：true
- maxmin - 最大最小化。 类型：Boolean，默认：false
- fixed - 固定 类型：Boolean，默认：true
- resize - 是否允许拉伸 类型：Boolean，默认：true
完整操作手册：http://www.uimaker.com/layui/doc/modules/layer.html
表格
快速使用
创建一个table实例最简单的方式是，在页面放置一个元素
，然后通过
table.render() 方法指定该容器，如下所示
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table模块快速使用title>
<link rel="stylesheet" href="/layui/css/layui.css" media="all">
head>
<body>
<table id="demo" lay-filter="test">table>
<script src="/layui/layui.js">script>
<script>
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,height: 312
,url: '../json/user.json/' //数据接口
,page: true //开启分页
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{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>
基础参数一览表
场景一：下述方法中的键值即为基础参数项
table.render({
height: 300
,url: '/api/data'
});
场景二：下述 lay-data 里面的内容即为基础参数项，切记：值要用单引号
<table lay-data="{height:300, url:'/api/data'}" lay-filter="demo"> …… table>
更多场景：下述 options 即为含有基础参数项的对象
> table.init('filter', options); //转化静态表格
> var tableObj = table.render({});
tableObj.reload(options); //重载表格
下面是目前 table 模块所支持的全部参数一览表，我们对重点参数进行了的详细说明，你可以点击下述表格最右侧的“示例”去查看
图片转载：http://www.uimaker.com/layui/doc/modules/table.html
树形组件
快速使用
通过 tree.render() 方法指定一个元素，便可快速创建一个 tree 实例。
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>树组件title>
<link rel="stylesheet" href="../src/css/layui.css">
head>
<body>
<div id="test1">div>
<script src="../src/layui.js">script>
<script>
layui.use('tree', function(){
var tree = layui.tree;
//渲染
var inst1 = tree.render({
elem: '#test1' //绑定元素
,data: [{
title: '江西' //一级菜单
,children: [{
title: '南昌' //二级菜单
,children: [{
title: '高新区' //三级菜单
//…… //以此类推，可无限层级
}]
}]
},{
title: '陕西' //一级菜单
,children: [{
title: '西安' //二级菜单
}]
}]
});
});
script>
body>
html>
基础参数：
其他组件详情可以查看layui教程：layui教程链接
*文章借鉴layui文档 *