LayUI
次要内容
----LayUI 的装置及应用
LayUI 的介绍
layui（谐音：类UI) 是一款采纳本身模块标准编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织模式，门槛极低，拿来即用。
由国人开发，16年出厂的框架，其次要提供了很多难看、不便的款式，并且根本拿来即用，和Bootstrap有些类似，但该框架有个极大的益处就是定义了很多前后端交互的款式接口，如分页表格，只需在前端配置好接口，后端则依照定义好的接口规定返回数据，即可实现页面的展现，极大缩小了后端人员的开发成本。
官网：https://www.layui.com
官网文档：https://www.layui.com/doc/
LayUI 的特点
（1）layui属于轻量级框架，简略好看。实用于开发后端模式，它在服务端页面上有十分好的成果。
（2）layui是提供给后端开发人员的ui框架，基于DOM驱动。
下载与应用
在 官网首页 下载到 layui 的最新版。目录构造如下：
├─css // css目录 │ │─modules // 模块css目录（个别如果模块绝对较大，咱们会独自提取，比方上面三个：） │ │ ├─laydate │ │ ├─layer │ │ └─layim │ └─layui.css // 外围款式文件 ├─font // 字体图标目录 ├─images // 图片资源目录（目前只有layim和编辑器用到的GIF表情） │─lay // 模块外围目录 │ └─modules // 各模块组件 │─layui.js // 根底外围库 └─layui.all.js // 蕴含layui.js和所有模块的合并文件- 取得 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>开始应用layui</title> <link rel="stylesheet" href="layui/css/layui.css"></head><body> <!-- 你的HTML代码 --> <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> 还须要申明须要应用的 模块 和 回调函数。参照官网文档，抉择本人想要的成果就行。
比方：
<script> // 留神：导航 依赖 element 模块，否则无奈进行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); </script>
页面元素
布局
布局容器
固定宽度
将栅格放入一个带有 class=“layui-container” 的特定的容器中，以便在小屏幕以上的设施中固定宽度，让列可控。
<div class="layui-container"> <div class="layui-row"> …… </div></div> 残缺宽度
能够不固定容器宽度。将栅格或其它元素放入一个带有 class=“layui-fluid” 的容器中，那么宽度将不会固定，而是 100% 适应
<div class="layui-fluid"> ……</div> 栅格零碎
为了丰盛网页布局，简化 HTML/CSS 代码的耦合，并晋升多终端的适配能力，layui 引进了一套具备响应式能力的栅格零碎。将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在挪动设施、平板、桌面中/大尺寸四种不同的屏幕下施展着各自的作用。
栅格布局规定
采纳 layui-row 来定义行，如：
<div class="layui-row"></div>采纳相似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：
- 变量 md 代表的是不同屏幕下的标记
- 变量 * 代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
- 如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将主动另起一行。
- 列能够同时呈现最多四种不同的组合，别离是：_xs_（超小屏幕，如手机）、_sm_（小屏幕，如平板）、_md_（桌面中等屏幕）、_lg_（桌面大型屏幕）。
- 可对列追加相似 layui-col-space5_、 _layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
- 能够在列（column）元素中放入你本人的任意元素填充内容
示例：
<h3>惯例布局（以中型屏幕桌面为例）：</h3><div class="layui-row"> <div class="layui-col-md9" style="background-color: #00F7DE;"> 你的内容 9/12 </div> <div class="layui-col-md3" style="background-color: rosybrown;"> 你的内容 3/12 </div></div> 响应式规定
栅格的响应式能力，得益于CSS3媒体查问（Media Queries）的强力反对，从而针对四类不同尺寸的屏幕，进行相应的适配解决。
超小屏幕 (手机<768px)
小屏幕 (平板≥768px)
中等屏幕 (桌面≥992px)
大型屏幕(桌面≥1200px)
_.layui-container_的值
auto
750px
970px
1170px
标记
xs
sm
md
lg
列对应类 * 为1-12的等分数值
layui-col-xs*
layui-col-sm*
layui-col-md*
layui-col-lg*
总列数
12
12
12
12
响应行为
始终按设定的比例程度排列
在以后屏幕下程度排列，如果屏幕大小低于临界值则重叠排列
在以后屏幕下程度排列，如果屏幕大小低于临界值则重叠排列
在以后屏幕下程度排列，如果屏幕大小低于临界值则重叠排列
<h3>平板、桌面端的不同体现：</h3><div class="layui-row"> <div class="layui-col-sm6 layui-col-md4" style="background-color: thistle"> 平板≥768px：6/12 | 桌面端≥992px：4/12 </div></div><div class="layui-row"> <div class="layui-col-sm4 layui-col-md6" style="background-color: mediumaquamarine;"> 平板≥768px：4/12 | 桌面端≥992px：6/12 </div></div><div class="layui-row"> <div class="layui-col-sm12 layui-col-md8" style="background-color: coral"> 平板≥768px：12/12 | 桌面端≥992px：8/12 </div></div> 列边距
通过“列间距”的预设类，来设定列之间的间距。且一行中最左的列不会呈现右边距，最右的列不会呈现左边距。列间距在保障排版好看的同时，还能够进一步保障分列的宽度精密水平。咱们联合网页罕用的边距，预设了 12 种不同尺寸的边距，别离是：
/* 反对列之间为 1px-30px 区间的所有单数距离，以及 1px、5px、15px、25px 的复数距离 */layui-col-space1 layui-col-space2 layui-col-space4 layui-col-space5 layui-col-space6 layui-col-space8 layui-col-space10 layui-col-space12 layui-col-space14 layui-col-space15 layui-col-space16 layui-col-space18 layui-col-space20 layui-col-space22 layui-col-space24 layui-col-space25 layui-col-space26 layui-col-space28 layui-col-space30 示例：
<h3>列间距</h3><div class="layui-row layui-col-space10"> <div class="layui-col-md4" > <!-- 须要在layui-col-md4外面再加一层div --> <div style="background-color: #009688;"> 1/3 </div> </div> <div class="layui-col-md4"> <div style="background-color: burlywood;"> 1/3 </div> </div> <div class="layui-col-md4"> <div style="background-color: silver;"> 1/3 </div> </div></div> 注：
1. layui-col-space：设置后不起作用次要是因为**设置的是padding**,也就是说是**向内缩**，所以设置背景色padding也是会添上色彩，看起来如同没有间距一样。能够在外面在加一个div，来达到目标。2. 间距个别不高于30px，如果超过30，倡议应用列偏移。 列偏移
对列追加 相似 layui-col-md-offset 的预设类，从而让列向右偏移。其中 号代表的是偏移占据的列数，可选中为 1 - 12。
如：_layui-col-md-offset3_，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度
<h3>列偏移</h3><div class="layui-row"> <div class="layui-col-md4" style="background-color: rosybrown;"> 4/12 </div> <div class="layui-col-md4 layui-col-md-offset4" style="background-color: cornflowerblue;"> 偏移4列，从而在最右 </div></div> 注：列偏移可针对不同屏幕的规范进行设定，在以后设定的屏幕下无效，当低于桌面屏幕的规定的临界值，就会重叠排列。
列嵌套
能够对栅格进行无穷档次的嵌套。在列元素（_layui-col-md*_）中插入行元素（_layui-row_），即可实现嵌套。
<h3>列嵌套</h3><div class="layui-row layui-col-space5"> <div class="layui-col-md5" style="background-color: thistle;"> <div class="layui-row"> <div class="layui-col-md3" style="background-color: burlywood;" > 外部列 </div> <div class="layui-col-md5" style="background-color: indianred;"> 外部列 </div> <div class="layui-col-md4" style="background-color: mediumaquamarine;"> 外部列 </div> </div> </div></div> 根本元素
按钮
用法
向任意HTML元素设定_class=“layui-btn”_，建设一个根底按钮。通过追加格局为layui-btn-{type}的class来定义其它按钮格调。
<!-- 根底按钮 --><button type="button" class="layui-btn">一个规范的按钮</button><a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a><div class="layui-btn">一个按钮</div> 主题
名称
组合
原始
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”
示例：
<!-- 不同主题的按钮 --><button class="layui-btn">默认按钮</button><button class="layui-btn layui-btn-primary">原始按钮</button> <button class="layui-btn layui-btn-normal">百搭按钮</button><button class="layui-btn layui-btn-warm">寒色按钮</button><button class="layui-btn layui-btn-danger">正告按钮</button><button class="layui-btn layui-btn-disabled">禁用按钮</button> 尺寸
尺寸
组合
大型
class=“layui-btn layui-btn-lg”
默认
class=“layui-btn”
小型
class=“layui-btn layui-btn-sm”
迷你
class=“layui-btn layui-btn-xs”
<!-- 不同尺寸的按钮 --><button class="layui-btn layui-btn-primary layui-btn-lg">大型</button> <button class="layui-btn">默认</button><button class="layui-btn layui-btn-sm layui-btn-danger">小型</button><button class="layui-btn layui-btn-xs">迷你</button> 圆角
layui-btn-radius
<button class="layui-btn layui-btn-radius">默认按钮</button><button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button> <button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button><button class="layui-btn layui-btn-warm layui-btn-radius">寒色按钮</button><button class="layui-btn layui-btn-danger layui-btn-radius">正告按钮</button><button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button> 图标
<button type="button" class="layui-btn"> <i class="layui-icon"></i> 增加</button><button type="button" class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon">ဂ</i> 刷新</button> 导航
导航个别指页面引导性频道汇合，多以菜单的模式出现，可利用于头部和侧边。面包屑构造简略，反对自定义分隔符。
依赖加载模块：element
实现步骤：
引入的资源
<link rel="stylesheet" href="layui/css/layui.css"><script src="layui/layui.js"></script>依赖加载模块
<script type="text/javascript"> // 留神：导航 依赖 element 模块，否则无奈进行功能性操作 layui.use('element', function(){ var element = layui.element; }); </script>- 显示指定类型的导航
程度导航
<ul class="layui-nav"> <li class="layui-nav-item"><a href="">最新流动</a></li> <li class="layui-nav-item layui-this"><a href="">产品</a></li> <li class="layui-nav-item"><a href="">大数据</a></li> <li class="layui-nav-item"> <a href="javascript:;">解决方案</a> <dl class="layui-nav-child"> <!-- 二级菜单 --> <dd><a href="">挪动模块</a></dd> <dd><a href="">后盾模版</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">社区</a></li></ul> 垂直/侧边导航
<ul class="layui-nav layui-nav-tree" ><!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">默认开展</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">选项1</a></dd> <dd><a href="javascript:;">选项2</a></dd> <dd><a href="">跳转</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">解决方案</a> <dl class="layui-nav-child"> <dd><a href="">挪动模块</a></dd> <dd><a href="">后盾模版</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">产品</a></li> <li class="layui-nav-item"><a href="">大数据</a></li></ul> 程度、垂直、侧边三个导航的HTML构造是齐全一样的，不同的是：
程度导航：layui-nav垂直导航须要追加class：layui-nav-tree侧边导航须要追加class：layui-nav-tree layui-nav-side 导航主题
通过对导航追加CSS背景类，让导航出现不同的主题色
<!-- 如定义一个墨绿背景色的导航 --><ul class="layui-nav layui-bg-move" > …</ul> 程度导航反对的其它背景主题有：_layui-bg-cyan_（藏青）、_layui-bg-molv_（墨绿）、_layui-bg-blue_（艳蓝）
垂直导航反对的其它背景主题有：_layui-bg-cyan_（藏青）
面包屑
<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">国内新闻</a> <a href="">亚太地区</a> <a><cite>注释</cite></a></span> 你还能够通过设置属性 lay-separator="" 来自定义分隔符。例如：
<span class="layui-breadcrumb" lay-separator="-"> <a href="">首页</a> <a href="">国内新闻</a> <a href="">亚太地区</a> <a><cite>注释</cite></a></span> 选项卡
导航菜单可利用于头部和侧边，反对响应式，反对删除选项卡等性能。
依赖加载模块：element
实现步骤
引入的资源
<link rel="stylesheet" href="layui/css/layui.css"><script src="layui/layui.js"></script>依赖加载模块
<script type="text/javascript"> // 留神：选项卡 依赖 element 模块，否则无奈进行功能性操作 layui.use('element', function(){ var element = layui.element; }); </script>加载HTML
<div class="layui-tab"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户治理</li> <li>权限调配</li> <li>商品治理</li> <li>订单治理</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容1</div> <div class="layui-tab-item">内容2</div> <div class="layui-tab-item">内容3</div> <div class="layui-tab-item">内容4</div> <div class="layui-tab-item">内容5</div> </div></div>
选项卡格调
默认格调：layui-tab简洁格调须要追加class：layui-tab-brief卡片格调须要追加class：layui-tab-card 带删除的选项卡
能够对父层容器设置属性 lay-allowClose=“true” 来容许Tab选项卡被删除
<div class="layui-tab" lay-allowClose="true"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户治理</li> <li>权限调配</li> <li>商品治理</li> <li>订单治理</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容1</div> <div class="layui-tab-item">内容2</div> <div class="layui-tab-item">内容3</div> <div class="layui-tab-item">内容4</div> <div class="layui-tab-item">内容5</div> </div></div> 表格
惯例用法
<table 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> 根底属性
属性名
属性值
备注
lay-even
无
用于开启 隔行 背景，可与其它属性一起应用
lay-skin=“属性值”
line （行边框格调）
row （列边框格调）
nob （无边框格调）
若应用默认格调不设置该属性即可
lay-size=“属性值”
sm （小尺寸）
lg （大尺寸）
若应用默认尺寸不设置该属性即可
你所须要的根底属性写在table标签上，例如：
<!-- 一个带有隔行背景，且行边框格调的大尺寸表格 --><table class="layui-table" lay-even lay-size="lg" lay-skin="row"> <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> 表单
依赖加载模块：form
在一个容器中设定 class=“layui-form” 来标识一个表单元素块
<form class="layui-form" action=""> </form>根本的行区块构造，它提供了响应式的反对。能够换成其余构造，但必须要在外层容器中定义_class=“layui-form”_，form模块能力失常工作。
<div class="layui-form-item"> <label class="layui-form-label">标签区域</label> <div class="layui-input-block"> 原始表单元素区域 </div></div>
输入框
<input type="text" name="title" required lay-verify="required" placeholder="请输出题目" autocomplete="off" class="layui-input" /> - required：注册浏览器所规定的必填字段
- lay-verify：注册form模块须要验证的类型
- class=“layui-input”：layui.css提供的通用CSS类
下拉抉择框
<select name="city" lay-verify=""> <option value="">请抉择一个城市</option> <option value="010">北京</option> <option value="021">上海</option> <option value="0571">杭州</option></select> - 属性_selected_可设定默认项
- 属性_disabled_开启禁用，select和option标签都反对
<select name="city" lay-verify=""> <option value="010">北京</option> <option value="021" disabled>上海（禁用成果）</option> <option value="0571" selected>杭州</option></select> - 能够通过 optgroup 标签给select分组
<select name="quiz"> <option value="">请抉择</option> <optgroup label="城市记忆"> <option value="你工作的第一个城市">你工作的第一个城市？</option> </optgroup> <optgroup label="学生时代"> <option value="你的工号">你的工号？</option> <option value="你最喜爱的老师">你最喜爱的老师？</option> </optgroup></select> - 通过设定属性 lay-search 来开启搜寻匹配性能
<select name="city" lay-verify="" lay-search> <option value="010">layer</option> <option value="021">form</option> <option value="0571" selected>layim</option></select> 复选框
<h2>默认格调：</h2><input type="checkbox" name="" title="写作" checked><input type="checkbox" name="" title="发愣"> <input type="checkbox" name="" title="禁用" disabled> <h2>原始格调：</h2><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_可设置复选框的格调 （原始格调：lay-skin=“primary”）
- 设置value=“1”可自定义值，否则选中时返回的就是默认的on
开关
将复选框checkbox，通过设定 lay-skin=“switch” 造成了开关格调
<input type="checkbox" name="xxx" lay-skin="switch"><input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked><input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|敞开"><input type="checkbox" name="aaa" lay-skin="switch" disabled> - 属性_checked_可设定默认开
- 属性_disabled_开启禁用
- 属性_lay-text_可自定义开关两种状态的文本 （两种文本用 “|” 隔开）
- 设置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_可自定义文本
- 属性_disabled_开启禁用
- 设置value=“xxx”可自定义值，否则选中时返回的就是默认的on
文本域
<textarea name="remark" required lay-verify="required" placeholder="请输出集体介绍" class="layui-textarea"></textarea> - _class=“layui-textarea”_：layui.css提供的通用CSS类
组装行内表单
<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></div> - _class=“layui-inline”_：定义外层行内
- _class=“layui-input-inline”_：定义内层行内
疏忽丑化渲染
能够对表单元素减少属性 lay-ignore 设置后，将不会对该标签进行丑化渲染，即保留零碎格调。
<input type="radio" name="sex" value="nan" title="男" lay-ignore> 表单方框格调
通过追加 layui-form-pane 的class，来设定表单的方框格调。
<form class="layui-form layui-form-pane" action=""> <!-- 内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该格调下须要额定增加 pane属性（否则 会看起来比拟顺当），如： --> <div class="layui-form-item" pane> <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></form> 组件示例
弹出层
模块加载名称：_layer_，独立版本：layer.layui.com
应用场景
因为layer能够独立应用，也能够通过Layui模块化应用。所以请依照你的理论需要来抉择。
场景
用前筹备
调用形式
- 作为独立组件应用
如果你只是独自想应用 layer，你能够去 layer 独立版本官网下载组件包。你须要在你的页面引入_jQuery_1.8以上的任意版本，并引入_layer.js_。
通过script标签引入layer.js后，间接用即可。
- layui 模块化应用
如果你应用的是 layui，那么你间接在官网下载 layui 框架即可，无需引入 jQuery 和 layer.js，但须要引入_layui.css_和_layui.js_
通过layui.use(‘layer’, callback)加载模块
作为独立组件应用 layer
<!-- 引入好layer.js后，间接用即可 --><script src="layer.js"></script><script> layer.msg('hello'); </script>在 layui 中应用 layer
layui.use('layer', function(){ var layer = layui.layer; layer.msg('hello');});
根底参数
type - 根本层类型
类型：Number，默认：0可传入的值有： 0（信息框，默认） 1（页面层） 2（iframe层） 3（加载层） 4（tips层）title - 题目
类型：String/Array/Boolean，默认：'信息'title反对三种类型的值： 若传入的是一般的字符串，如 title :'我是题目'，那么只会扭转题目文本； 若须要自定义款式，能够title: ['文本', 'font-size:18px;']，数组第二项能够写任意css款式； 若你不想显示标题栏，能够 title: false；content - 内容
类型：String/DOM/Array，默认：''content可传入的值是灵便多变的，不仅能够传入一般的html内容，还能够指定DOM。/* 信息框 */layer.open({ type:0, title:"零碎音讯", // content能够传入任意的文本或html content:"Hello"});/* 页面层 */layer.open({ type:1, title:"零碎音讯", // content能够传入任意的文本或html content:"<div style='height:100px;width:200px'>Hello</div>"});/* iframe */layer.open({ type:2, title:"零碎音讯", // content是一个URL，如果你不想让iframe呈现滚动条，你还能够content: ['url', 'no'] content:"http://www.baidu.com" // content:["http://www.baidu.com",'no']}); /* tips层 */layer.open({ type: 4, content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM});area - 宽高
类型：String/Array，默认：'auto'在默认状态下，layer是宽高都自适应的。当定义宽度时，你能够area: '500px'，高度依然是自适应的。当宽高都要定义时，你能够area: ['500px', '300px']。icon - 图标
注：信息框和加载层的公有参数。类型：Number，默认：-1（信息框）/0（加载层）信息框默认不显示图标。当你想显示图标时，默认层能够传入0-6。如果是加载层，能够传入0-2。// eg1layer.alert('酷毙了', {icon: 1});// eg2layer.msg('不开心。。', {icon: 5});// eg3layer.load(1); // 格调1的加载示例
// eg1layer.alert('很快乐见到你????', {icon: 6});// eg2layer.msg('你违心和我做敌人么？', { time: 0, //不主动敞开 btn: ['当然违心', '狠心回绝'], // 按钮 yes: function(index){ layer.close(index); // 敞开以后弹出框 layer.msg('新敌人，你好！', { icon: 6, // 图标 btn: ['开心','高兴'] }); }});// eg3layer.msg('这是罕用的弹出层');// eg4layer.msg('So sad /(ㄒoㄒ)/~~', {icon: 5});// eg5layer.msg('玩命加载中...=￣￣=', function(){ // 敞开后的操作 layer.msg('(⊙o⊙)？');});
日期与工夫抉择
模块加载名称：_laydate_，独立版本：http://www.layui.com/laydate/
layDate 蕴含了大量的更新，其中次要以：_年选择器_、_年月选择器_、_日期选择器_、_工夫选择器_、_日期工夫选择器_ 五种类型的抉择形式。
疾速应用
和 layer 一样，能够在 layui 中应用 layDate，也可间接应用 layDate 独立版，请依照理论需要来抉择。
场景
用前筹备
调用形式
- layui 模块化应用
下载 layui 后，引入_layui.css_和_layui.js_即可
通过layui.use(‘laydate’, callback)加载模块后，再调用办法
- 作为独立组件应用
去 layDate 独立版本官网下载组件包，引入 laydate.js 即可
间接调用办法应用
在layui模块中应用
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>日期与工夫抉择</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div class="layui-inline"> <input type="text" class="layui-input" id="date1" /> </div> </body> <script src="layui/layui.js"></script> <script type="text/javascript"> layui.use('laydate', function(){ var laydate = layui.laydate; //执行一个laydate实例 laydate.render({ elem: '#date1' //指定元素 }); }); </script></html> 根底参数
elem - 绑定元素
类型：String/DOM，默认值：无必填项，用于绑定执行日期渲染的元素，值个别为选择器，或DOM对象laydate.render({ elem: '#test' //或 elem: document.getElementById('test')、elem: lay('#test') 等});type - 控件抉择类型
类型：String，默认值：date用于独自提供不同的选择器类型，可选值如下表：type可选值
名称
用处
year
年选择器
只提供年列表抉择
month
年月选择器
只提供年、月抉择
date
日期选择器
可抉择：年、月、日。type默认值，个别可不填
time
工夫选择器
只提供时、分、秒抉择
datetime
日期工夫选择器
可抉择：年、月、日、时、分、秒
//年选择器laydate.render({ elem: '#test' ,type: 'year'}); //年月选择器laydate.render({ elem: '#test' ,type: 'month'}); //日期选择器laydate.render({ elem: '#test' //,type: 'date' //默认，可不填}); //工夫选择器laydate.render({ elem: '#test' ,type: 'time'}); //日期工夫选择器laydate.render({ elem: '#test' ,type: 'datetime'});format - 自定义格局
类型：String，默认值：yyyy-MM-dd通过日期工夫各自的格局符和长度，来设定一个你所须要的日期格局。layDate 反对的格局如下：格局符
阐明
yyyy
年份，至多四位数。如果有余四位，则后面补零
y
年份，不限度位数，即不论年份多少位，后面均不补零
MM
月份，至多两位数。如果有余两位，则后面补零。
M
月份，容许一位数。
dd
日期，至多两位数。如果有余两位，则后面补零。
d
日期，容许一位数。
HH
小时，至多两位数。如果有余两位，则后面补零。
H
小时，容许一位数。
mm
分钟，至多两位数。如果有余两位，则后面补零。
m
分钟，容许一位数。
ss
秒数，至多两位数。如果有余两位，则后面补零。
s
秒数，容许一位数。
通过上述不同的格局符组合成一段日期工夫字符串，可任意排版。
//自定义日期格局laydate.render({ elem: '#test' ,format: 'yyyy年MM月dd日' //可任意组合});value - 初始值
类型：String，默认值：new Date()反对传入合乎format参数设定的日期格局字符，或者 new Date()// 传入合乎format格局的字符给初始值laydate.render({ elem: '#test' ,value: '2018-08-18' //必须遵循format参数设定的格局}); // 传入Date对象给初始值laydate.render({ elem: '#test' ,value: new Date(1534766888000) //参数即为：2018-08-20 20:08:08 的工夫戳});
分页
模块加载名称：_laypage_
疾速应用
laypage 的应用非常简单，指向一个用于寄存分页的容器，通过服务端失去一些初始值，即可实现分页渲染。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>分页</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <div id="test1"></div> </body> <script src="layui/layui.js"></script> <script type="text/javascript"> layui.use('laypage', function(){ var laypage = layui.laypage; //执行一个laypage实例 laypage.render({ elem: 'test1' //留神，这里的 test1 是 ID，不必加 # 号 ,count: 50 //数据总数，从服务端失去 }); }); </script></html> 根底参数
通过外围办法：_laypage.render(options)_ 来设置根底参数。
参数选项
阐明
类型
默认值
elem
指向寄存分页的容器，值能够是容器ID、DOM对象。如： 1. elem: ‘id’ 留神：这里不能加 # 号 2. elem: document.getElementById(‘id’)
String/Object
-
count
数据总数。个别通过服务端失去
Number
-
limit
每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
Number
10
limits
每页条数的选择项。如果 layout 参数开启了 limit，则会呈现每页条数的select抉择框
Array
[10, 20, 30, 40, 50]
curr
起始页。个别用于刷新类型的跳页以及HASH跳页。如：
// 开启location.hash的记录
laypage.render({
elem: ‘test1’ ,
count: 500 ,
// 获取起始页
curr: location.hash.replace(’#!fenye=’, ‘’)
// 自定义hash值
,hash: ‘fenye’
}); `
Number
1
groups
间断呈现的页码个数
Number
5
prev
自定义“上一页”的内容，反对传入一般文本和HTML
String
上一页
next
自定义“下一页”的内容，同上
String
下一页
first
自定义“首页”的内容，同上
String
1
last
自定义“尾页”的内容，同上
String
总页数值
layout
自定义排版。可选值有：_count_（总条目输区域）、_prev_（上一页区域）、_page_（分页区域）、_next_（下一页区域）、_limit_（条目选项区域）、_refresh_（页面刷新区域。留神：layui 2.3.0 新增） 、_skip_（快捷跳页区域）
Array
[‘prev’, ‘page’, ‘next’]
theme
自定义主题。反对传入：_色彩值_，或_任意一般字符_。如： 1. theme: ‘#c00’ 2. theme: ‘xxx’ //将会生成 class=“layui-laypage-xxx” 的CSS类，以便自定义主题
String
-
hash
开启location.hash，并自定义 hash 值。如果开启，在触发分页时，会主动对url追加：_#!hash值={curr}_ 利用这个，能够在页面载入时就定位到指定页
String/Boolean
false
jump - 切换分页的回调
当分页被切换时触发，函数返回两个参数：_obj_（以后分页的所有选项值）、first（是否首次，个别用于初始加载的判断）
laypage.render({ elem: 'page' ,count: 100 //数据总数，从服务端失去 ,groups:10 // 间断呈现的页码个数 ,layout:['prev', 'page', 'next','limit','count'] // 自定义排版 ,limits:[5,10,20] // layout属性设置了limit值，可会呈现条数下拉抉择框 ,jump: function(obj, first){ // obj蕴含了以后分页的所有参数，比方： console.log(obj.curr); //失去当前页，以便向服务端申请对应页的数据。 console.log(obj.limit); //失去每页显示的条数 //首次不执行 if(!first){ //do something } }}); 数据表格
模块加载名称：_table_
疾速应用
创立一个table实例最简略的形式是，在页面搁置一个元素
，而后通过 table.render() 办法指定该容器。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>table数据表格</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <table id="demo"></table> </body> <script src="layui/layui.js" type="text/javascript" ></script> <script type="text/javascript"> layui.use('table', function(){ var table = layui.table; // 第一个实例 table.render({ elem: '#demo' ,url: 'user.json' // 数据接口 ,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} ]] }); }); </script></html> 数据接口 user.json
{ "code": 0, "msg": "", "count": 50, "data": [{ "id": 10000, "username": "user-0", "sex": "女", "city": "城市-0", "sign": "签名-0" }, { "id": 10001, "username": "user-1", "sex": "男", "city": "城市-1", "sign": "签名-1" }, { "id": 10002, "username": "user-2", "sex": "女", "city": "城市-2", "sign": "签名-2" }, { "id": 10003, "username": "user-3", "sex": "女", "city": "城市-3", "sign": "签名-3" }, { "id": 10004, "username": "user-4", "sex": "男", "city": "城市-4", "sign": "签名-4" } ]} 三种初始化渲染形式
机制
实用场景
办法渲染
用JS办法的配置实现渲染
（举荐）无需写过多的 HTML，在 JS 中指定原始元素，再设定各项参数即可。
主动渲染
HTML配置，主动渲染
无需写过多 JS，可专一于 HTML 表头局部
转换动态表格
转化一段已有的表格元素
无需配置数据接口，在JS中指定表格元素，并简略地给表头加上自定义属性即可
办法渲染
将根底参数的设定放在了JS代码中，且原始的 table 标签只须要一个_选择器_
<table id="demo"></table>渲染表格
layui.use('table', function(){ var table = layui.table; // 执行渲染 table.render({ elem: '#demo' // 指定原始表格元素选择器（举荐id选择器） ,url: 'user.json' // 数据接口 ,height: 315 // 容器高度 ,page:true // 开启分页 ,cols: [[ // 设置表头 {field: 'id', title: 'ID'} ,{field: 'username', title: '用户名'} ,{field: 'sex', title: '性别'} ]] }); });注：table.render()办法返回一个对象：var tableIns = table.render(options)，可用于对以后表格进行“重载”等操作。
主动渲染
在一段 table 容器中配置好相应的参数，由 table 模块外部主动对其实现渲染，而无需你写初始的渲染办法。
1) 带有 class=“layui-table” 的
标签。
2) 对标签设置属性 lay-data="" 用于配置一些根底参数
3) 在
标签中设置属性lay-data=""用于配置表头信息
<table class="layui-table" lay-data="{url:'user.json'}"> <thead> <tr> <th lay-data="{field:'id'}">ID</th> <th lay-data="{field:'username'}">用户名</th> <th lay-data="{field:'sex', sort: true}">性别</th> </tr> </thead></table> 转换动态表格
页面曾经存在了一段有内容的表格，由原始的table标签组成，只须要赋予它一些动静元素。
<table lay-filter="demo"> <thead> <tr> <th lay-data="{field:'username', width:100}">昵称</th> <th lay-data="{field:'experience', width:80, sort:true}">积分</th> <th lay-data="{field:'sign'}">签名</th> </tr> </thead> <tbody> <tr> <td>贤心1</td> <td>66</td> <td>人生就像是一场修行a</td> </tr> </tbody></table> 执行用于转换表格的JS办法
layui.use('table', function(){ var table = layui.table; // 转换动态表格 table.init('demo', { height: 315 // 设置高度 // 反对所有根底参数 }); }); 根底参数应用的场景
// 场景一：下述办法中的键值即为根底参数项table.render({ height: 300 ,url: 'user.json'}); // 场景二：下述 lay-data 外面的内容即为根底参数项，切记：值要用单引号<table lay-data="{height:300, url:'user.json'}" lay-filter="demo"> …… </table> // 更多场景：下述 options 即为含有根底参数项的对象> table.init('filter', options); // 转化动态表格> var tableObj = table.render({}); tableObj.reload(options); // 重载表格 开启分页
<!-- HTML代码 --><table id="demo"></table> // JS实现代码 layui.use('table', function(){ var table = layui.table; // 执行渲染 table.render({ elem: '#demo' // 指定原始表格元素选择器（举荐id选择器） ,url: 'user.json' // 数据接口 ,height: 315 // 容器高度 ,page:true // 开启分页 ,cols: [[ // 设置表头 {field: 'id', title: 'ID'} ,{field: 'username', title: '用户名'} ,{field: 'sex', title: '性别'} ]] }); }); 开启头部工具栏
<table id="demo" lay-filter="demo"></table><!-- 表格工具栏 --><script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <!-- lay-event 给元素绑定事件名 --> <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><!-- 表头工具栏 --><script type="text/html" id="barDemo"> <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> layui.use('table', function(){ var table = layui.table; // 执行渲染 table.render({ elem: '#demo' // 指定原始表格元素选择器（举荐id选择器） ,url: 'user.json' // 数据接口 ,height: 315 // 容器高度 ,page:true // 开启分页 ,cols: [[ // 设置表头 {field: 'id', title: 'ID'} ,{field: 'username', title: '用户名'} ,{field: 'sex', title: '性别'} ,{title:'操作', toolbar: '#barDemo'} // 绑定表头工具栏 ]] ,toolbar: '#toolbarDemo' // 开启头部工具栏，并为其绑定左侧模板 }); /** * 头工具栏事件 * 语法： table.on('toolbar(demo)', function(obj){ }); 注：demo示意选择器元素上设置的lay-filter属性值 */ table.on('toolbar(demo)', function(obj){ // obj.config.id 以后选择器的id属性值，即demo // 获取以后表格被选中的记录对象，返回数组 var checkStatus = table.checkStatus(obj.config.id); // obj.event 失去以后点击元素的事件名 switch(obj.event){ case 'getCheckData': // 获取被选中的记录的数组 var data = checkStatus.data; // 将数组数据解析成字符串 layer.alert(JSON.stringify(data)); break; case 'getCheckLength': var data = checkStatus.data; layer.msg('选中了：'+ data.length + ' 个'); break; case 'isAll': // checkStatus.isAll 判断记录是否被全选 layer.msg(checkStatus.isAll ? '全选': '未全选'); break; // 自定义头工具栏右侧图标 - 提醒 case 'LAYTABLE_TIPS': layer.alert('这是工具栏右侧自定义的一个图标按钮'); break; }; }); /** * 监听行工具事件 */ table.on('tool(demo)', function(obj){ // 失去以后操作的tr的相干信息 var data = obj.data; if(obj.event === 'del'){ // 确认框 layer.confirm('真的删除行么', function(index){ // 删除指定tr obj.del(); // index 以后弹出层的下标，通过下标敞开弹出层 layer.close(index); }); } else if(obj.event === 'edit'){ // 输入框 layer.prompt({ // 表单元素的类型 0=文本框 1=明码框 2=文本域 formType: 0 ,value: data.username }, function(value, index){ // 批改指定单元格的值 // value示意输出的值 obj.update({ username: value }); // 敞开弹出层 layer.close(index); }); } }); }); 开启单元格编辑
<table class="layui-table" lay-data="{url:'user.json', id:'demo'}" lay-filter="demo"> <thead> <tr> <th lay-data="{type:'checkbox'}">ID</th> <th lay-data="{field:'id', sort: true}">ID</th> <th lay-data="{field:'username', sort: true, edit: 'text'}">用户名</th> <th lay-data="{field:'sex', edit: 'text'}">性别</th> <th lay-data="{field:'city', edit: 'text'}">城市</th> <th lay-data="{field:'experience', sort: true, edit: 'text'}">积分</th> </tr> </thead></table> layui.use('table', function(){ var table = layui.table; // 监听单元格编辑 table.on('edit(demo)', function(obj){ var value = obj.value // 失去批改后的值 ,data = obj.data // 失去所在行所有键值 ,field = obj.field; // 失去字段 layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value); });}); 数据表格的重载
<div class="demoTable"> 搜寻ID： <div class="layui-inline"> <input class="layui-input" name="id" id="demoReload" autocomplete="off"> </div> <button class="layui-btn" id="searchBtn">搜寻</button></div><table class="layui-hide" id="demo" lay-filter="demo"></table> layui.use('table', function(){ var table = layui.table; var $ = layui.jquery; // 获取jquery对象 // 执行渲染 table.render({ elem: '#demo' // 指定原始表格元素选择器（举荐id选择器） ,url: 'user.json' // 数据接口 ,page:true // 开启分页 ,cols: [[ // 设置表头 {type: 'checkbox', fixed: 'left'} // 设置复选框 ,{field: 'id', title: 'ID'} ,{field: 'username', title: '用户名'} ,{field: 'sex', title: '性别'} ]] }); // 给指定元素绑定事件 $(document).on('click', '#searchBtn', function(data) { // 获取搜寻框对象 var demoReload = $('#demoReload'); table.reload('demo', { where: { // 设定异步数据接口的额定参数，任意设 id: demoReload.val() } ,page: { // 让条件查问从第一页开始查问，不写则从当前页开始查问，此页之前的数据将不纳入条件筛选 curr: 1 // 从新从第 1 页开始 } }); // 只重载数据 });}); sort: true, edit: ‘text’}">积分
layui.use('table', function(){
var table = layui.table;// 监听单元格编辑table.on('edit(demo)', function(obj){ var value = obj.value // 失去批改后的值 ,data = obj.data // 失去所在行所有键值 ,field = obj.field; // 失去字段 layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);});});
##### 数据表格的重载<div class="demoTable">
搜寻ID：<div class="layui-inline"> <input class="layui-input" name="id" id="demoReload" autocomplete="off"></div><button class="layui-btn" id="searchBtn">搜寻</button></div>
``jslayui.use('table', function(){ var table = layui.table; var $ = layui.jquery; // 获取jquery对象 // 执行渲染 table.render({ elem: '#demo' // 指定原始表格元素选择器（举荐id选择器） ,url: 'user.json' // 数据接口 ,page:true // 开启分页 ,cols: [[ // 设置表头 {type: 'checkbox', fixed: 'left'} // 设置复选框 ,{field: 'id', title: 'ID'} ,{field: 'username', title: '用户名'} ,{field: 'sex', title: '性别'} ]] }); // 给指定元素绑定事件 $(document).on('click', '#searchBtn', function(data) { // 获取搜寻框对象 var demoReload = $('#demoReload'); table.reload('demo', { where: { // 设定异步数据接口的额定参数，任意设 id: demoReload.val() } ,page: { // 让条件查问从第一页开始查问，不写则从当前页开始查问，此页之前的数据将不纳入条件筛选 curr: 1 // 从新从第 1 页开始 } }); // 只重载数据 });});`