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 的最新版。⽬录结构如下
-
获得 layui 后，将其完整地部署（拷⻉到项⽬中）到你的项⽬⽬录，你只需要引⼊下述两个⽂件：
-
基本的⼊⻔⻚⾯
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximumscale=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-flfluid” 的容器中，那么宽度将不会固定，⽽是 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，多余的列将⾃动另起⼀⾏。
3. 列可以同时出现最多四种不同的组合，分别是：xs（超⼩屏幕，如⼿机）、sm（⼩屏幕，如平板）、md（桌⾯中等屏幕）、lg（桌⾯⼤型屏幕）。
4. 可对列追加类似 layui-col-space5、 layui-col-md-offffset3 这样的预设类来定义列的间距和偏移。
5. 可以在列（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）的强⼒⽀持，从⽽针对四类不同尺⼨的屏幕，进⾏相应的适配处理。
<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 种不同尺⼨的边距，分别是：
示例：
<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>注：
- layui-col-space：设置后不起作⽤主要是因为设置的是padding,也就是说是向内缩，所以设置背景⾊padding也是会添上颜⾊，看起来好像没有间距⼀样。可以在⾥⾯在加⼀个div，来达到⽬的。
- 间距⼀般不⾼于30px，如果超过30，建议使⽤列偏移。
列偏移
对列追加 类似 layui-col-md-offffset* 的预设类，从⽽让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。
如：layui-col-md-offffset3，即代表在“中型桌⾯屏幕”下，让该列向右偏移 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>主题
示例：
尺⼨
<!-- 不同尺⼨的按钮 -->
<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>
</tbody>
</table>
基础属性
你所需要的基础属性写在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.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:1,
title:"系统消息",
// content可以传⼊任意的⽂本或html
content:"<div style='height:100px;width:200px'>Hello</div>"
});
/* iframe */
layer.open({
type:2,
title:"系统消息",
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。
// eg1
layer.alert('酷毙了', {icon: 1});
// eg2
layer.msg('不开⼼。。', {icon: 5});
// eg3
layer.load(1); // ⻛格1的加载- 示例
// eg1
layer.alert('很⾼兴⻅到你
!', {icon: 6});
// eg2
layer.msg('你愿意和我做朋友么？', {
time: 0, //不⾃动关闭
btn: ['当然愿意', '狠⼼拒绝'], // 按钮
yes: function(index){
layer.close(index); // 关闭当前弹出框
layer.msg('新朋友，你好！', {
icon: 6, // 图标
btn: ['开⼼','快乐']
});
}
});
// eg3
layer.msg('这是常⽤的弹出层');
// eg4
layer.msg('So sad /(ㄒoㄒ)/~~', {icon: 5});
// eg5
layer.msg('玩命加载中...=￣ω￣=', function(){
// 关闭后的操作
layer.msg('(⊙o⊙)？');
});⽇期与时间选择
模块加载名称：laydate，独⽴版本：http://www.layui.com/laydate/
layDate 包含了⼤量的更新，其中主要以：年选择器、年⽉选择器、⽇期选择器、时间选择器、⽇期时间选择器 五种类型的选择⽅式。
快速使⽤
和 layer ⼀样，可以在 layui 中使⽤ layDate，也可直接使⽤ layDate 独⽴版，请按照实际需求来选择。
在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
⽤于单独提供不同的选择器类型，可选值如下表：
//年选择器
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
⽀持的格式如下：
通过上述不同的格式符组合成⼀段⽇期时间字符串，可任意排版。
//⾃定义⽇期格式
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) 来设置基础参数。
jump - 切换分⻚的回调
当分⻚被切换时触发，函数返回两个参数：obj（当前分⻚的所有选项值）、fifirst（是否⾸次，⼀般⽤于初始加载的判断）
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": 10004,
"username": "user-4",
"sex": "男",
"city": "城市-4",
"sign": "签名-4"
}
] }
三种初始化渲染⽅式
⽅法渲染
- 将基础参数的设定放在了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 模块内部⾃动对其完成渲染，⽽⽆需你写初始的渲染⽅法。
- 带有 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); // 重载表格开启分⻚
<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'}" layfilter="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>
扫一扫
116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
