前言

在layui官网看到了它官网即将在2021.10.13停运，所以我决定将它的文档进行复制保存下来，以便于可以进行查阅
（不清楚会不会依然有官方文档，如果还有就当参考吧）

目录页

文章目录

前言
目录页
基础说明
- 开始使用
- - 开始使用 - 入门指南
  - 兼容性和面向场景
  - 获得 layui
  - 快速上手
- 经典，因返璞归真
- 建立模块入口
- 管理扩展模块
- 底层方法
- - 全局配置
  - 定义模块
  - 加载模块
- 动态加载 CSS
- - 本地存储
  - 获取浏览器信息
- 其它底层方法
- - 第三方工具
- 页面元素
- - 页面元素规范与说明
  - CSS内置公共基础类
  - CSS命名规范
  - HTML规范：结构
  - HTML规范：常用公共属性
  - 结语
模块规范
- 模块规范
- - 预先加载模块
  - 模块命名空间
  - 扩展一个 layui 模块
  - 结语
常见问题
- 常见问题
- - 哪里有 layui 未压缩源代码？
  - 应该如何加载模块？
  - 为什么表单不显示？
  - 遇到各种问题怎么办？
更新日志
- 2.6.x
- - v2.6.7 2021-05-18
  - v2.6.6 2021-05-08
  - v2.6.5 2021-04-22
  - v2.6.3/4 2021-04-05 / 2021-04-06
  - v2.6.2 2021-04-02
  - v2.6.1 2021-03-31
  - v2.6.0 2021-03-31
  - [新增] dropdown 通用下拉菜单组件
  - 2.5.x至后续
页面元素
- 布局
- - 栅格系统与后台布局
  - - 栅格系统
    - 管理系统界面布局
- 颜色
- - 主色调
  - 次色调
  - 中性色
  - 七种色
  - 结语
图标
- 字体图标
- - 使用方式
  - 内置图标一览表（168个）
  - 跨域问题的解决
动画
- CSS3动画类
- - 使用方式
  - 内置CSS3动画一览表
按钮
- 按钮 - 页面元素
- - 用法
  - 主题
  - 尺寸
  - 圆角
  - 图标
  - 按钮组
  - 按钮容器
  - 结语
表单
- 表单 - 页面元素
- - 小睹为快
  - 输入框
  - 下拉选择框
  - 复选框
  - 开关
  - 单选框
  - 文本域
  - 组装行内表单
  - 忽略美化渲染
  - 表单方框风格
  - 结语
导航
- 导航相关 - 页面元素
- - 水平导航
  - 导航主题
  - 垂直/侧边导航
  - 导航可选属性/类
  - 面包屑
菜单
- 基础菜单 - 页面元素
- - 菜单结构
  - 菜单项类型
  - 菜单项参数
  - 事件触发
  - 结语
选项卡
- Tab选项卡 - 页面元素
- - 默认Tab选项卡
  - Tab简洁风格
  - Tab卡片风格
  - Tab响应式
  - 带删除的Tab
  - ID焦点定位
  - 提示
进度条
- 进度条 - 页面元素
- - 常规用法
  - 显示进度比文本
  - 大号进度条
面板
- 面板 - 页面元素
- - 常规面板
  - 卡片面板
  - 折叠面板
  - 开启手风琴
表格
- 表格 - 页面元素
- - 常规用法
  - 基础属性
  - 表格其它风格
  - 表格其它尺寸
  - 结语
徽章
- 徽章
- - 快速使用
  - 与其它元素的搭配
  - 结语
时间线
- 时间线
- - 快速使用
  - 结语
辅助
- 简单辅助元素 - 页面元素
- - 引用区块
  - 字段集区块
  - 横线
内置模块
- 弹层组件文档 - layui.layer
- - 使用场景
  - 基础参数
  - type - 基本层类型
  - title - 标题
  - content - 内容
  - skin - 样式类名
  - area - 宽高
  - offset - 坐标
  - icon - 图标。信息框和加载层的私有参数
  - btn - 按钮
  - btnAlign - 按钮排列
  - closeBtn - 关闭按钮
  - shade - 遮罩
  - shadeClose - 是否点击遮罩关闭
  - time - 自动关闭所需毫秒
  - id - 用于控制弹层唯一标识
  - anim - 弹出动画
  - isOutAnim - 关闭动画（layer 3.0.3新增）
  - maxmin - 最大最小化。
  - fixed - 固定
  - resize - 是否允许拉伸
  - resizing - 监听窗口拉伸动作
  - scrollbar - 是否允许浏览器出现滚动条
  - maxWidth - 最大宽度
  - maxHeight - 最大高度
  - zIndex - 层叠顺序
  - move - 触发拖动的元素
  - moveOut - 是否允许拖拽到窗口外
  - moveEnd - 拖动完毕后的回调方法
  - tips - tips方向和颜色
  - tipsMore - 是否允许多个tips
  - success - 层弹出后的成功回调方法
  - layer.open({
  - yes - 确定按钮回调方法
  - cancel - 右上角关闭按钮触发的回调
  - end - 层销毁后触发的回调
  - full/min/restore -分别代表最大化、最小化、还原后触发的回调
  - minStack - 是否默认堆叠在左下角
  - layer.config(options) - 初始化全局配置
  - layer.ready(callback) - 初始化就绪
  - layer.open(options) - 原始核心方法
  - layer.alert(content, options, yes) - 普通信息框
  - layer.confirm(content, options, yes, cancel) - 询问框
  - layer.msg(content, options, end) - 提示框
  - layer.load(icon, options) - 加载层
  - layer.tips(content, follow, options) - tips层
  - layer.close(index) - 关闭指定层
  - layer.closeAll(type) - 关闭所有层
  - layer.style(index, cssStyle) - 重新定义层的样式
  - layer.title(title, index) - 改变层的标题
  - layer.getChildFrame(selector, index) - 获取iframe页的DOM
  - layer.getFrameIndex(windowName) - 获取特定iframe层的索引
  - layer.iframeAuto(index) - 指定iframe层自适应
  - layer.iframeSrc(index, url) - //重置特定iframe url
  - layer.setTop(layero) -置顶当前窗口
  - layer.full()、layer.min()、layer.restore() - 手工执行最大小化
  - layer.prompt(options, yes) - 输入层
  - layer.tab(options) - tab层
  - layer.photos(options) - 相册层
  - 结语
日期和时间
- 日期和时间组件文档 - layui.laydate
- - 快速使用
  - 基础参数选项
  - elem - 绑定元素
  - type - 控件选择类型
  - range - 开启左右面板范围选择
  - format - 自定义格式
  - value - 初始值
  - isInitValue - 初始值填充
  - isPreview - 是否开启选择值预览
  - min/max - 最小/大范围内的日期时间值
  - trigger - 自定义弹出控件的事件
  - show - 默认显示
  - position - 定位方式
  - zIndex - 层叠顺序
  - showBottom - 是否显示底部栏
  - btns - 工具按钮
  - lang - 语言
  - theme - 主题
  - calendar - 是否显示公历节日
  - mark - 标注重要日子
  - 控件初始打开的回调
  - 日期时间被切换后的回调
  - 控件选择完毕后的回调
  - 弹出控件提示
  - 配置基础路径
  - 其它方法
  - 结语
分页
- 分页模块文档 - layui.laypage
- - 快速使用
  - 基础参数选项
  - jump - 切换分页的回调
  - 结束
模板引擎
- 模板引擎文档 - layui.laytpl
- - 快速使用
  - 模版语法
  - 结语
table 数据表格
- table 数据表格文档 - layui.table
- - 快速使用
  - 三种初始化渲染方式
  - 方法渲染
  - 自动渲染
  - 转换静态表格
  - 基础参数一览表
  - cols - 表头参数一览表
  - templet - 自定义列模板
  - toolbar - 绑定工具条模板
  - 异步数据参数
  - done - 数据渲染完的回调
  - defaultToolbar - 头部工具栏右侧图标
  - text - 自定义文本
  - initSort - 初始排序
  - height - 设定容器高度
  - 设定表格外观
  - 基础方法
  - 获取选中行
  - 重置表格尺寸
  - 表格重载
  - 导出任意数据
  - 事件
  - 触发头部工具栏事件
  - 触发复选框选择
  - 触发单选框选择
  - 触发单元格编辑
  - 触发行单双击事件
  - 触发行中工具条点击事件
  - 触发排序切换
  - 结语
表单
- 表单模块文档 - layui.form
- - 使用
  - 更新渲染
  - 预设元素属性
  - 事件触发
  - 触发select选择
  - 触发checkbox复选
  - 触发switch开关
  - 触发radio单选
  - 触发submit提交
  - 表单赋值 / 取值
  - 表单验证
  - 再次温馨提示一下
文件上传
- 图片/文件上传 - layui.upload
- - 快速使用
  - 核心方法与基础参数选项
  - 上传接口
  - 选择文件的回调
  - 文件上传前的回调
  - 上传接口请求成功的回调
  - 上传请求失败的回调
  - 多文件上传完毕后的状态回调
  - 文件上传进度的回调
  - 重载实例
  - 重新上传
  - 跨域上传
下拉菜单
- 下拉菜单组件文档 - layui.dropdown
- - 快速使用
  - 基础参数
  - 菜单项参数
  - 菜单项被点击的回调
  - 自定义菜单项模板
  - 右键菜单
  - 结语
穿梭框
- 穿梭框组件文档 - layui.transfer
- - 快速使用
  - 基础参数
  - 数据源格式
  - 左右穿梭的回调
  - 基础方法
  - 获得右侧数据
  - 实例重载
  - 结语
树形组件
- 树形组件文档 - layui.tree
- - 快速使用
  - 基础参数
  - 数据源属性选项
  - 节点被点击的回调
  - 复选框被点击的回调
  - 操作节点的回调
  - 返回选中的节点数据
  - 设置节点勾选
  - 实例重载
  - 结语
颜色选择器
- 颜色选择器文档 - layui.colorpicker
- - 使用
  - 基础参数
  - 预定义颜色
  - 颜色被改变的回调
  - 颜色选择后的回调
  - 结语
常用元素
- 常用元素操作 - layui.element
- - 使用
  - 预设元素属性
  - 基础方法
  - 更新渲染
  - 事件触发
  - 触发选项卡切换
  - 触发选项卡删除
  - 触发导航菜单的点击
  - 触发折叠面板
  - 动态操作进度条
  - 结语
滑块
- 滑块文档 - layui.slider
- - 使用
  - 基础参数
  - 自定义提示文本
  - 数值改变的回调
  - 实例方法
  - 动态改变滑块数值
  - 结语
评分
- 评分组件文档 - layui.rate
- - 使用
  - 基础参数
  - 分数设置
  - 自定义文本的回调
  - 点击产生的回调
  - 结语
轮播组件
- 通用轮播组件文档 - layui.carousel
- - 快速使用
  - 基础参数选项
  - 切换事件
  - 重置轮播
  - 结语
流加载
- 流加载文档 - layui.flow
- - 使用
  - 信息流
  - 图片懒加载
  - 结语
工具组件
- 工具集文档 - layui.util
- - 固定块
  - 倒计时
  - 其它方法
  - 结语
代码高亮
- 代码高亮文档 - layui.code
- - 使用
  - 基础参数方法：
  - 指定元素
  - 设置标题
  - 设置最大高度
  - 转义html标签
  - 风格选择

基础说明

开始使用

开始使用 - 入门指南

layui（谐音：类 UI) 是一套开源的 Web UI 解决方案，采用自身经典的模块化规范，并遵循原生 HTML/CSS/JS 的开发方式，极易上手，拿来即用。其风格简约轻盈，而组件优雅丰盈，从源代码到使用方法的每一处细节都经过精心雕琢，非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，它更多是面向后端开发者，你无需涉足前端各种工具，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

兼容性和面向场景

layui 兼容人类正在使用的全部浏览器（IE6/7除外），可作为 Web 界面速成开发方案。

获得 layui

它的下载方式如下；它经过了自动化构建，更适合用于生产环境。目录结构如下：

  ├─css //css目录│  │─modules //模块 css 目录（一般如果模块相对较大，我们会单独提取，如下：）│  │  ├─laydate│  │  └─layer│  └─layui.css //核心样式文件├─font  //字体图标目录└─layui.js //核心库

1.通过码云：

码云: layui-gitee.
github: layui-github.

2.通过npm

npm i layui

3.第三方 CDN 方式引入：
UNPKG 和 CDNJS 均为第三方开源免费的 CDN，通过 NPM/GitHub 实时同步

UNPKG：
UNPKG引入示例：

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

CDNJS:
CDNJS: layui-cdnjs.

layuiCDN：
layuiCDN: layui-cdn.

快速上手

如果你将 layui 下载到了本地，那么可将其完整地放置到你的项目目录（或静态资源服务器），这是一个基本的入门页面：

<!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>

经典，因返璞归真

layui 定义为「经典模块化」，并非是自吹她自身有多优秀，而是有意避开当下 JS 社区的主流方案，试图以尽可能简单的方式去诠释高效！她的所谓经典，是在于对返璞归真的执念，她以当前浏览器普通认可的方式去组织模块！我们认为，这恰是符合当下国内绝大多数程序员从旧时代过渡到未来新标准的绝佳指引。所以 layui 本身也并不是完全遵循于 AMD 时代，准确地说，她试图建立自己的模式：

//layui 模块的定义（新 js 文件）
layui.define([mods], function(exports){//……exports('mod', api);
});  //layui 模块的使用
layui.use(['mod1', 'mod2'], function(args){var mod = layui.mod1;//……});

没错，她具备早前 AMD 的影子，又并非受限于 CommonJS 的那些条条框框，layui 认为这种轻量的组织方式，比WebPack更符合绝大多数场景。所以她坚持采用经典模块化，也正是能让人避开工具的复杂配置，回归简单，安静高效地编织原生态的 HTML/CSS/JS。

但是 layui 又并非是 RequireJS 那样的模块加载器，而是一款 UI 解决方案，与 BootStrap 的不同又在于：layui 糅合了自身对经典模块化的理解。这使得你可以在 layui 组织的框架之内，以更具可维护性的代码、去更好的编织丰富的用户界面。

建立模块入口

您可以遵循 layui 的模块规范建立一个入口文件，并通过 layui.use() 方式来加载该入口文件，如下所示：

<!-- 你引入的 layui.js 建议是通过官网首页下载的。当然也可以由 github 或 gitee clone -->
<script src="./layui/layui.js"></script>
<script>
layui.config({base: '/res/js/modules/' //你存放新模块的目录，注意，不是 layui 的模块目录
}).use('index'); //加载入口
</script>

上述的 index 即为你 /res/js/modules/ 目录下的 index.js，它的内容应该如下：

/**index.js 项目 JS 主入口以依赖 layui 的 layer 和 form 模块为例
**/
layui.define(['layer', 'form'], function(exports){var layer = layui.layer,form = layui.form;layer.msg('Hello World');exports('index', {}); //注意，这里是模块输出的核心，模块名必须和 use 时的模块名一致
});

从 layui 2.6 开始，如果你引入的是构建后的 layui.js，里面即包含了 layui 所有的内置模块，无需再指定内置模块。如：

/**index.js 项目 JS 主入口
**/
layui.define(function(){ // 需确保您的 layui.js 是引入的构建后的版本（即官网下载或 git 平台的发行版）//直接可得到各种内置模块var layer = layui.layer,form = layui.form,table = layui.table;//…layer.msg('Hello World');exports('index', {}); //注意，这里是模块输出的核心，模块名必须和 use 时的模块名一致
});

管理扩展模块

除了使用 layui 的内置模块，必不可少也需要加载扩展模块（可以简单理解为符合 layui 模块规范的 JS 文件）。我们假设你的项目中存放了很多个扩展模块，如下所举：

//mod1.js
layui.define('layer', function(exports){//…exports(mod1, {});
});//mod2.js，假设依赖 mod1 和 form
layui.define(['mod1', 'form'], function(exports){//…exports(mod2, {});
});  //mod3.js
//…//main.js 主入口模块
layui.define('mod2', function(exports){//…exports('main', {});
});

上述扩展模块在经过了一定的模块依赖关系后，同样可以合并为一个文件来加载。我们可以借助 Gulp 将上述的 mod1、mod2、mod3、main 等扩展模块构建合并到一个模块文件中：main.js，此时你只需要加载它即可：

<script src="./layui/layui.js"></script>
<script>
layui.config({base: '/res/js/modules/' //你的扩展模块所在目录
}).use('main'); //这里的 main 模块包含了 mod1、mod2、mod3 等等扩展模块
</script>

可以看到，这样我们最多只需要加载两个 JS 文件：layui.js、main.js。这将大幅度减少静态资源的请求。
通过上面的阅读，也许你已大致了解如何使用 layui 了，不过你可能还需要继续阅读后面的文档，尤其是「基础说明」。
那么，欢迎你开始拥抱 layui！愿它能成为你得心应手的 Web 界面解决方案，化作你方寸屏幕前的亿万字节！

底层方法

本篇主要介绍基础库所发挥的作用，其中过滤了大部分在外部不常用的方法，侧重罗列了基础框架支撑。

全局配置

方法：layui.config(options)

你可以在使用模块之前，全局化配置一些参数，尽管大部分时候它不是必须的。所以我们目前提供的全局配置项非常少，这也是为了减少一些不必要的工作，尽可能让使用变得更简单。目前支持的全局配置项如下：

layui.config({dir: '/res/layui/' //layui.js 所在目录（如果是 script 单独引入 layui.js，无需设定该参数）一般可无视,version: false //一般用于更新模块缓存，默认不开启。设为 true 即让浏览器不缓存。也可以设为一个固定的值，如：201610,debug: false //用于开启调试模式，默认 false，如果设为 true，则JS模块的节点会保留在页面,base: '' //设定扩展的 layui 模块的所在目录，一般用于外部模块扩展
});

如果你对 layui.js 本身进行了动态加载等其他特殊场景，那么上述layui.config 所设定的dir参数会因此失效，它会在部分组件的依赖文件（css）加载后才执行，此时你可以在动态加载 layui.js 之前预先定义一个我们约定好的全局对象：

<script>
var LAYUI_GLOBAL = {dir: '/res/layui/' //layui.js 所在目录（layui 2.6.6 开始新增）
};
</script>

提示：以上 dir 参数的目录设定仅针对特殊场景，如是采用 script 标签正常引入 layui 的，可以无视该 dir 参数。

定义模块

方法：layui.define([mods], callback)

通过该方法可在新的 JS 文件中定义一个 layui 模块。参数 mods 是可选的，用于声明该模块所依赖的模块。callback 即为模块加载完毕的回调函数，它返回一个 exports 参数，用于输出该模块的接口。

/** demo.js **/
layui.define(function(exports){//do somethingexports('demo', {msg: 'Hello Demo'});
});

跟 RequireJS 最大不同的地方在于接口输出，exports 是一个函数，它接受两个参数，第1个参数为模块名，第2个参数为模块接口。
当你声明了上述的一个模块后，你就可以在外部使用了，demo 就会注册到 layui 对象下，即可通过 var demo = layui.demo 去得到该模块接口。你也可以在定义一个模块的时候，声明该模块所需的依赖，如：

/** demo.js **/
layui.define(['layer', 'laypage', 'mod1'], function(exports){ //此处 mod1 为你的任意扩展模块//do somethingexports('demo', {msg: 'Hello Demo'});
});

上述的 layer、laypage 都是 layui 的内置模块。

加载模块

方法：layui.use([mods], callback)

参数 mods：如果填写，必须是一个 layui 合法的模块名（不能包含目录）。
从 layui 2.6 开始，若 mods 不填，只传一个 callback 参数，则表示引用所有内置模块。
参数 callback：即为模块加载完毕的回调函数。
从 layui 2.6 开始，该回调会在 html 文档加载完毕后再执行，确保你的代码在任何地方都能对元素进行操作。

//引用指定模块
layui.use(['layer', 'laydate'], function(){var layer = layui.layer,laydate = layui.laydate;//do something
});//引用所有模块（layui 2.6 开始支持）
layui.use(function(){var layer = layui.layer,laydate = layui.laydate,table = layui.table;//…//do something
});

你还可以通过回调函数得到模块对象，如

//通过回调的参数得到模块对象
layui.use(['layer', 'laydate', 'table'], function(layer, laydate, table){//使用 layerlayer.msg('test');//使用 laydatelaydate.render({});//使用 tabletable.render({})
});

动态加载 CSS

方法：layui.link(href)

href 即为 css 路径。注意：该方法并非是你使用 layui 所必须的，它一般只是用于动态加载你的外部 CSS 文件。

本地存储

本地存储是对 localStorage 和 sessionStorage 的友好封装，可更方便地管理本地数据。

localStorage 持久化存储：layui.data(table, settings)，数据会永久存在，除非物理删除。
sessionStorage 会话性存储：layui.sessionData(table, settings)，页面关闭后即失效。注：layui 2.2.5 新增

上述两个方法的使用方式是完全一样的。其中参数 table 为表名，settings是一个对象，用于设置 key、value。下面以 layui.data 方法为例：

//【增】：向 test 表插入一个 nickname 字段，如果该表不存在，则自动建立。
layui.data('test', {key: 'nickname',value: '贤心'
});//【删】：删除 test 表的 nickname 字段
layui.data('test', {key: 'nickname',remove: true
});
layui.data('test', null); //删除test表//【改】：同【增】，会覆盖已经存储的数据//【查】：向 test 表读取全部的数据
var localTest = layui.data('test');
console.log(localTest.nickname); //获得“贤心”

获取浏览器信息

方法：layui.device(key)，参数 key 是可选的

由于 layui 的一些功能进行了兼容性处理和响应式支持，因此该方法同样发挥了至关重要的作用。其返回的信息如下：

var device = layui.device();//device 即可根据不同的设备返回下述不同的信息

{os: "windows" //当前浏览器所在的底层操作系统，如：Windows、Linux、Mac 等,ie: false //当前浏览器是否为 ie6-11 的版本，如果不是 ie 浏览器，则为 false,weixin: false //当前浏览器是否为微信 App 环境,android: false //当前浏览器是否为安卓系统环境,ios: false //当前浏览器是否为 IOS 系统环境,mobile: false //当前浏览器是否为移动设备环境（v2.5.7 新增）
}

有时你的 App 可能会对 userAgent 插入一段特定的标识，譬如：

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 myapp/1.8.6 Safari/537.36

你要验证当前的 WebView 是否在你的 App 环境，即可通过上述的myapp（即为 Native 给 Webview 插入的标识，可以随意定义）来判断。

var device = layui.device('myapp');
if(device.myapp){alert('在我的App环境');
}

其它底层方法

除上述介绍的方法外，layui 内部还提供了许多底层引擎，他们同样是整个 layui 框架的有力支撑，在日常应用中通常也会用到：

方法/属性	描述
layui.cache	静态属性。获得一些配置及临时的缓存信息
layui.extend(options)	拓展一个模块别名，如：layui.extend({test: ‘/res/js/test’})
layui.each(obj, fn)	对象（Array、Object、DOM 对象等）遍历，可用于取代 for 语句
layui._typeof(operand)	获取详细数据类型（基本数据类型和各类常见引用类型）如：layui._typeof([]); //array layui._typeof({}); //object layui._typeof(new Date()); //date等等。该方法为 layui 2.6.7 新增
layui._isArray(obj)	对象是否为泛数组结构。如 Array、NodeList、jQuery 对象等等。layui._isArray([1,6]); //true layui._isArray($(‘div’)); //true layui._isArray(document.querySelectorAll(‘div’)); //true该方法为 layui 2.6.7 新增
layui.getStyle(node, name)	获得一个原始 DOM 节点的 style 属性值，如：layui.getStyle(document.body, ‘font-size’)
layui.img(url, callback, error)	图片预加载
layui.sort(obj, key, desc)	将数组中的对象按某个成员重新对该数组排序，如：layui.sort([{a: 3},{a: 1},{a: 5}], ‘a’)
layui.router()	获得 location.hash 路由结构，一般在单页面应用中发挥作用。
layui.url(href)	用于将一段 URL 链接中的 pathname、search、hash 属性值进行对象化处理。参数： href 可选。若不传，则自动读取当前页面的 url（即：location.href）示例：var url = layui.url();
layui.hint()	向控制台打印一些异常信息，目前只返回了 error 方法：layui.hint().error(‘出错啦’);
layui.stope(e)	阻止事件冒泡
layui.onevent(modName, events, callback)	增加自定义模块事件。有兴趣的同学可以阅读 layui.js 源码以及 form 模块
layui.event(modName, events, params)	执行自定义模块事件，搭配 onevent 使用
layui.off(events, modName)	用于移除模块相关事件的监听（v2.5.7 新增）如：layui.off(‘select(filter)’, ‘form’)，那么 form.on(‘select(filter)’, callback)的事件将会被移除。
layui.factory(modName)	用于获取模块对应的 define 回调函数

第三方工具

layui 部分模块依赖 jQuery（比如 layer），但是你并不用去额外加载 jQuery。layui 已经将 jQuery 最稳定的一个版本改为 layui 的内部模块，当你去使用 layer 之类的模块时，它会首先判断你的页面是否已经引入了 jQuery，如果没有，则加载内部的 jQuery 模块，如果有，则不会加载。

另外，我们的图标取材于阿里巴巴矢量图标库（iconfont），构建工具采用 Gulp 。除此之外，不依赖于任何第三方工具。

页面元素

页面元素规范与说明

layui 提倡返璞归真，遵循于原生态的元素书写规则，所以通常而言，你仍然是在写基本的 HTML 和 CSS 代码，不同的是，在 HTML 结构上及 CSS 定义上需要小小遵循一定的规范。

CSS内置公共基础类

类名（class）	说明
布局 / 容器	/
--------	-----
layui-main	用于设置一个宽度为 1140px 的水平居中块（无响应式）
layui-inline	用于将标签设为内联块状元素
layui-box	用于排除一些UI框架（如Bootstrap）强制将全部元素设为box-sizing: border-box所引发的尺寸偏差
layui-clear	用于消除浮动（一般不怎么常用，因为layui几乎没用到浮动）
layui-btn-container	用于定义按钮的父容器。（layui 2.2.5 新增）
layui-btn-fluid	用于定义流体按钮。即宽度最大化适应。（layui 2.2.5 新增）
辅助	/
layui-icon	用于图标
layui-elip	用于单行文本溢出省略
layui-unselect	用于屏蔽选中
layui-disabled	用于设置元素不可点击状态
layui-circle	用于设置元素为圆形
layui-show	用于显示块状元素
layui-hide	用于隐藏元素
文本	/
layui-text	定义一段文本区域（如文章），该区域内的特殊标签（如a、li、em等）将会进行相应处理
layui-word-aux	灰色标注性文字，左右会有间隔
背景色	/
layui-bg-red	用于设置元素赤色背景
layui-bg-orange	用于设置元素橙色背景
layui-bg-green	用于设置元素墨绿色背景（主色调）
layui-bg-cyan	用于设置元素藏青色背景
layui-bg-blue	用于设置元素蓝色背景
layui-bg-black	用于设置元素经典黑色背景
layui-bg-gray	用于设置元素经典灰色背景
字体大小及颜色	/

code
layui-font-12 （12px 的字体）
layui-font-14 （14px 的字体）
layui-font-16 （16px 的字体）
layui-font-18 （18px 的字体）
layui-font-20 （20px 的字体）
layui-font-red （红色字体）
layui-font-orange （橙色字体）
layui-font-green （绿色字体）
layui-font-cyan （青色字体）
layui-font-blue （蓝色字体）
layui-font-black （黑色字体）
layui-font-gray （灰色字体）

CSS命名规范

class命名前缀：layui，连接符：-，如：class=“layui-form”

命名格式一般分为两种：一：layui-模块名-状态或类型，二：layui-状态或类型。因为有些类并非是某个模块所特有，他们通常会是一些公共类。如：一（定义按钮的原始风格）：class=“layui-btn layui-btn-primary”、二（定义内联块状元素）：class=“layui-inline”

大致记住这些简单的规则，会让你在填充HTML的时候显得更加得心应手。另外，如果你是开发Layui拓展（模块），你最好也要遵循于类似的规则，并且请勿占用Layui已经命名好的类，假设你是在帮Layui开发一个markdown编辑器，你的css书写规则应该如下：

.layui-markdown{border: 1px solid #e2e2e2;}
.layui-markdown-tools{}
.layui-markdown-text{}

HTML规范：结构

Layui在解析HTML元素时，必须充分确保其结构是被支持的。以Tab选项卡为例：

<div class="layui-tab"><ul class="layui-tab-title"><li class="layui-this">标题一</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>
</div>

你如果改变了结构，极有可能会导致Tab功能失效。所以在嵌套HTML的时候，你应该细读各个元素模块的相关文档（如果你不是拿来主义）

HTML规范：常用公共属性

很多时候，元素的基本交互行为，都是由模块自动开启。但不同的区域可能需要触发不同的动作，这就需要你设定我们所支持的自定义属性来作为区分。如下面的 lay-submit、lay-filter即为公共属性（即以 lay- 作为前缀的自定义属性）：

<button class="layui-btn" lay-submit lay-filter="login">登入</button>

目前我们的公共属性如下所示（即普遍运用于所有元素上的属性）

属性	描述
lay-skin=" "	定义相同元素的不同风格，如checkbox的开关风格
lay-filter=" "	事件过滤器。你可能会在很多地方看到他，他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器
lay-submit	定义一个触发表单提交的button，不用填写值

额，好像有点少的样子（反正你也基本不会看文档。。(づ╥﹏╥)づ）。其它的自定义属性基本都在各自模块的文档中有所介绍。

结语

其实很多时候并不想陈列条条框框（除了一些特定需要的），所以你会发现本篇的篇幅较短。（哈哈哈哈哈，其实是写文档写得想吐了）

模块规范

layui 定义了一套更轻量的模块规范。并且这种方式在经过了大量的实践后，成为 layui 最核心的模块加载引擎。

预先加载模块

layui 通过 use 方法加载模块。当你的 JS 需要用到 layui 模块的时候，且避免到处写 layui.use() 的麻烦。你应该在最外层如此定义：

layui.use(['form', 'upload'], function(){  //如果只加载一个模块，可以不填数组。如：layui.use('form')var form = layui.form //获取form模块,upload = layui.upload; //获取upload模块//监听提交按钮form.on('submit(test)', function(data){console.log(data);});//实例化一个上传控件upload({url: '上传接口url',success: function(data){console.log(data);}})
});

模块命名空间

layui 的模块对象会绑定在 layui 对象下，内部由 layui.define() 方法来完成。每个模块都有一个特定命名，且无法被占用。所以你无需担心模块的空间被污染，除非你主动 delete layui[‘模块名’]。调用模块可通过 layui.use() 来实现，再通过 layui 对象获得模块对象。如：

layui.use(['layer', 'laypage', 'laydate'], function(){var layer = layui.layer //获得 layer 模块,laypage = layui.laypage //获得 laypage 模块,laydate = layui.laydate; //获得 laydate 模块//使用模块
});

我们推荐你将所有的业务代码都写在一个大的 use 回调中，而不是将模块接口暴露给全局，比如下面的方式我们是极不推荐的：

//强烈不推荐下面的做法
var laypage, laydate;
layui.use(['laypage', 'laydate'], function(){laypage = layui.laypage;laydate = layui.laydate;
});

你之所以想使用上面的错误方式，是想其它地方使用不在执行一次 layui.use？但这种理解本身是存在问题的。因为如果一旦你的业务代码是在模块加载完毕之前执行，你的全局对象将获取不到模块接口，因此这样用不仅不符合规范，还存在报错风险。建议在你的 js 文件中，在最外层写一个 layui.use 来加载所依赖的模块，并将业务代码写在回调中，这样还可以确保 html 文档加载完毕再执行回调代码。

扩展一个 layui 模块

layui 官方提供的模块有时可能还无法满足你，或者你试图按照layer的模块规范来扩展一个模块。那么你有必要认识layui.define()方法，相信你在文档左侧的“底层方法”中已有所阅读。下面就让我们一起扩展一个 layui 模块吧：

第一步：确认模块名，假设为：mymod，然后新建一个mymod.js 文件放入项目任意目录下（注意：不用放入layui目录）

第二步：编写 mymod.js 如下：

/**扩展一个 mymod 模块
**/      layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define('mod1', callback);var obj = {hello: function(str){alert('Hello '+ (str||'mymod'));}};//输出 mymod 接口exports('mymod', obj);
});

第三步：设定扩展模块所在的目录，然后就可以在别的JS文件中使用了

//config的设置是全局的
layui.config({base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});//你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）
layui.extend({mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径，即不跟随 base 路径
})//使用拓展模块
layui.use(['mymod', 'mod1'], function(){var mymod = layui.mymod,mod1 = layui.mod1,mod2 = layui.mod2;mymod.hello('World!'); //弹出 Hello World!
});

大体上来说，layui 的模块定义很类似 Require.js 和 Sea.js，但跟他们又有着明显的不同，譬如在接口输出等地方。

结语

其实关于模块的核心，就是 layui.js 的两个底层方法：一个用于定义模块的 layui.define()，一个加载模块的 layui.use()。

常见问题

本篇将主要讲解使用过程中普遍遇到的“问题”，并非是 BUG，通常是需要我们自己去注意的一些点。（持续补充）

哪里有 layui 未压缩源代码？

之所以在下载包里没有提供未压缩的源代码，是为了方便直接用于生产环境。layui 源代码可通过以下平台获取：

码云: layui-gitee.
github: layui-github.

应该如何加载模块？

layui.use(['layer', 'form', 'element'], function(){var layer = layui.layer,form = layui.form,element = layui.element//……//你的代码都应该写在这里面
});

为什么表单不显示？

当你使用表单时，layui 会对 select、checkbox、radio 等原始元素隐藏，从而进行美化修饰处理。但如果您的表单元素是动态添加的，那么在组件初始加载的时候是无法读取到的，这是你只需执行一个视图渲染的实例即可。#详见说明

layui.use('form', function(){var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功//……//如果你的 HTML 是动态生成的，自动渲染就会失效//因此你需要在相应的地方，执行下述方法来进行渲染form.render();
});

同理的还有 element 模块(见后面目录)

遇到各种问题怎么办？

求助 Gitee 开发者社区，抱团取暖
Gitee 开发者社区: Gitee 开发者社区.

更新日志

2.6.x

v\v2.6.8 2021-05-30
[重写] sort 方法，以便对数字、非数字及混合类等所有内容的排序进行支持
[新增] dropdown 组件的 align 参数，用于控制下拉菜单水平对齐方式（支持 left、center、right），默认 left
[新增] table 组件的 escape 参数，用于是否开启 xss 字符过滤（默认 false）
[加强] table 组件的自定义模板功能，返回 LAY_COL 字段，可得到当前列的表头配置信息
[加强] form 组件对验证不通过的表单项自动定位到可视区域，不再是只对输入框自动获焦定位 #I3O5TC
[加强] form 组件对 url 的验证
[修复] form 相关 css 的 layui-checkbox-disabled 书写错误（之前为 disbaled） #I1NGDC
[修复] form 组件的 select option 内容出现换行时的样式异常问题 #I3T5ZC
[修复] colorpicker 颜色选择组件在 Firefox 下选择颜色时的若干兼容问题 #I3POP2
[加强] colorpicker 组件的坐标定位计算方式
[修复] 低版本 ie 若干报错问题

v2.6.7 2021-05-18

[新增] layui._typeof(operand) / layui._isArray(obj) 两个基础方法，分别为"获取详细数据类型"、"对象是否为泛数组"
[重写] layui.each() 基础方法，以兼容各种对象遍历
[修复] layui.sort(obj) 基础方法，在比较某些值相等时出现排序异常的问题
[修复] form 组件当 layui-form 元素出现层级嵌套，其提交的表单未按当前层级的问题
[修复] layer.photos 层在 iframe 页面中通过 parent 无法弹出的历史弥久问题
[修复] table 组件当数据存在 length 字段并为 0 时，未被显示的问题
[修复] laydate 组件范围选择的若干问题
[优化] upload 组件 before 回调，若 return false，则表明阻止上传
[优化] element nav 鼠标移至滑动块致其闪动的问题
[优化] 若干样式细节

v2.6.6 2021-05-08

[优化] layer 组件容器构建的核心代码，以解决自 2.6.0 以来在特殊场景下存在的某些异常问题
[优化] layer 组件当点击最小化时，让遮罩消失，窗口还原时恢复遮罩
[新增] layer 组件的 minStack 参数，用于控制最小化后是否默认堆叠在左下角
[新增] element nav 组件水平导航的子级菜单的两种对齐方式：右对齐，居中对齐
[新增] element nav 组件的 lay-bar="disabled" 属性，用于禁用滑块跟随功能
[优化] element nav 组件各种样式细节，其中包括下拉图标、子菜单等
[优化] element nav 组件在垂直导航场景时的滑块跟随功能
[优化] element tab 组件 tabAdd 方法，可将任意额外参数 {key} 组成 lay-{key}="{value}" 属性
[优化] element tab 组件当标题栏包含 a 标签时，点击 tab 切换，但未触发 a 标签跳转的问题
[新增] laydate 组件的 isPreview 参数，用于控制是否显示当前选择值的预览（默认 true）
[优化] laydate 组件的日期范围选择，因左右日期面板独立，固取消范围区间标注，增加开始-结束文本预览
[优化] laydate 组件的 range 参数，可支持传入数组，用于分别指定开始日期和结束日期的选择器
[优化] laydate 组件的时间范围选择，初始结束时间为 23:59:59
[优化] laydate 组件的当前日期不在设定的最小（min）和最大（max）日期内，则自动校正面板可选的初始日期
[优化] laydate 组件的选中完毕的赋值逻辑，对非 input 元素，如果存在子元素，则不进行默认赋值操作，由回调去处理
[优化] laydate 组件之前版本一直存在的初始处全局事件重复绑定的问题
[修复] laydate 组件当开启范围选择，未触发 change 回调的问题
[修复] laydate 组件在 ie11 因 laydate-day-mark 的 height：100% 导致的异常
[优化] upload 组件的多文件上传，可更好的对每个文件显示上传进度
[优化] flow 组件的 flow.lazyimg() 方法，对图片懒加载支持占位图显示（占位图 src，预加载图 lay-src）
[优化] util 组件的 util.toDateString((msec, format) 方法，可对第一个参数进行自动纠正和毫秒数无效的提示
[新增] 对名为 LAYUI_GLOBAL 的全局对象的识别，当对 layui.js 本身进行动态加载等特殊场景下，可通过该对象更好地解决部分组件依赖文件（css）的路径问题
[优化] 底层 layui.each() 核心代码
[优化] layout admin 大框架布局，可适配各个终端
[提示] Google 在近期发布的 Chrome v90 第三个维护版本 Chrome 90.0.4430.93，修复了上两个版本因关闭打印窗口导致的浏览器卡顿问题（之前 layui table 的打印亦受此影响）

v2.6.5 2021-04-22

[修复] layer 组件在 Ajax 等场景下，存在概率性无法关闭层的问题
[优化] layer 组件的 close 和 closeAll 方法，第二个参数可传入回调，用于层被关闭后的操作
[修复] layer 组件的 photos 层对动态生成的图片无法识别的问题
[优化] layer 组件的 photos 相关样式，上下切换图标调整到页面左右边缘，图片描述和序号调整到页面底部
[修复] form 组件的 name="arr[]" 在元素动态插入后出现序号异常的问题 #I3HY4U -Gitee
[优化] laytpl 组件，支持解析复杂反斜杠 #780 -Github
[修复] upload 组件当开启进度条且拖拽文件上传时出现报错问题
[修复] table 组件当 cols 表头设置了 templet 为函数时，存在返回 {多余字段: "NaN"} 的问题
[优化] table 组件的自动渲染
[优化] 底层 layui.link() 方法

v2.6.3/4 2021-04-05 / 2021-04-06

[优化] layui.use() 核心机制：1) 确保 html 文档被完全加载就绪再执行回调；2) 当第一个参数为 function 时，则表示加载所有内置模块，且执行的回调即为该 function 参数；（该优化是对 2.6 版本的一次真正巩固，确保了 2.6.0 推荐的「所有内置模块一次性加载」的可行性，可以说是里程碑式的改进，极大地纠正了开发者因不规范代码而造成的各种异常，且对之前版本采用的异步按需加载模块的代码，实现了无缝兼容）
[新增] all 内置模块，用于在开发模式（即引入源码的 src 目录）时加载所有内置模块
[新增] table 组件对合计行自定义模板的支持，即当 totalRow 参数为 string 类型时可解析为动态模板。
[优化] layer 组件的 close 方法在对初始打开的弹层执行关闭时，可能存在的极少概率无法关闭的问题
[优化] layDate 组件日期范围内的样式

v2.6.2 2021-04-02

[优化] table 组件的 table.reload() 的深度重载和浅重载机制
[优化] layout 管理大布局底部样式

v2.6.1 2021-03-31

[新增] table 组件加载失败时的 error 回调
[优化] 按钮的尺寸，纯背景色按钮与带边框的按钮，在同等字符长度下尺寸相同
[优化] 时间线只有一条数据时仍然显示线的问题，并优化其他细节
[优化] 管理系统大布局样式，滚动条采用 body 默认，而非之前的 layui-body 所在的元素

v2.6.0 2021-03-31

该版本重要提示：
[调整] 将所有内置模块构建为一个文件，这意味着 当你引入的是从官网下载（或者开源平台下载的 dist 目录）的 layui.js，则不必再按需异步加载内置模块，直接即可使用 layui 所有组件库。该调整对模块化的写法不受影响。
但需注意以下几点：
1) 如果之前引入了 layui.all.js 的，现在必须改成 layui.js
2) 如果元素存在动态插入，那么您需要执行元素所对应组件的 render() 方法，如 form.render()
3) 引入 layui.js 的 <script> 标签最好放置在 body 末尾。这是为了能对一些元素进行自动渲染。
[调整] table 组件的 table.reload(id, options, deep) 方法，可通过 deep 参数控制是否采用深度重载（即参数深度克隆，也就是重载时始终携带初始时及上一次重载时的参数），默认为浅重载。请注意：如果你之前已经习惯深度重载模式的，现在请在第三个参数中，加上 true，如：table.reload(ID, options, true); //这样就跟 v2.5.7 及之前版本处理机制完全一样。

[新增] dropdown 通用下拉菜单组件

亦可作为「右键菜单组件」使用
[支持] 无限层级嵌套
[支持] 子级菜单的横和竖两种展示方式
[支持] 局部或全局的自定义菜单列表模板，可给菜单列表添加任意元素（图片、图标等）
[支持] 自定义事件，可通过 click、hover、contextmenu（鼠标右键）等等方式调出组件面板
[支持] className、style 属性，用于对组件的样式重置
[新增] 基础菜单（layui-menu）样式结构，可无限层级嵌套
[新增] 常规面板（layui-panel）样式结构
[优化] layer 组件的核心代码，当初始执行弹窗时，不必再套一层 layer.ready() 了
[优化] layer 组件局部样式，以更贴近简约和百搭
[优化] layDate 组件的日期范围选择，不再是之前一样左右联动的操作方式，而是左右保持完全独立的选择
[优化] layDate 组件局部样式，及剔除多余 js 代码
[修复] layDate 组件中当设为年/月选择器时，点击选择年/月数值时，面板未自动关闭的问题
[修复] layDate 组件当 lang 设置为 'en' 时，部分提示内容未显示英文的问题
[新增] table 组件的 table.getData(id) 方法，用于获取表格当前页的所有行数据（现在不必再通过 table.cache 获取）
[修复] table 组件的 table.reload() 重载方法在多次执行时，会携带上一次执行时的参数的重大 BUG
[新增] util 组件的 unescape(str) 方法，用于将转义后的 HTML 还原
[优化] code 组件整体样式
[优化] 整体边框/背景等色调，以及边距尺寸，以使得视觉搭配更加和谐自然
[优化] 按钮部分样式细节，以及新增对边框按钮各种色系的更好支持
[优化] hr 横线样式，以防止某些情况出现边框模糊的问题
[新增] 新增 CSS3 从顶部往下滑入、微微往下滑入、平滑放小、弹簧式放小四种动画，并优化部分过度动画
[新增] layui-font-* 样式，可定义常见字体大小和颜色

2.5.x至后续

作者君很懒，后续放一起了

v2.5.7 2020-11-27
[新增] layui.off(events, modName) 方法，用于移除模块相关事件的监听 #详见文档
[优化] layui.device() 方法，加入 mobile 属性，用于识别是否是在移动设备中
[优化] form 组件的 verify 方法，如果返回 true，则不自动弹出提示框
[修复] table 组件无数据时且开启初始排序功能，未显示「无数据」提示文案的问题
[优化] slider 组件多处细节样式以及数字输入框始终保持显示
[修复] slider 组件在设置 setTips 自定义提示文本时，change 回调返回的 value 也随之改变问题
[修复] slider 组件在点击数字输入框加减按钮时，起始值未按初始值进行计算的问题
[修复] rate 组件的 value 大于 length 时的文本显示异常问题
[修复] tree 等部分组件在低版本浏览器下的若干问题
v2.5.6 2020-01-15
[优化] layui.use() 方法，以支持加载非内置模块的合并请求（如您在线上环境采用「非模块化加载」的方式，那么最多可以只加载两个文件，即：layui.all.js、main.js(你的扩展模块的合并文件)。这将大幅度减少文件请求） #详见文档
[新增] layui.url() 底层方法，用于将 url 中的 pathname、search、hash 属性进行对象化获取 #详见文档
[优化] 栅格的列间隔类 .layui-col-space，支持 1-30 区间所有双数间隔，并支持 1、5、15、25 单数间隔
[优化] table 组件的合计行，若接口直接返回了合计行数据，则优先读取，否则由前端自动合计当前行数据 #详见文档
[修复] upload 组件因上个版本的 progress（进度条） 功能导致的部分情况无法跨域上传的问题
[优化] upload 组件 progress 回调，在第二个参数中返回了当前触发的元素对象
[修复] form 模块的 select 组件在 lay-disabled 和 lay-search 共用时出现可编辑问题
[修复] flow.load() 多次执行时的重复加载的问题
[修复] util 组件的 event 方法重复绑定事件的问题
[新增] 28 个字体图标 #详见文档
v2.5.5 2019-09-10
之前大家在《2.5.x 问题集中收集》中反馈的内容，我已如数看到。其中有些被采纳在本次版本中，有些被规划到了 v2.6、v3.0 中。我深知之前反复的断更对 layui 带来的是怎样无可挽回的损失，然而 layui 终于还是不得不重新审视它所处的位置，行进的「前端河」分出了两条支流：一条是滚滚洪流，没有人能够逃脱它的流速，我们必须要在拥抱中重生；一条是波澜不惊，那是我们最初的方向，返璞归真、自诩的「经典」和不灭的执念。顺应潮流而不背离初心，layui 注定要同时流向这两条支流，虽千万里之行，亦愿独闯。
[优化] form 组件的 val() 方法，除了之前版本的赋值，目前还可支持取值 #详见文档
[新增] tree 组件的数据源参数 field，用于定义数据字段名
[优化] tree 组件的节点删除前的提示功能
[修复] tree 组件的数据源参数 checked 在父子节点同时设定时的异常问题
[优化] table 组件的 defaultToolbar 参数，可以扩展头部工具栏右侧图标按钮 #详见文档
[优化] table 组件的局部代码，减少重复的全局事件引发的卡顿问题
[修复] table 组件的合计行未按照对应列显示自定义模板的问题
[修复] table 组件导出数据时未包含合计行的问题
[修复] transfer 组件的右侧面板在使用搜索转移数据后，无法再获取右侧数据的问题
[新增] upload 组件的 progress 回调，用于监听文件的上传进度 #详见文档
v2.5.4 2019-06-06
[修复] table 组件 reload 后的各种可能发生的异常问题
[新增] tree 组件的 id 参数，用于定义实例的唯一索引
[新增] tree 组件的 text 参数，用于定义一些默认文本
[新增] tree 组件的数据源参数：spread、checked，以定义节点初始的：选中状态、展开状态
[剔除] tree 组件的 spread、checked 参数，采用数据源中的 spread、checked 属性替代
[剔除] tree 组件的 key 参数，因为多此一举
[优化] tree 组件的 getChecked 方法，让其返回选中的数据，而非节点 DOM
[优化] tree 组件中数据源 label 参数，改名为 title
[优化] tree 组件的 defaultNodeName、emptyText 参数，将其移至到新增的 text 参数中
[修复] transfer、tree 组件在 layui-form 中的样式异常问题
v2.5.2 / v2.5.3 2019-06-04
[全面重写] transfer 组件，加强功能，并修复了已知的所有问题 #详见文档
[回滚] table 组件 的 reload 方法在 2.5.0 的机制，因大量场景测试存在不可控异常，基于稳定考虑，特此恢复 2.5.0 之前机制
[修复] table 组件已知的若干紧急小问题
[修复] upload 组件 reload 重载时，如果传入 elem 出现报错的问题
v2.5.1 2019-06-03
[修复] table 组件，当不开启分页且出现滚动条，底部出现无边框的问题
[修复] table 组件，当 reload 仅重载 data 时的若干小问题
[调整] tree 组件，如果子节点有任意一条选中，则父节点为选中状态
[新增] tree 组件的 defaultNodeName 属性，用于定义节点的默认名称
[优化] tree 组件的 renderContent 属性，改名为 edit，可自由配置“增改删”按钮的显示状态
[优化] tree 组件的 expandClick 属性，改名为 onlyIconControl，用于表示“是否仅允许节点左侧图标控制展开收缩”，默认 false
[优化] tree 组件方法命名：getCheck 改名为 getChecked、setCheck 改名为 setChecked
[优化] tree 组件多处异常样式
[修复] tree 组件的 click 回调的若干问题
[新增] transfer 组件的 width、height 参数，用于设定左右穿梭框的宽高
[修复] transfer 组件在 form 元素下，穿梭框中的按钮触发了提交的 bug
[优化] transfer 组件方法命名：getValue 改名为 getData
v2.5.0 2019-05-31
此“更”时隔半载，其间个中缘由，尽在不言…
[新增] tree 组件
[支持] 无限层级
[支持] 自定义节点数据源：节点名称、勾选状态、禁用状态、拖拽禁止状态、新窗口跳转链接等
[支持] 复选框勾选功能
[支持] 层级连接线功能
[支持] 节点的“增删改”内置操作
[支持] 手风琴展开模式
[支持] 设定默认展开的节点
[提供] 节点被点击、复选框勾选、节点过滤、“增删改”等多种操作场景下的回调
[提供] 设置指定的节点为勾选状态的方法
[提供] 获取当前勾选的全部节点的方法
[提供] 数据为空的自定义文本提示功能
[新增] transfer 穿梭组件
[支持] 设定左右栏初始化数据
[支持] 列表搜索功能
[支持] 自定义左右栏标题
[提供] 左右穿梭交互时的回调
[提供] 获取选中数据（右侧列表）的方法
[加强] table 组件
[优化] table.reload(id, options, type) 方法， 可通过设置 type 为 "data"，只刷新数据部分（无抖动）（注：2.5.2 已取消）
[优化] 打印功能，可包含“合计行”打印
[修复] 导出表格时，如果内容出现逗号出现数据错位的问题
[修复] 无法导出自定义模版（templet）中的数据，而是导出了原始数据的问题
[优化] 多处核心代码
[加强] form 组件
[新增] 元素属性 lay-reqText=""，可用于自定义必填项（即设定了 lay-verify="required" 的表单）的提示文本
[优化] form 组件的 val() 方法，以避免 radio 元素无法赋值数值型数字的问题
[修复] form 中绑定了 layDate 组件的元素在验证 date 失败时，点击不弹出 layDate 组件的问题
[完善] upload 组件
[增加] inst.reload(options) 方法，用于重置实例的属性值（比如动态改变 acceptMime 等）。inst 是 upload.render() 返回的实例
[修复] 在回调中无法获取到 this.item 的问题
[完善] 其他
[新增] util 模块的 util.event(attr, obj, eventType) 方法，用于更好地处理事件动作
[修复] 在使用 layui.all.js 的情况下，use 一个依赖了非内置模块的自定义模块出现的回调异常问题
[修复] carousel 轮播组件 interval 属性可能存在的异常问题
2.4.x
欢迎来到 layui 2.4。本次除了 table 组件较大幅度的加强，还特别添加了业界比较常见的两款新组件：colorpicker（颜色选择器） 和 slider（滑块）。依然没有看到 tree？多选框等等你想要的功能性组件？不必着急，我们推出了 layui 第三方扩展组件平台，它用于收集来自 layui 官方以外的组件，由贡献者自己维护，以群众之力共同完善 layui！
v2.4.5 2018-11-01
[修复] table 组件中勾选全选后，再点击任意行复选框无法获取到值的问题
[修复] table 组件的 toolbar: true 时，在高版本 jQuery 下出现的报错问题
[修复] table 组件的固定列高在某些情况未能铺满的问题
[优化] table 组件的单元格溢出下拉框，让其不触发行点击事件
[修复] slider 组件在 max 参数设为某些数字（如 20）时，点击 input 增减按钮出现的异常问题
[优化] slider 组件局部代码，以自动纠正某些异常参数值
[修复] form 组件的 select 在空值状态下双击，导致赋值了空值提示文本的问题
v2.4.4 2018-10-29
[新增] table 组件的 autoSort 参数，用于控制是否在前端自动排序。若 false，则需自己（服务端）返回排序后的数据
[新增] table 组件的 resize 方法，用于重置表格尺寸等视图结构（该优化来自“layui 社区之光” @岁月小偷）
[优化] table 组件合计行浮点型数据精度
[优化] table 组件列筛选弹出框的高度问题，限制最大高度为表格高度
[修复] table 组件的隐藏列未能同步“合计行”状态的问题
[修复] form 组件的 val() 方法没找到相关表单出现报错的问题
v2.4.3 2018-09-03
[修复] table 组件在设列有 hide: true 情况下的宽度自适应问题
[修复] table 组件的多级表头，设置了 hide 的各种问题
[修复] table 组件的合计行有值为 null、空字符、小数点等情况时未正确统计的问题
[修复] table 组件设置为 size: 'sm' 时，行中 radio 单选框样式的不雅问题
[优化] colorpicker 颜色面板拖动体验
v2.4.2 2018-08-30
[修复] table 组件初始设定 hide 属性，表格未能正常显示的问题
[修复] table 组件的多级表头下，点击筛选列出现的异常问题
[修复] table 组件在隐藏列后，执行 table.reload() 方法重载后表头后的异常问题
[修复] table 组件的 loading 参数设为 false 的异常问题
[剔除] table 组件的 height 参数最小高度的判断，改回之前的自由设定
[优化] table 组件局部代码，以适应复杂表头下的各种功能
[优化] table 组件的打印，不包含非数据列
[优化] slider 组件局部代码
[修复] 2.4.1 改动的层级优先级导致的各种堆叠异常问题（尤其是对 layuiAdmin 的影响）
v2.4.1 2018-08-29
[新增] table 组件的 defaultToolbar 参数，可自由配置头部工具栏右侧的图标 #详见文档
[优化] table 组件的筛选下拉框在表格高度较短时被遮挡的问题
[优化] table 组件的 toolbar 参数，可通过设置 "default" 值来显示内置图标
[优化] table 组件的 height 参数，加入最小高度的判断，以保证任何情况都能良好展示
[优化] 各组件、元素之间的 z-index 层级优先级
[优化] 颜色选择器的状态可即时跟随面板中的输入框值改变而改变
[优化] 颜色选择器的局部代码和外观
[修复] 颜色选择器的 value 参数设置 hex 部分初始值时的报错问题
v2.4.0 2018-08-28
[加强] table 组件
[新增] 工具栏区域，通过 toolbar 参数开启，可自定义工具按钮 #详见文档
[新增] 列显示隐藏功能，位于工具栏右侧
[新增] 表格导出功能，位于工具栏右侧。也可通过 table.exportFile() 方法导出
[新增] 表格打印功能，位于工具栏右侧
[新增] 合计行功能，通过 totalRow 参数开启
[新增] 单选框列，通过 type:'radio' 开启
[新增] 工具栏事件（toolbar）、行单击事件（row）、行双击事件（rowDouble）
[新增] 数据预解析回调函数：parseData，用于将返回的任意数据格式解析成 table 组件规定的数据格式 #详见文档
[新增] 数据初始时的 loading，并更换了风格
[新增] title 参数，用于定义 table 的大标题（在文件导出等地方会用到）
[新增] 表头参数 cols 的 hide 子参数，用于控制隐藏列
[新增] 表头参数 cols 的 totalRow 子参数，用于开启该列的合计功能
[新增] 表头参数 cols 的 totalRowText 子参数，用于显示自定义的合计文本
[优化] 自动分配列宽导致无故出现横向滚动条的问题
[优化] 自动分配的列宽可跟随浏览器窗体尺寸改变而重新适配
[优化] 单元格溢出状态的展开体验
[优化] 多处细节问题
[修复] templet 为函数时，单元格编辑和 tool 事件的 update 均未执行模板解析的问题
[修复] form 组件中的元素在 table 中一些不友好的显示问题
[修复] 表格容器在隐藏区域时（如 Tabs 中），未能显示分页栏的问题
[新增] colorpicker 颜色选择器组件
[支持] hex、rgb、rgba 三类色彩模式
[支持] 自由拖拽设置
[支持] 透明度拖拽设置，需配合 rgba 色值
[支持] 预定义颜色列表，可自由配置
[支持] 三种颜色框风格，可用于和不同尺寸的表单和按钮搭配
[支持] 颜色被改变和选择完毕的回调
[注意] colorpicker 组件不支持ie10以下版本，其它高级浏览器均支持
#详见文档
[新增] slider 滑块组件
[支持] 水平和垂直两种滑块类型
[支持] 支持自定义滑块数值区间
[支持] 开启滑块范围模式拖拽
[支持] 开启输入框动态改变滑块数值
[支持] 自定义滑块间隔长度
[支持] 自定义数值提示文本
[支持] 自定义主题色
[支持] 滑块数值被改变的回调，以及动态改变滑块的外部方法
#详见文档
[完善] form 组件
[修复] checkox 组件的 primary 风格在文字很长的情况下出现的显示异常问题
[修复] select 组件搜索后，上下快捷键选择失效的问题
其它
[修复] layDate 组件在设置了非法 初始 value 时，点击空白处报错的问题
[剔除] css 中备选字体 \5FAE\8F6F\96C5\9ED1（微软雅黑），以免版权问题。尽管它并不会优先使用
2.3.0 2018-05-25
你好，layui 2.3。它除了包含许多久违的细节之更，更是新增了 rate 评分组件，
rate 评分
新增的全新组件，用于进行评分/星操作
支持是否开启半星
支持自定义星星个数
支持自定义星星主题色
支持自定义评级对应的说明，如：文本/图标等
支持初始值的设定
支持是否只读，即：只展示、不可点
#详见文档
laypage 通用分页
对 layout 参数新增 refresh 支持，用于显示刷新当前页图标
laydate 日期与时间
新增 isInitValue 参数，用于控制是否自动向元素填充初始值（需配合 value 参数使用）（2.3.0 正式版改为默认 true）
form 表单
增加 form.val(filter, fields) 方法，用于给指定表单集合的元素初始赋值。#详见文档
对 select 组件新增上下键（↑ ↓）回车键（Enter）选择功能（2.3.0 正式版修复了滚动条不跟随的问题）。
优化 switch 开关组件，让其能根据文本自由伸缩宽
修复 checkbox 复选框组件在高分辨屏下出现的样式不雅问题
upload 文件上传
对 choose、before 回调返回的参数 obj 增加 resetFile 方法，可用于重命名文件名
修复开启 size 参数后，文件超出规定大小时，提示信息有误的问题
flow 流加载
修复开启 isLazyimg:true 后, 图片懒加载但是图片不存在的报错问题
其它改动
新增 21 个字体图标
字体图标开始支持规范化的 font-class 命名方式 #详见文档
新增 卡片面板 class="layui-card" 元素结构（需配合“非白”背景凸显效果）#详见文档
util 模块新增 escape 方法，用于转义 xss 字符
2.2.6 2018-04-03
新增 table 的数据请求时的 headers 参数支持，用于添加请求头
新增 nav 垂直导航菜单的无限级子菜单功能（注意：水平导航菜单暂不支持无限极）
新增 nav 导航菜单基础属性 lay-shrink="all"，用于开启：展开子菜单时，收缩兄弟节点已展开的子菜单
新增 upload 的数据请求时的 headers 参数支持，用于添加请求头
优化 upload 组件的 data 参数，支持方法写法，用于传递动态值。#详见文档
优化 element 的 nav 事件，并解决了之前存在的父菜单无法触发事件的问题
新增 upload 组件的 acceptMime 参数，规定打开文件选择框时，筛选显示的文件类型 #91
layedit.build() 第一个参数支持 html 原始对象 #146
Support post+json for table module #194
2.2.5 2018-01-03
2018年的第一个新版本
新增 table 的 templet 方法支持，即现在自定义模板可以采用方法的形式替代内容 #详见文档
新增 table 的 text 参数，用于自定义各种默认提示文本
新增 layui.factory(modName) 方法，用于获取模块对应的工厂，以便回收利用
新增 layui.sessionData(table, settings) 方法，用于存储本地会话性数据
新增用于定义按钮容器的 class 选择器：layui-btn-container
新增用于定义流体按钮的 class 选择器：layui-btn-fluid
优化 table 的分页栏，如果无数据则不显示
优化 layer 的 prompt 层，初始赋值 value 时的光标会出现在最后（之前版本会在最前）
优化 layui.event() 和 layui.onevent() 方法，处理自定义事件更加灵活
优化 layui.router() 方法，新增返回拼接后的 href
修复 table 的异步数据在 code 为非0时，未执行 done 回调的问题
修复 element.tabChange() 方法的 this 指向问题
2.2.4 2017-12-07
该版本对之前存在的较多问题进行了一次清理，推荐升级。
新增 form 的 name 为数组格式（ 如：name="arr[]" ）的支持
修复 form 的 select/checkbox/radio 等元素设定 lay-verType="tips" 时的提示层定位问题
修复 table 的自适配列宽可能引发的报错：Cannot read property 'defaultView' of null
修复 table 中渲染已知数据时执行 reload 不会清除之前数据的问题
修复 upload 的 number 在 size 未设定时无效的问题
修复 upload 的 allDone 回调在 auto: false 时的异常问题
修复 upload 在 IE11 下设定 exts 的某些异常提示问题
鉴于大家对 table 在 2.2.0 中的边框线普遍反映太浅，特此加深，回归统一边框
2.2.45 （2017-12-08 补充）：
进一步优化 form 的 name 数组支持
修复 2.2.4 对 table reload 造成错误影响的问题
2.2.3 2017-11-27
新增 upload 模块的 number 参数，用于设定同时允许上传的文件数量（默认不限制） #详见文档
新增 util 模块的 util.toDateString(time, format) 方法，用于转化时间戳或日期对象为日期格式字符 #详见文档
新增 util 模块的 util.digit(num, length) 方法，用于对数字前置补零，如：6 ==> 06 #详见文档
修复 table 特殊情况出现的：'cssRules' of undefined 报错问题
修复 table 无数据时，点击列头的 checkbox 和排序出现的报错问题
修复 laydate 的 set 方法报错问题
恢复 form 的 lay-filter 在 layui 2.2.0 之前的验证规则，即：值为空也会触发内置的验证规则。选填项由开发者通过自定义验证来把控。
2.2.2 2017-11-17
优化 table 的列宽自动适配算法
修复 table 的重载后，分页总条数未更新的问题
修复 table 的删除行后，再点击全选，导致 table.checkStatus() 返回的数据异常问题
修复 table 的选择条数在 Firefox 浏览器下失效的问题
修复 table 的表头在同样的列宽下，Chrome 下正常，Firefox 和 ie 低版本下却出现省略号的差异性问题
修复 layDate 中选择 datetime 选择器的月份列表报错的问题（尽管之前的报错不影响正常使用）
去除 h1/h2/h3 的 14px 的重置样式
注意事项：
转换静态表格，请务必确保 table.init() 方法的 limit 参数（默认：10）是与你服务端限定的数据条数一致
覆盖升级后注意清除浏览器缓存
2.2.1 2017-11-16
新增 table 的基础参数：cellMinWidth，用于全局定义所有常规单元格的最小宽度（默认 60） #详见文档
新增 table 的表头参数：minWidth，用于局部定义常规单元格的最小宽度（默认 60），优先级大于 cellMinWidth #详见文档
优化 table 内容超出单元格宽度时的一些小细节
优化 table 选中行样式
修复 table 的 page 参数传入 laypage 对象时的各种问题。这次可以真正做到分页的各种自定义，官网示例 页面中也有相关演示
修复 table 的表单元素模板在 lg 尺寸单元格中未垂直居中的问题（注意，sm 尺寸的表格不做相关兼容）
修复 table 的查看更多的单元格弹层在自定义模板的情况下，无效的问题
修复在 ie8 下路径计算异常导致的所有 layui 内置模块失效的严重 bug
覆盖升级后注意清除浏览器缓存
2.2.0 2017-11-15
本次升级幅度较大，主要核心还是在 table 模块。无论是从代码，还是文档和示例的撰写上，都进行了大量调整。除此之外，form 以及其它的几项改进，也堪称良心之举，这应该是一次令人愉悦的更新吧。特别说明的是：原计划与 layuiAdmin 同时发布，由于用户群对 layui 2.2 的呼声太高，经投票最终还是决定先发布 layui 2.2。而 layuiAdmin 则顺延，请耐心等待！
table 改进
新增列宽自动适应功能，允许列宽设置百分比甚至不填写，内部自动分配
新增序号列支持（type:'numbers'） #详见文档
新增表头的基础参数：type，用于定义列类型（normal/checkbox/space/numbers等）
优化 page 参数，支持传入一个对象，里面可包含 laypage 组件所有支持的参数（jump、elem除外）
limit 改为默认 10
自定义模板中，可通过 undefined 获得序号
优化主题样式，风格更加清爽，进一步接近 layui 极简理念
优化单元格编辑样式（之前编辑时的样式不大明显）
修复单元格弹出的更多内容浮层的若干问题
修复 表单元素（如：复选框/开关/单选框） 在数据表格单元格中的样式异常问题
修复表格重载时的左右抖动问题
form 改进
设定 lay-verify 时，不再强制必填，除非同时设定了 required，如：lay-verify="phone|required" （注：2.2.3 已取消）
对表单元素新增 lay-verType="" 属性，用于定义异常提示层模式，可选值有：tips（吸附）、alert（对话框），msg（默认）#详见文档
搜索选择框匹配到相应选项时，如果未选择相应项，则失去焦点时清空内容（这样做的目的，是为了确保 select 是 option元素中定义的 value，而不是 text）
复选框禁用状态样式优化
其它改进
carousel 轮播当只有一个条目时，不会再显示指示器
导航条允许设置 lay-unselect 属性，点击指定导航菜单标题时，将不会出现选中效果
layui.extend() 方法支持拓展一个自定义路径的 js 模块（可加载远程文件）
优化 layDate 组件范围选择样式
修复 layui.data() 方法无法存储空字符的值的问题
注意事项
为了统一规范，定义按钮尺寸的 CSS 类：layui-btn-mini 改为 layui-btn-xs、layui-btn-small 改为 layui-btn-sm、layui-btn-big 改为 layui-btn-lg，升级版本时务必注意
覆盖升级后，注意清理浏览器缓存
2.1.7 2017-11-02
新增 upload 组件的 allDone 回调，用于监听多文件上传完毕后的状态（如：总文件数、成功数、失败数）
新增 progress 进度条的分数设定（如：1/3）
修复 layDate 组件当前面板为 1 月时，上个月（12月）的最后一天显示为 30 的 bug
修复 layDate 组件输入一个非法值再点击其它同类控件，未校验上一个控件日期是否非法的问题
修复 progress 进度条的 lay-percent 设定百分比在某些情况下存在的 bug
优化 badge 徽章默认样式
2.1.6 2017-10-30
新增 element.tab(options) 方法，用于绑定自定义 Tab 元素（即非 layui 自带的 tab 结构，#详见文档）
新增 tab 选项卡删除的事件监听 (tabDelete)
新增 laytpl 的忽略分隔符 {{! template !}}，用于忽略指定区域的模板解析
新增用于替代 element.init 的 element.render() 方法，并增加了两个参数：type、filter，以便对元素进行局部初始化。#详见文档
为了编码统一，element.init() 方法可用 element.render() 方法替代。但 init 方法仍会兼容。
优化 util 模块的 util.timeAgo() 方法的返回字符
优化二级导航的箭头高度在移动设备偏下的问题
修复垂直导航的一级导航行高没居中的问题
修复 table 在列宽足够的情况下点击列可能会弹出 tips 的问题 #68
2.1.5 2017-09-20
本次更新内容较少，主要对一些细节进行优化。
优化按钮样式，默认不再有 0.9 的透明度，因为这样看上去会更鲜艳些
优化 carousel 轮播逻辑，以使条目切换的衔接动画更加自然些
修复 carousel 模块的轮播在切换浏览器窗口后，出现空白 loading 的问题
修复 input/textarea 等表单元素在搜狗浏览器下的 placeholder 行高问题
修复 select 搜索框在 ios 设备和 safari 下无法输入的问题
解决 后台布局 中滑动顶部最右导航，引发水平滚动条的不良体验问题（需向 body 加入一段样式，#详见文档 ）
2.1.4 2017-09-15
优化原始按钮行高偏下问题
优化 table 多级表头并加强，使其真正做到无限级，且功能稳定。#见示例
修复 table 如果有一页空数据，导致所有分页都显示为空数据的问题
修复 table 的多级表头设定 checkbox 列后的异常问题
修复 table 的多级表头如果组合列后面还有列，表格主体与表头未对应上的问题
修复 table 中设置了 response 的 dataName，点击排序执行 table.reload() 方法后，无数据的问题
修复 layDate 在 requirejs 下使用的报错问题
如果 layDate 在 requirejs 下使用，需要通过 laydate.path = "" 来设定 laydate.js 所在目录 #见文档
2.1.3 2017-09-13
2.0 发布已经过去三周了，相比功能的继续丰富，也许更重要的是稳定，我们深知这一点。所以请尝试从“layui新版本存在许多问题”的错觉中清醒，事实上，当你真正适应了这一切，你会对 layui 有一个全新的认知。而今天更新的 2.1.3 主要还是力求稳定，但在下一个较大版本（2.2.0），你将会看到如你所愿的改进，也是社区呼声最高的存在，想象一下吧！
优化 内置动画，以避免在 Chrome 最新版(61.0.3163.79) 中出现的各种奇异现象
优化 layDate 的时间选择器（time）的范围选择体验，不再校验“结束时间超出开始时间”，以支持跨越凌晨的情况
优化 layDate 的控件关闭，以避免focus事件下出现的未关闭上一个控件的问题
优化 table 在行数据未填充满表格高度时，固定列仍然100%高度所形成的不雅感
修复 layDate 中自定义无符号分割的日期格式（如yyyyMM、yyyyMMdd），二次选择后控件存在的异常问题
修复 layDate 中的日期时间选择器（datetime）开启范围选择时，选择当天未校验“结束时间超出开始时间”的问题
修复 table 中开启单元格编辑，在执行 update 方法后，值未同步编辑框的问题
修复 table 中转换多级表头的静态表格有数据未展示的问题
修复 layer 在最新版 Chrome（61.0.3163.79）下的遮罩层出现的奇异花屏现象
修复 form 中设定 lay-verify="number" 不能验证负数和小数的问题
2.1.2 2017-09-03
感谢来自百度MIP团队的 前端小武 提供自动化测试，目前已正式邀请其成为 layui collaborator
【layDate】修复 value 传入日期对象时，初始的input值异常问题
【layDate】修复设置了min/max，年月列表的确定不可点击问题
【table】优化 loading，改为显示在表格容器的正中位置
【table】修复右侧固定列在部分设备（如手机/Mac）无效的问题
【table】修复切换分页，未关闭上一个“查看全部”的提示层的问题
【form】修复 input 输入框的 placeholder 在部分浏览器（如：Safari）下行高问题
【底层】修复 layui.sort() 方法处理负数排序的问题 #57
2.1.1 2017-09-01
功能新增
[layDate] 对 mark 参数增加 0-0-date 支持，以标记每月的某天 #见文档
[table] 新增 initSort 参数，用于初始设置排序字段与状态 #见文档
完善与优化
[layDate] 如果设置了 value，则默认给被绑定的元素（如 input）赋值
Bug Fixes
[layDate] 修复年列表的 disabled 小问题
[layPage] 修复在某些情况下，选择不同每页条数时，分页结构存在的小问题
[table] 修复 table sort 事件在执行 table.reload() 死循环的问题
[table] 修复多级表头开启复选框或设置左右固定列时的主体与表头未对齐问题
[upload] 修复多文件模式下，设置 size，出现重复请求的问题
2.1.0 2017-08-30
在过去一周对 2.0 的反馈收集中，我很惊诧地看到关于数据表格的多种吐槽。layui 向来以易用著称，但这次，大家普遍对 layui table 的态度却似乎并不是这样。这让我一度懊恼与不解，尽管可能的答案是：layui 的使用群体正在变得更加广泛。但我更多的是在反思。于是，在这个版本中，一半坚持原有的理念，一半妥协，默默并努力改造成我和你们都希望的样子。而这，仅仅只是开始…
功能新增
[table] 新增 table.reload() 方法，以便对自动渲染的表格完成重载 #见文档
[table] 新增 height 最大化减去差值的自动换算功能（语法：full-差值），以让容器始终适应屏幕高度 #见文档
[table] 新增 response 参数，用于对返回的数据格式的自定义支持 #见文档
[table] 新增 request 参数，用于对分页请求的参数：page/limit的自定义名称支持 #见文档
[table] 新增sort事件，用于监听排序动作 #见文档
[upload] 开始支持直接在元素上配置基础参数
[upload] 回调中可通过 this.item 读取到当前触发上传的元素，一般用于 elem 绑定 class 的情况
完善与优化
[响应式] 平板设备的临界值改为以iPad为准（768px）
[table] 去除选中的数据中的临时字段：LAY_CHECKED
[table] 优化局部代码
[tab选项卡] 点击 target="_blank" 类型的a标签时，不会对该项标记下标
Bug Fixes
[底层] 修复 layui.sort() 方法在个别特殊情况排序异常的问题
[table] 修复编辑单元格或删除行后，对列进行排序出现刚初始时的数据的Bug
[table] 修复在无数据的情况下开启 toolbar 且固定在右侧，出现重复的问题
[layDate] 修复点击时间选择器的标题区域，出现报错的问题
[layDate] 修复限制可选日期时，年列表和月列表存在的小问题
[tab选项卡] 修复执行添加tabs时，当出现下拉，再删除最后面几个tabs出现的Bug
2.0.2 2017-08-24
跟上个版本一样，重心还是放在 layDate 和 table 上
layDate 日期时间选择器
增加开始日期超出结束日期时点击确定出现的提示
修复回车事件影响其它元素（如 textarea）正常回车的失误性 bug
修复：选择日期范围确定后，再重新打开并选择开始日期（却未点结束日期），再点击空白区域关闭，又重新打开，并选择更小一点的日期所出现的异常问题（卧槽，这个 bug 描述起来好累！你们读懂了吗？至少我都被自己说晕了。发现这个 bug 的同学心细如夸克）
修复时间选择器在“360极(keng)速(die)浏览器”下因显示隐藏滚动条导致的样式异常问题
Table 表格
增加对工具条模板的自定义 JS 脚本支持
新增列“空隙”类型，以定义一个 15px 宽度无任何内容的列
优化右固定列的左侧边框线、数据还未获取造成的分页落差感等细节问题
去除在首列值为 null 或 undefined 时的自动加序号功能
修复工具条，只有设置了 fixed 参数才会显示的 bug
修复列单元格设置居中时，点击超出文本，未弹出查看更多的浮层的问题
其它
新增用于在不同设备下显示和隐藏的响应式公共类（见文档）
优化导航样式
修复富文本编辑器多次上传图片的覆盖问题
2.0.1 2017-08-22
尽管昨天发布了大版本，但是有 Bug 还是得速修
layDate 日期时间选择器
日期时间选择器改为只能点确定关闭（以便选择时间）
修复选择了当月的最后一天（比如29/31），再切换年月出现日期值超出的bug
修复ready回调返回的月份值没有加1的问题
Table 表格
修复Java端的异步接口未指定json类型，前端无法获取到数据的问题
修复字符型数字排序异常的bug
修复如果数字为0，单元格未显示0的bug
修复勾选行，再删除行后，仍然可以获取该选中行数据的bug
其它
修复 Upload模块 正常返回了JSON，仍然抛出提示“请对上传接口返回有效JSON”的bug
修复 富文本上传图片异常的BUG
修复 layui.sort(obj, key, desc) 方法对字符型数字排序异常的bug
2.0.0 2017-08-21
里程碑式版本。核心机制未变，更多是对 1.x 的扩充和完善。它的意义并不只是那几项更新，而是自此开始，layui 进入一段高光之旅。 因该版本改动较大，为避免代码冗余，特不兼容 1.x，请勿覆盖升级，你也可以阅读：1.x升2.0注意事项
Table 表格
新增的全新模块，用于对表格进行一些列功能和动态数据操作
支持固定表头、固定行、固定列左/列右
支持拖拽改变列宽度
支持多级表头
支持大表格、小表格、默认表格的任意尺寸设定
支持多种表格风格设定
支持“Ajax接口获取”、“直接赋值数据”、“转化现有表格”三种初始化渲染方式
支持单元格的自定义模板
支持对表格重载（比如搜索、条件筛选等）
内置checkbox复选框功能
内置自定义工具条及相关操作功能
内置分页功能
内置字段排序功能
内置单元格编辑功能
内置显示单元格更多内容功能
Carousel 轮播
新增的全新模块，用于处理页面轮播逻辑
支持图片、文字列表等任意内容的切换
支持普通轮播和全屏轮播（FullPage）的设定
支持多种切换动画的设定
支持是否自动切换、自动切换的时间间隔的设定
支持初始开始的条目索引的设定
支持箭头和指示器的风格和位置设定
Layout 布局
新增栅格布局系统
栅格采用12等分，内置移动设备、平板、桌面中等和大型屏幕的响应式处理
栅格支持分栏间隔、列偏移、嵌套，流体布局等
栅格最低能支持到ie8
新增后台大框架布局现成方案
layDate 日期时间选择器
全面重写，可作为独立组件（版本直接跃升为 5.0）
依旧采用原生JavaScript编写，零依赖，可在layui中作为模块使用，也可作为独立组件使用
支持单独显示年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器
支持双控件，用于选择年/年月/日期/时间/日期时间五种类型选择器的范围（可顺时、逆时）
支持日期格式的自定义
支持日期是否合法的自动校验
支持有效日期范围的设定
支持内置事件（可自定义）、外部事件、直接显示等多种调用方式
支持中文版和国际版的语言设定
支持开启公历节日和标记重要日期
支持直接嵌套在页面的某个容器中
支持底部按钮的任意顺序排版
支持智能显示在最佳可视坐标
支持回车快捷键选择
支持多种内置主题的设定，支持自定义主题色，且可单独定制主题
Upload 上传
全面重写
可指定任意元素（如按钮、普通div等）来触发上传
支持选择后自动上传和手工上传两种模式
支持附加参数、支持自定义文件name等
支持多文件上传（ie8/9除外）
支持拖拽文件上传（ie8/9除外）
支持文件大小限制，单位kb（ie8/9除外）
支持图片上传前预览（ie8/9除外）
支持文件跨域上传（ie8/9除外）
layPage 分页
核心代码和接口重写
新增“数据总数”、“每页条数”显示区域
支持自定义排版
新增count参数，用于得到数据总数，并剔除了pages参数（分页总数）
新增limits参数，用于设定每页条数的选择项
新增limit参数，用于设定每页条数的默认项
优化跳页框在输入非数字时的校验
总页数低于2时，仍然输出分页结构（前面版本不会显示）
尾页文本默认显示为总页数
跳页框如果输入的页码大于最大页数，则自动跳到最大页
样式优化
Form 表单集合
select组件增加自动上下判断，用于显示在最佳可视区域
select组件允许出现“请选择”的空值选项
form.render(type, filter)方法增加第二个参数，用于指定某个区域进行局部渲染
优化复选框样式，以更友好地用于非form场景中
form.on方法支持链式写法
Layer 弹层
同步到最新的 layer v3.1.0
增加maxHeight参数，用于设定弹层的最大高度
对默认按钮颜色、Tips层、Prompt层、Tab层等进行了样式微调，以便更显大气，且更符合layui风格
Element 页面元素
新增时间轴元素
新增徽章元素
新增动画CSS类文档
导航UI细节优化，并新增三种主题色支持：墨绿/藏青/蓝
导航支持加入图片
分割线新增可支持的颜色：赤/橙/墨绿/藏青/蓝/黑/灰
Tab选项卡UI微调
element模块输出的接口由先前的函数改为对象
Util 工具集
新增倒计时方法：util.countdown()
新增用于得到“某个时间在当前时间的多久前”的方法：util.timeAgo()
[固定块] 新增 showHeight 参数，用于控制出现TOP按钮的滚动条高度临界值
底层方法
新增 layui.sort(obj, key, desc) 方法，用于将数组中的对象按某个成员重新对该数组排序
改写layui.router()方法，以更好地解析location.hash的单页URL规则
其它更改
新增28个字体图标
剔除全局滚动条样式
获取内置的jQuery接口，可通过 var $ = layui.$; 得到，之前的 layui.jquery仍然可用
layui.css大量样式结构优化
Bug fixes
修复select组件在没有任何option的情况下报错的问题
修复导航多个排列在一起时，hover出现异常的问题
修复layui.device()方法在Chrome设备模式无法识别ios环境的问题
修复IE下，多次执行layui.use加载同一个模块时，控制台出现多条重复请求的问题（实际上不是真实请求）
1.x 升 2.0 特别注意事项
layDate日期模块、layPage分页模块、Upload上传模块等等，均已完全重写，请按照最新文档修改
获取 Form 模块接口，由之前的 var form = layui.form() 改为：var form = layui.form
获取 Element 模块接口，由之前的 var element = layui.element() 改为：var element = layui.element
layui.all.js 的目录调整到跟 layui.js 的同级目录，如有使用到 layui.all.js，请注意修改路径
由于改动较大，2.0其实并不兼容1.x，强烈不推荐覆盖升级。官网仍会保留 1.x 的存档，最好按需升级。
1.0.1 到 1.0.9 2016-10-18 - 2017-02-28
1.0.9
1.0.8
1.0.7/1.0.6/1.0.5
1.0.4
1.0.3
1.0.2
据可靠消息：1.0.1 版本的日志已被土卫六人劫走，并无任何踪迹
1.0.0 2016-10-14
首个正式版本出蛋
孵化

页面元素

布局

栅格系统与后台布局

如你所愿，在 layui 2.0 的版本中，我们加入了强劲的栅格系统和常见的管理系统布局方案，这意味着你可以采用 layui 排版你的响应式网站和后台管理系统的界面了。layui 的栅格采用业界比较常见的 12 等分规则，内置手机、平板、PC 桌面中大型屏幕的多终端适配处理，最低能支持到 ie8。而你应当更欣喜的是，layui 终于开放了它经典的管理系统布局方案，快速搭建一个属于你的管理系统将变得十分轻松自如。

栅格系统

为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。我们将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。
一、栅格布局规则：

序号	/
1	采用 layui-row 来定义行，如：< div class=“layui-row”></ div >
2	采用类似 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-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>移动设备、平板、桌面端的不同表现：<div class="layui-row"><div class="layui-col-xs6 layui-col-sm6 layui-col-md4">移动：6/12 | 平板：6/12 | 桌面：4/12</div><div class="layui-col-xs6 layui-col-sm6 layui-col-md4">移动：6/12 | 平板：6/12 | 桌面：4/12</div><div class="layui-col-xs4 layui-col-sm12 layui-col-md4">移动：4/12 | 平板：12/12 | 桌面：4/12</div><div class="layui-col-xs4 layui-col-sm7 layui-col-md8">移动：4/12 | 平板：7/12 | 桌面：8/12</div><div class="layui-col-xs4 layui-col-sm5 layui-col-md4">移动：4/12 | 平板：5/12 | 桌面：4/12</div></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
响应行为	始终按设定的比例水平排列	在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列	在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列	在当前屏幕下水平排列，如果屏幕大小低于临界值则堆叠排列

三、响应式公共类：

类名(class)	说明
layui-show-*-block	定义不同设备下的 display: block; * 可选值有：xs、sm、md、lg
layui-show-*-inline	定义不同设备下的 display: inline; * 可选值同上
layui-show-*-inline-block	定义不同设备下的 display: inline-block; * 可选值同上
layui-hide-*	定义不同设备下的隐藏类，即： display: none; * 可选值同上

四、布局容器：

将栅格放入一个带有 class="layui-container" 的特定的容器中，以便在小屏幕以上的设备中固定宽度，让列可控。

<div class="layui-container"><div class="layui-row">……</div>
</div>

当然，你还可以不固定容器宽度。将栅格或其它元素放入一个带有 class=“layui-fluid” 的容器中，那么宽度将不会固定，而是 100% 适应

<div class="layui-fluid">……
</div>

列间距：

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

支持列之间为 1px-30px 区间的所有双数间隔，以及 1px、5px、15px、25px 的单数间隔
下面是一个简单的例子，列间距为10px：

<div class="layui-row layui-col-space10"><div class="layui-col-md4">1/3</div><div class="layui-col-md4">1/3</div><div class="layui-col-md4">1/3</div>
</div>

如果需要的间距高于30px（一般不常见），请采用偏移，下文继续讲解
对列追加类似 layui-col-md-offset* 的预设类，从而让列向右偏移。其中 * 号代表的是偏移占据的列数，可选中为 1 - 12。
如：layui-col-md-offset3，即代表在“中型桌面屏幕”下，让该列向右偏移 3 个列宽度

下面是一个采用「列偏移」机制让两个列左右对齐的实例


<div class="layui-row"><div class="layui-col-md4">4/12</div><div class="layui-col-md4 layui-col-md-offset4">偏移4列，从而在最右</div>
</div>

请注意，列偏移可针对不同屏幕的标准进行设定，比如上述的例子，只会在桌面屏幕下有效，当低于桌面屏幕的规定的临界值，就会堆叠排列。
七、栅格嵌套：
理论上，你可以对栅格进行无穷层次的嵌套，这更加增强了栅格的表现能力。而嵌套的使用非常简单。在列元素（layui-col-md*）中插入一个行元素（layui-row），即可完成嵌套。下面是一个简单的例子：

<div class="layui-row layui-col-space5"><div class="layui-col-md5"><div class="layui-row grid-demo"><div class="layui-col-md3">内部列</div><div class="layui-col-md9">内部列</div><div class="layui-col-md12">内部列</div></div></div><div class="layui-col-md7"><div class="layui-row grid-demo grid-demo-bg1"><div class="layui-col-md12">内部列</div><div class="layui-col-md9">内部列</div><div class="layui-col-md3">内部列</div></div></div>
</div>

八、让IE8/9兼容栅格：
事实上IE8和IE9并不支持媒体查询（Media Queries），但你可以使用下面的补丁完美兼容！该补丁来自于开源社区：

<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]><script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script><script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

将上述代码放入你页面标签内的任意位置

管理系统界面布局

layui 之所以赢得如此多人的青睐，更多是在于它「前后界面兼备」的能力。既可编织出绚丽的前台页面，又可满足繁杂的管理系统界面需求。layui 致力于让每一位开发者都能轻松搭建自己的管理界面。下面是演示代码，你可以前往示例页面：预览布局效果

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>layout 管理系统大布局 - Layui</title><link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin"><div class="layui-header"><div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div><!-- 头部区域（可配合layui 已有的水平导航） --><ul class="layui-nav layui-layout-left"><!-- 移动端显示 --><li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft"><i class="layui-icon layui-icon-spread-left"></i></li><li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li><li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li><li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li><li class="layui-nav-item"><a href="javascript:;">nav groups</a><dl class="layui-nav-child"><dd><a href="">menu 11</a></dd><dd><a href="">menu 22</a></dd><dd><a href="">menu 33</a></dd></dl></li></ul><ul class="layui-nav layui-layout-right"><li class="layui-nav-item layui-hide layui-show-md-inline-block"><a href="javascript:;"><img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">tester</a><dl class="layui-nav-child"><dd><a href="">Your Profile</a></dd><dd><a href="">Settings</a></dd><dd><a href="">Sign out</a></dd></dl></li><li class="layui-nav-item" lay-header-event="menuRight" lay-unselect><a href="javascript:;"><i class="layui-icon layui-icon-more-vertical"></i></a></li></ul></div><div class="layui-side layui-bg-black"><div class="layui-side-scroll"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><ul class="layui-nav layui-nav-tree" lay-filter="test"><li class="layui-nav-item layui-nav-itemed"><a class="" href="javascript:;">menu group 1</a><dl class="layui-nav-child"><dd><a href="javascript:;">menu 1</a></dd><dd><a href="javascript:;">menu 2</a></dd><dd><a href="javascript:;">menu 3</a></dd><dd><a href="">the links</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">menu group 2</a><dl class="layui-nav-child"><dd><a href="javascript:;">list 1</a></dd><dd><a href="javascript:;">list 2</a></dd><dd><a href="">超链接</a></dd></dl></li><li class="layui-nav-item"><a href="javascript:;">click menu item</a></li><li class="layui-nav-item"><a href="">the links</a></li></ul></div></div><div class="layui-body"><!-- 内容主体区域 --><div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div></div><div class="layui-footer"><!-- 底部固定区域 -->底部固定区域</div>
</div>
<script src="./layui/layui.js"></script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){var element = layui.element,layer = layui.layer,util = layui.util,$ = layui.$;//头部事件util.event('lay-header-event', {//左侧菜单事件menuLeft: function(othis){layer.msg('展开左侧菜单的操作', {icon: 0});},menuRight: function(){layer.open({type: 1,content: '<div style="padding: 15px;">处理右侧面板的操作</div>',area: ['260px', '100%'],offset: 'rt' //右上角,anim: 5,shadeClose: true});}});});
</script>
</body>
</html>

颜色

视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感，而 layui 提供的颜色，清新而不乏深沉，互相柔和，不过分刺激大脑皮层的神经反应，形成越久越耐看的微妙影像。合理搭配，可与各式各样的网站避免违和，从而使你的 Web 平台看上去更为融洽。

主色调

layui 主要是以象征包容的墨绿作为主色调，由于它给人以深沉感，所以通常会以浅黑色的作为其陪衬，又会以蓝色这种比较鲜艳的色调来弥补它的色觉疲劳，整体让人清新自然，愈发耐看。【取色意义】：我们执着于务实，不盲目攀比，又始终不忘绽放活力。这正是 layui 所追求的价值。

次色调

事实上，layui 并非不敢去尝试一些亮丽的颜色，但许多情况下一个它可能并不是那么合适，所以我们把这些颜色归为“场景色”，即按照实际场景来呈现对应的颜色，比如你想给人以警觉感，可以尝试用上面的红色。他们一般会出现在 layui 的按钮、提示和修饰性元素，以及一些侧边元素上。

中性色

他们一般用于背景、边框等

layui 认为灰色系代表极简，因为这是一种神奇的颜色，几乎可以与任何元素搭配，不易形成视觉疲劳，且永远不会过时。低调而优雅！

七种色

结语

“不热衷于视觉设计的程序猿不是一个好作家！” ——贤心

图标

字体图标

layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。

使用方式

通过对一个内联元素（一般推荐用 i标签）设定 class=“layui-icon”，来定义一个图标，然后对元素加上图标对应的 font-class（注意：layui 2.3.0 之前只支持采用 unicode 字符)，即可显示出你想要的图标，譬如：

从 layui 2.3.0 开始，支持 font-class 的形式定义图标：
<i class="layui-icon layui-icon-face-smile"></i>

注意：在 layui 2.3.0 之前的版本，只能设置 unicode 来定义图标
<i class="layui-icon">&#xe60c;</i>
其中的 &#xe60c; 即是图标对应的 unicode 字符

你可以去定义它的颜色或者大小，如：
<i class="layui-icon layui-icon-face-smile" style="font-size: 30px; color: #1E9FFF;"></i>

内置图标一览表（168个）

ps: 作者君太懒，只是截图

跨域问题的解决

由于浏览器存在同源策略，所以如果 layui（里面含图标字体文件）所在的地址与你当前的页面地址不在同一个域下，即会出现图标跨域问题。所以要么你就把 layui 与网站放在同一服务器，要么就对 layui 所在的资源服务器的 Response Headers 加上属性：Access-Control-Allow-Origin: *

动画

CSS3动画类

在实用价值的前提之下，我们并没有内置过多花俏的动画。而他们同样在 layui 的许多交互元素中，发挥着重要的作用。layui 的动画全部采用 CSS3，因此不支持 ie8 和部分不支持 ie9。

使用方式

动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。如：

其中 layui-anim 是必须的，后面跟着的即是不同的动画类
<div class="layui-anim layui-anim-up"></div>循环动画，追加：layui-anim-loop
<div class="layui-anim layui-anim-up layui-anim-loop"></div>

内置CSS3动画一览表

下面是不同的动画类名，点击下述绿色块，可直接预览动画

ps:只是截图

按钮

按钮 - 页面元素

向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

用法

<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”

尺寸

名称	组合
大型	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”

<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”

名称	组合
大型百搭	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"><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-btn-group"元素中，即可形成按钮组，按钮本身仍然可以随意搭配

<div class="layui-btn-group"><button type="button" class="layui-btn">增加</button><button type="button" class="layui-btn">编辑</button><button type="button" class="layui-btn">删除</button>
</div><div class="layui-btn-group"><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe654;</i></button><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe642;</i></button><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe640;</i></button><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe602;</i></button>
</div><div class="layui-btn-group"><button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe654;</i></button><button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe642;</i></button><button type="button" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon">&#xe640;</i></button>
</div>

按钮容器

尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器

<div class="layui-btn-container"><button type="button" class="layui-btn">按钮一</button> <button type="button" class="layui-btn">按钮二</button> <button type="button" class="layui-btn">按钮三</button>
</div>

结语

你是否发现，主题、尺寸、图标、圆角的交叉组合，可以形成难以计算的按钮种类。另外，你可能最关注的是配色，Layui内置的六种主题的按钮颜色都是业界常用的标准配色，如果他们仍然无法与你的网站契合，那么请先允许我“噗”一声。。。然后你就大胆地自撸一个颜色吧！比如：粉红色或者菊花色（一个有味道的颜色）

表单

表单 - 页面元素

在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块来完成各种交互。
依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）

小睹为快

通过上述的小小演示，你已经大致了解了一波 layui 的表单模块，你可能会觉得她还算不错，但并不太过瘾？譬如你希望看到日期选择、图片上传等等。然而你必须认识到，本篇文档核心介绍的是表单元素，对于日期、上传等更多丰富的元素，其实也是可以很方便地穿插在内的。

下述是【小睹为快】的HTML结构：

<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>

UI的最终呈现得益于 Form模块的全自动渲染，她将原本普通的诸如select、checkbox、radio等元素重置为你所看到的模样。或许你可以移步左侧导航的内置模块中的表单对其进行详细的了解。

而本篇介绍的是表单元素本身，譬如规定的区块、CSS类、原始控件等。他们共同组成了一个表单体系。

下述是基本的行区块结构，它提供了响应式的支持。但如果你不大喜欢，你可以换成你的结构，但必须要在外层容器中定义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>

上述option的第一项主要是占个坑，让form模块预留“请选择”的提示空间，否则将会把第一项（存在value值）作为默认选中项。你可以在option的空值项中自定义文本，如：请选择分类。

你可以通过设定 selected 来设定默认选中项：

<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>

属性selected可设定默认项
属性disabled开启禁用，select和option标签都支持

复选框

默认风格：
<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

开关

其实就是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="" 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"><label class="layui-form-label">密码</label><div class="layui-input-inline" style="width: 100px;"><input type="password" name="" autocomplete="off" class="layui-input"></div></div></div>

class="layui-inline"：定义外层行内
class="layui-input-inline"：定义内层行内

忽略美化渲染

你可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格，比如：

<select lay-ignore><option>…</option>
</select>

一般不推荐这样做。事实上form组件所提供的接口，对其渲染过的元素，足以应付几乎所有的业务需求。如果忽略渲染，可能会让UI风格不和谐

表单方框风格

通过追加 layui-form-pane 的class，来设定表单的方框风格。内部结构不变。我们的Fly社区用的就是这个风格。

<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>

结语

Layui版本稳定后，会抽空推出一个表单元素生成工具，这样似乎就更方便地组装你的表单了呀。

导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。虽然大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如呼出二级菜单等，需借助element模块才能使用。你可以移步文档左侧【内置模块 - 常用元素操作 element】了解详情

依赖加载模块：element

水平导航

<ul class="layui-nav" lay-filter=""><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><script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){var element = layui.element;//…
});
</script>

设定layui-this来指向当前页面分类。

导航中的其它元素

除了一般的文字导航，我们还内置了图片和徽章的支持，如：

<ul class="layui-nav"><li class="layui-nav-item"><a href="">控制台<span class="layui-badge">9</span></a></li><li class="layui-nav-item"><a href="">个人中心<span class="layui-badge-dot"></span></a></li><li class="layui-nav-item"><a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a><dl class="layui-nav-child"><dd><a href="javascript:;">修改信息</a></dd><dd><a href="javascript:;">安全管理</a></dd><dd><a href="javascript:;">退了</a></dd></dl></li>
</ul>

是否瞬间上了个档次呢？

导航主题

通过对导航追加CSS背景类，让导航呈现不同的主题色

//如定义一个墨绿背景色的导航
<ul class="layui-nav layui-bg-green" lay-filter="">…
</ul>

水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）

垂直/侧边导航

<ul class="layui-nav layui-nav-tree" lay-filter="test">
<!-- 侧边导航: <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结构是完全一样的，不同的是：

垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side

导航可选属性/类

对导航元素结构设定可选属性和 CSS 类名，可让导航菜单项达到不同效果。目前支持的属性如下：

属性名	可选值	说明
lay-shrink	空值（默认）:不收缩兄弟菜单子菜单。all:收缩全部兄弟菜单子菜单	展开子菜单时，是否收缩兄弟节点已展开的子菜单（注：layui 2.2.6 开始新增）如：< ul class=“layui-nav layui-nav-tree” lay-shrink=“all”> … </ ul>
lay-unselect	无需填值	点击指定导航菜单时，不会出现选中效果（注：layui 2.2.0 开始新增）如：< li class=“layui-nav-item” lay-unselect>刷新</ li>
lay-bar	disabled.禁用滑块跟随功能	在导航菜单主容器中配置，如：< div class=“layui-nav” lay-bar=“disabled”> </ div>
CSS 类	layui-nav-child-c.子菜单居中对齐layui-nav-child-r子菜单向右对齐	直接在子菜单标签配置即可，如：< dl class=“layui-nav-child layui-nav-child-c”> …</ dl>

上述两项为 layui 2.6.6 开始新增

面包屑

<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>

当然，你还可以作为小导航来用，如：

<span class="layui-breadcrumb" lay-separator="|"><a href="">娱乐</a><a href="">八卦</a><a href="">体育</a><a href="">搞笑</a><a href="">视频</a><a href="">游戏</a><a href="">综艺</a>
</span>

菜单

基础菜单 - 页面元素

菜单是页面必不可少的元素，我们希望它是通用的，所以在结构上，它的组成极其灵活。而事实上，在基础菜单还没有正式推出之前，垂直导航（layui-nav-tree）曾顶替了它的角色，尤其是在管理系统中发挥了举足轻重的作用。尽管它们本质上都属于「菜单」的范畴，但我们姑且约定将水平的称之为「导航」，垂直的称之为正统的「基础菜单」。它将十分有用，许多业务场景都能看到它的存在。

可依赖的模块：dropdown

菜单结构

通常基础菜单是搭配面板（layui-panel）使用的，但这并不是必须的。基础菜单有它独有的样式结构，以下是一个基本的示例：

<div class="layui-panel"><ul class="layui-menu" id="docDemoMenu1"><li lay-options="{id: 100}"><div class="layui-menu-body-title">menu item 1</div></li><li lay-options="{id: 101}"><div class="layui-menu-body-title"><a href="#">menu item 2 <span class="layui-badge-dot"></span></a></div></li><li class="layui-menu-item-divider"></li><li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}"><div class="layui-menu-body-title">menu item 3 group <i class="layui-icon layui-icon-up"></i></div><ul><li lay-options="{id: 1031}">menu item 3-1</li><li lay-options="{id: 1032}"><div class="layui-menu-body-title">menu item 3-2</div></li></ul></li><li class="layui-menu-item-divider"></li><li lay-options="{id: 104}"><div class="layui-menu-body-title">menu item 4</div></li><li class="layui-menu-item-parent" lay-options="{type: 'parent'}"><div class="layui-menu-body-title">menu item 5 <i class="layui-icon layui-icon-right"></i></div><div class="layui-panel layui-menu-body-panel"><ul><li lay-options="{id: 1051}"><div class="layui-menu-body-title">menu item 5-1</div></li><li lay-options="{id: 1051}"><div class="layui-menu-body-title">menu item 5-2</div></li></ul></div></li><li lay-options="{id: 106}"><div class="layui-menu-body-title">menu item 6</div></li></ul>
</div>

可以看到，它实则是一个 ul li 的层级嵌套，当需要出现「菜单组」和「子级菜单」时，只需要添加相对应的 class 类名即可。

菜单项类型

菜单项是由 li 元素组成的，以下将列举几种被支持的菜单项类型

类型	html	说明
常规菜单项	< li>< /li>	无需添加特定 class
可收缩菜单组	< li class=“layui-menu-item-group layui-menu-item-down” lay-options="{type: ‘group’}"></ li>	其中layui-menu-item-down为初始展开；layui-menu-item-up为初始收缩。
横向父子菜单	< li class=“layui-menu-item-parent” lay-options="{type: ‘parent’}"></ li>	其子级菜单的结构参照上文的「菜单结构」，主要是需包含一层面板元素。
分割线	< li class=“layui-menu-item-divider”></ li>	一条横线，用于更好地划分菜单区域

其子级菜单遵循的列表类型也是一样的。需要注意的是，「可收缩菜单组」的子菜单仅需要再嵌套一层 ul 即可；而「横向父子菜单」还需要套一层 div class=“layui-panel layui-menu-body-panel”，以便让子菜单层次更加分明。

菜单项参数

在上文中，您可能已经多次注意到 lay-options="{}" 这个属性了，它正是我们所说的菜单项参数。当点击菜单列表时，回调中将会返回该属性所配置的全部参数，其中type参数是组件内部约定的，其它参数可以随意命名。如

<li lay-options="{id: 100,title: 'menu item 1',type: '' //支持的类型有：group、parent，具体用法参见上文,aaa: '任意参数'
}">内容</li>

事件触发

我们的dropdown组件不仅菜单的基本交互（如点击选中、菜单组展开收缩等）进行了支持，还提供了菜单的事件机制：

//js
layui.use('dropdown', function(){var dropdown = layui.dropdown;//菜单点击事件，其中 docDemoMenu1 对应的是菜单结构上的 id 指dropdown.on('click(docDemoMenu1)', function(options){var othis = $(this); //当前菜单列表的 DOM 对象console.log(options); //菜单列表的 lay-options 中的参数});
});

//html
<div class="layui-panel"><ul class="layui-menu" id="docDemoMenu1"><li lay-options="{id: 100}"><div class="layui-menu-body-title">menu item 1</div></li></ul>
</div>

结语

本篇所讲解的是基础菜单的静态展示，其提供的是一个基础的结构，事实上它还被动态封装在诸如下拉菜单、右键菜单等场景中。

选项卡

Tab选项卡 - 页面元素

导航菜单可应用于头部和侧边，Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。面包屑结构简单，支持自定义分隔符。

依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用，详见：内置组件 - 常用元素操作）

默认Tab选项卡

Tab广泛应用于Web页面，因此我们也对其进行了良好的支持。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。
这是一个最基本的例子：

如果需要对Tab进行外部新增、删除、切换等操作，请移步到“内置组件-常用元素操作”页面中查阅：基础方法

<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><script>
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){var element = layui.element;//…
});
</script>

Tab简洁风格

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"><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>
</div>

通过追加class：layui-tab-brief 来设定简洁风格。
值得注意的是，如果存在 layui-tab-item 的内容区域，在切换时自动定位到对应内容。如果不存在内容区域，则不会定位到对应内容。你通常需要设置过滤器，通过 element模块的监听tab事件来进行切换操作。详见文档左侧【内置组件 - 基本元素操作 element】

Tab卡片风格

<div class="layui-tab layui-tab-card"><ul class="layui-tab-title"><li class="layui-this">网站设置</li><li>用户管理</li><li>权限分配</li><li>商品管理</li><li>订单管理</li></ul><div class="layui-tab-content" style="height: 100px;"><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 class="layui-tab-item">6</div></div>
</div>

通过追加class：layui-tab-card来设定卡片风格

Tab响应式

当容器的宽度不足以显示全部的选项时，即会自动出现展开图标，如下以卡片风格为例（注意：所有Tab风格都支持响应式）：

额，感觉像是打了个小酱油。而事实上在自适应的页面中（不固宽），它的意义才会呈现。

带删除的Tab

你可以对父层容器设置属性 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 class="layui-tab-item">6</div></div>
</div>

与默认相比没有什么特别的结构，就是多了个属性 lay-allowClose=“true”

ID焦点定位

你可以通过对选项卡设置属性 lay-id=“xxx” 来作为唯一的匹配索引，以用于外部的定位切换，如后台的左侧导航、以及页面地址 hash的匹配。

<div class="layui-tab" lay-filter="test1"><ul class="layui-tab-title"><li class="layui-this" lay-id="111" >文章列表</li><li lay-id="222">发送信息</li><li lay-id="333">权限分配</li><li lay-id="444">审核</li><li lay-id="555">订单管理</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>

属性 lay-id 是扮演这项功能的主要角色，它是动态操作的重要凭据，如：

<script>
layui.use('element', function(){var element = layui.element;//获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值var layid = location.hash.replace(/^#test1=/, '');element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项//监听Tab切换，以改变地址hash值element.on('tab(test1)', function(){location.hash = 'test1='+ this.getAttribute('lay-id');});
});
</script>

同样的还有增加选项卡和删除选项卡，都需要用到 lay-id，更多动态操作请阅读：element模块

提示

无论是导航、还是Tab，都需依赖 element模块，大部分行为都是在加载完该模块后自动完成的，但一些交互操作，如Tab事件监听等，需按照场景选择性使用。你可以移步文档左侧【内置组件 - 基本元素操作 element】了解详情

进度条

进度条 - 页面元素

进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素。

依赖加载组件：element

常规用法

我们进度条提供了两种尺寸及多种颜色的显示风格，其中颜色的选值可参考：背景色公共类。基本元素结构如下

<div class="layui-progress"><div class="layui-progress-bar" lay-percent="10%"></div>
</div><script>
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){var element = layui.element;
});
</script>

属性 lay-percent ：代表进度条的初始百分比，你也可以动态改变进度，详见：进度条的动态操作

正如上述你见到的，当对元素设置了class为 layui-progress-big 时，即为大尺寸的进度条风格。默认风格的进度条的百分比如果开启，会在右上角显示，而大号进度条则会在内部显示。

显示进度比文本

通过对父级元素设置属性 lay-showPercent=“yes” 来开启进度比的文本显示，支持：普通数字、百分数、分数（layui 2.1.7 新增）

<div class="layui-progress" lay-showPercent="true"><div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div>
</div><div class="layui-progress" lay-showPercent="yes"><div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div>
</div><div class="layui-progress layui-progress-big" lay-showPercent="yes"><div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
</div>

注意：默认情况下不会显示百分比文本，如果你想开启，对属性lay-showPercent设置任意值即可，如：yes。但如果不想显示，千万别设置no或者false，直接剔除该属性即可。

大号进度条

和世界上许多客观存在的事物一样，进度条也不仅是只有短小细长的尺寸，当然也有大而粗，这是我们认为相对合适的大尺寸。

<div class="layui-progress layui-progress-big"><div class="layui-progress-bar" lay-percent="20%"></div>
</div><div class="layui-progress layui-progress-big"><div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div>
</div><div class="layui-progress layui-progress-big" lay-showPercent="true"><div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
</div>

正如上述你见到的，当对元素设置了class为 layui-progress-big 时，即为大尺寸的进度条风格。默认风格的进度条的百分比如果开启，会在右上角显示，而大号进度条则会在内部显示。
如果你需要对进度条进行动态操作，如动态改变进度，那么你需要阅读：element模块

面板

面板 - 页面元素

一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等

依赖加载组件：element

常规面板

提示：该功能为 layui 2.6.0 新增

卡片面板

<div class="layui-card"><div class="layui-card-header">卡片面板</div><div class="layui-card-body">卡片式面板面板通常用于非白色背景色的主体内<br>从而映衬出边框投影</div>
</div>

如果你的网页采用的是默认的白色背景，不建议使用卡片面板。

折叠面板

通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板，element 模块会自动呈现状态图标。

<div class="layui-collapse"><div class="layui-colla-item"><h2 class="layui-colla-title">杜甫</h2><div class="layui-colla-content layui-show">内容区域</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">李清照</h2><div class="layui-colla-content layui-show">内容区域</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">鲁迅</h2><div class="layui-colla-content layui-show">内容区域</div></div>
</div><script>
//注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){var element = layui.element;//…
});
</script>

开启手风琴

在折叠面板的父容器设置属性 lay-accordion 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。

<div class="layui-collapse" lay-accordion><div class="layui-colla-item"><h2 class="layui-colla-title">杜甫</h2><div class="layui-colla-content layui-show">内容区域</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">李清照</h2><div class="layui-colla-content layui-show">内容区域</div></div><div class="layui-colla-item"><h2 class="layui-colla-title">鲁迅</h2><div class="layui-colla-content layui-show">内容区域</div></div>
</div>

表格

表格 - 页面元素

本篇为你介绍表格的HTML使用，你将通过内置的自定义属性对其进行风格的多样化设定。请注意：这仅仅局限于呈现基础表格，如果你急切需要的是数据表格（datatable），那么你应该详细阅读：table模块

常规用法

<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 lay-even lay-skin="line" lay-size="lg">
…
</table>

表格其它风格

除了默认的表格风格外，我们还提供了其它几种风格，你可以按照实际需求自由设定

<table class="layui-table" lay-skin="line">行边框表格（内部结构参见右侧目录“常规用法”）
</table><table class="layui-table" lay-skin="row">列边框表格（内部结构参见右侧目录“常规用法”）
</table><table class="layui-table" lay-even lay-skin="nob">无边框表格（内部结构参见右侧目录“常规用法”）
</table>

表格其它尺寸

除了默认的表格尺寸外，我们还提供了其它几种尺寸，你可以按照实际需求自由设定

<table class="layui-table" lay-size="sm">小尺寸表格（内部结构参见右侧目录“常规用法”）
</table><table class="layui-table" lay-size="lg">大尺寸表格（内部结构参见右侧目录“常规用法”）
</table>

结语

再次温馨提醒：如果你需要对表格进行排序、数据交互等一系列功能性操作，你需要进一步阅读 layui 的重要组成：table模块

徽章

徽章是一个修饰性的元素，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬，而显得十分和谐。

快速使用

不妨先来看看徽章这个小小的大家族吧：

你可能已经敏锐地发现，除去花枝招展的七种颜色，徽章具有三种不同的风格类型：小圆点、椭圆体、边框体


小圆点，通过 layui-badge-dot 来定义，里面不能加文字
<span class="layui-badge-dot"></span>
<span class="layui-badge-dot layui-bg-orange"></span>
<span class="layui-badge-dot layui-bg-green"></span>
<span class="layui-badge-dot layui-bg-cyan"></span>
<span class="layui-badge-dot layui-bg-blue"></span>
<span class="layui-badge-dot layui-bg-black"></span>
<span class="layui-badge-dot layui-bg-gray"></span>椭圆体，通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式
<span class="layui-badge">6</span>
<span class="layui-badge">99</span>
<span class="layui-badge">61728</span><span class="layui-badge">赤</span>
<span class="layui-badge layui-bg-orange">橙</span>
<span class="layui-badge layui-bg-green">绿</span>
<span class="layui-badge layui-bg-cyan">青</span>
<span class="layui-badge layui-bg-blue">蓝</span>
<span class="layui-badge layui-bg-black">黑</span>
<span class="layui-badge layui-bg-gray">灰</span>边框体，通过 layui-badge-rim 来定义
<span class="layui-badge-rim">6</span>
<span class="layui-badge-rim">Hot</span>

与其它元素的搭配

徽章主要是修饰作用，因此必不可少要与几乎所有的元素搭配。我们目前对以下元素内置了徽章的排版支持：

按钮

<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
<button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>

导航

<ul class="layui-nav" style="text-align: right;"> <-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 --><li class="layui-nav-item"><a href="">控制台<span class="layui-badge">9</span></a></li><li class="layui-nav-item"><a href="">个人中心<span class="layui-badge-dot"></span></a></li>
</ul>

选项卡（所有风格都支持，这里以简约风格为例）

<div class="layui-tab layui-tab-brief"><ul class="layui-tab-title"><li class="layui-this">网站设置</li><li>用户管理<span class="layui-badge-dot"></span></li><li>最新邮件<span class="layui-badge">99+</span></li></ul><div class="layui-tab-content"></div>
</div>

而至于与其它更多元素的搭配，就由你自由把控吧！

结语

其实，在与其它元素的搭配中，你要做的，无非就是合理运用这几点：边距背景色，徽章必然大显神威！

时间线

将时间抽象到二维平面，垂直呈现一段从过去到现在的故事。

快速使用

<ul class="layui-timeline"><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis">&#xe63f;</i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">8月18日</h3><p>layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。<br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。<br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i></p></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis">&#xe63f;</i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">8月16日</h3><p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p><ul><li>《登高》</li><li>《茅屋为秋风所破歌》</li></ul></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis">&#xe63f;</i><div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">8月15日</h3><p>中国人民抗日战争胜利72周年<br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代<br>铭记、感恩<br>所有为中华民族浴血奋战的英雄将士<br>永垂不朽</p></div></li><li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis">&#xe63f;</i><div class="layui-timeline-content layui-text"><div class="layui-timeline-title">过去</div></div></li>
</ul>

关于时间线，似乎也没有什么太多可介绍的东西。你需要留意的是以下几点

图标可以任意定义（但并不推荐更改）
标题区域并不意味着一定要加粗
内容区域可自由填充。

结语

授之以鱼不如授之以渔，时间线怎么用，就看你的了。

辅助

简单辅助元素 - 页面元素

本篇主要集中罗列页面中的一些简单辅助元素，如：引用块、字段集区块、横线等等，这些元素都无需依赖任何模块

引用区块

目前内置了上述两种风格

<blockquote class="layui-elem-quote">引用区域的文字</blockquote>
<blockquote class="layui-elem-quote layui-quote-nm">引用区域的文字</blockquote>

字段集区块

同样内置了两种风格，另一种风格即该文档的标题横线：字段集一行

<fieldset class="layui-elem-field"><legend>字段集区块 - 默认风格</legend><div class="layui-field-box">内容区域</div>
</fieldset><fieldset class="layui-elem-field layui-field-title"><legend>字段集区块 - 横线风格</legend><div class="layui-field-box">内容区域</div>
</fieldset>
你可以把它看作是一个有标题的横线

横线

默认分割线
<hr>赤色分割线
<hr class="layui-border-red">橙色分割线
<hr class="layui-border-orange">墨绿分割线
<hr class="layui-border-green">青色分割线
<hr class="layui-border-cyan">蓝色分割线
<hr class="layui-border-blue">黑色分割线
<hr class="layui-border-black">

内置模块

弹层组件文档 - layui.layer

layer 至今仍作为 layui 的代表作，它的受众广泛并非偶然，而是这数年来的坚持、不弃的执念，将那些不屑的眼光转化为应得的尊重，不断完善和维护、不断建设和提升社区服务，在 Web 开发者的圈子里口口相传，乃至于成为今天的 layui 最强劲的源动力。目前，layer 已然成为网页弹出层的首选交互方案，几乎随处可见。

模块加载名称：layer，独立版本：layer.layui.com

使用场景

由于layer可以独立使用，也可以通过Layui模块化使用。所以请按照你的实际需求来选择。

场景	用前准备	调用方式
1. 作为独立组件使用	如果你只是单独想使用 layer，你可以去 layer 独立版本官网下载组件包。你需要在你的页面引入jQuery1.8以上的任意版本，并引入layer.js。	通过script标签引入layer.js后，直接用即可。参考：快速上手
2. 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');
});

除了上面有所不同，其它都完全一致。

基础参数

我们提到的基础参数主要指调用方法时用到的配置项，如：layer.open({content: ‘’})layer.msg(’’, {time: 3})等，其中的content和time即是基础参数，以键值形式存在，基础参数可合理应用于任何层类型中，您不需要所有都去配置，大多数都是可选的。而其中的layer.open、layer.msg就是内置方法。注意，从2.3开始，无需通过layer.config来加载拓展模块

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的不同而不同。譬如：

/!*如果是页面层*/
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
});

skin - 样式类名

类型：String，默认：’’

skin不仅允许你传入layer内置的样式class名，还可以传入您自定义的class名。这是一个很好的切入点，意味着你可以借助skin轻松完成不同的风格定制。目前layer内置的skin有：layui-layer-lanlayui-layer-molv，未来我们还会选择性地内置更多，但更推荐您自己来定义。以下是一个自定义风格的简单例子

//单个使用
layer.open({skin: 'demo-class'
});
//全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高
layer.config({skin: 'demo-class'
})
//CSS
body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
body .demo-class .layui-layer-btn a{background:#333;}
body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}
…
加上body是为了保证优先级。你可以借助Chrome调试工具，定义更多样式控制层更多的区域。

你也可以去查看layer皮肤制作说明

area - 宽高

类型：String/Array，默认：‘auto’

在默认状态下，layer是宽高都自适应的，但当你只想定义宽度时，你可以area: ‘500px’，高度仍然是自适应的。当你宽高都要定义时，你可以area: [‘500px’, ‘300px’]

offset - 坐标

类型：String/Array，默认：垂直水平居中

offset默认情况下不用设置。但如果你不想垂直水平居中，你还可以进行以下赋值：

值	备注
offset: ‘auto’	默认坐标，即垂直水平居中
offset: ‘100px’	只定义top坐标，水平保持居中
offset: [‘100px’, ‘50px’]	同时定义top、left坐标
offset: ‘t’	快捷设置顶部坐标
offset: ‘r’	快捷设置右边缘坐标
offset: ‘b’	快捷设置底部坐标
offset: ‘l’	快捷设置左边缘坐标
offset: ‘lt’	快捷设置左上角
offset: ‘lb’	快捷设置左下角
offset: ‘rt’	快捷设置右上角
offset: ‘rb’	快捷设置右下角

icon - 图标。信息框和加载层的私有参数

类型：Number，默认：-1（信息框）/0（加载层）

信息框默认不显示图标。当你想显示图标时，默认皮肤可以传入0-6如果是加载层，可以传入0-2。如：

//eg1
layer.alert('酷毙了', {icon: 1});
//eg2
layer.msg('不开心。。', {icon: 5});
//eg3
layer.load(1); //风格1的加载

btn - 按钮

类型：String/Array，默认：‘确认’

信息框模式时，btn默认是一个确认按钮，其它层类型则默认不显示，加载层和tips层则无效。当您只想自定义一个按钮时，你可以btn: ‘我知道了’，当你要定义两个按钮时，你可以btn: [‘yes’, ‘no’]。当然，你也可以定义更多按钮，比如：btn: [‘按钮1’, ‘按钮2’, ‘按钮3’, …]，按钮1的回调是yes，而从按钮2开始，则回调为btn2: function(){}，以此类推。如：

//eg1
layer.confirm('纳尼？', {btn: ['按钮一', '按钮二', '按钮三'] //可以无限个按钮,btn3: function(index, layero){//按钮【按钮三】的回调}
}, function(index, layero){//按钮【按钮一】的回调
}, function(index){//按钮【按钮二】的回调
});//eg2
layer.open({content: 'test',btn: ['按钮一', '按钮二', '按钮三'],yes: function(index, layero){//按钮【按钮一】的回调},btn2: function(index, layero){//按钮【按钮二】的回调//return false 开启该代码可禁止点击该按钮关闭},btn3: function(index, layero){//按钮【按钮三】的回调//return false 开启该代码可禁止点击该按钮关闭},cancel: function(){ //右上角关闭回调//return false 开启该代码可禁止点击该按钮关闭}
});

btnAlign - 按钮排列

类型：String，默认：r

你可以快捷定义按钮的排列位置，btnAlign的默认值为r，即右对齐。该参数可支持的赋值如下：

值	备注
btnAlign: ‘l’	按钮左对齐
btnAlign: ‘c’	按钮居中对齐
btnAlign: ‘r’	按钮右对齐。默认值，不用设置

closeBtn - 关闭按钮

类型：String/Boolean，默认：1

layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0

shade - 遮罩

类型：String/Array/Boolean，默认：0.3

即弹层外区域。默认是0.3透明度的黑色背景（’#000’）。如果你想定义别的颜色，可以shade: [0.8, ‘#393D49’]；如果你不想显示遮罩，可以shade: 0

shadeClose - 是否点击遮罩关闭

类型：Boolean，默认：false

如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。

time - 自动关闭所需毫秒

类型：Number，默认：0

默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）

id - 用于控制弹层唯一标识

类型：String，默认：空字符

设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式

anim - 弹出动画

类型：Number，默认：0

我们的出场动画全部采用CSS3。这意味着除了ie6-9，其它所有浏览器都是支持的。目前anim可支持的动画类型有0-6 如果不想显示动画，设置 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是 shift 参数

值	备注
anim: 0	平滑放大。默认
anim: 1	从上掉落
anim: 2	从最底部往上滑入
anim: 3	从左滑入
anim: 4	从左翻滚
anim: 5	渐显
anim: 6	抖动

isOutAnim - 关闭动画（layer 3.0.3新增）

类型：Boolean，默认：true

默认情况下，关闭层时会有一个过度动画。如果你不想开启，设置 isOutAnim: false 即可

maxmin - 最大最小化。

类型：Boolean，默认：false

该参数值对type:1和type:2有效。默认不显示最大小化按钮。需要显示配置maxmin: true即可

fixed - 固定

类型：Boolean，默认：true

即鼠标滚动时，层是否固定在可视区域。如果不想，设置fixed: false即可

resize - 是否允许拉伸

类型：Boolean，默认：true

默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 false即可。该参数对loading、tips层无效

resizing - 监听窗口拉伸动作

类型：Function，默认：null

当你拖拽弹层右下角对窗体进行尺寸调整时，如果你设定了该回调，则会执行。回调返回一个参数：当前层的DOM对象

resizing: function(layero){console.log(layero);
}

scrollbar - 是否允许浏览器出现滚动条

类型：Boolean，默认：true

默认允许浏览器滚动，如果设定scrollbar: false，则屏蔽

maxWidth - 最大宽度

类型：Number，默认：360

请注意：只有当area: 'auto’时，maxWidth的设定才有效。

maxHeight - 最大高度

类型：Number，默认：无

请注意：只有当高度自适应时，maxHeight的设定才有效。

zIndex - 层叠顺序

类型：，默认：19891014（贤心生日 0.0）

一般用于解决和其它组件的层叠冲突。

move - 触发拖动的元素

类型：String/DOM/Boolean，默认：’.layui-layer-title’

默认是触发标题区域拖拽。如果你想单独定义，指向元素的选择器或者DOM即可。如move: ‘.mine-move’。你还配置设定move: false来禁止拖拽

moveOut - 是否允许拖拽到窗口外

类型：Boolean，默认：false

默认只能在窗口内拖拽，如果你想让拖到窗外，那么设定moveOut: true即可

moveEnd - 拖动完毕后的回调方法

类型：Function，默认：null

默认不会触发moveEnd，如果你需要，设定moveEnd: function(layero){}即可。其中layero为当前层的DOM对象

tips - tips方向和颜色

类型：Number/Array，默认：2

tips层的私有参数。支持上右下左四个方向，通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色，可以设定tips: [1, ‘#c00’]

tipsMore - 是否允许多个tips

类型：Boolean，默认：false

允许多个意味着不会销毁之前的tips层。通过tipsMore: true开启

success - 层弹出后的成功回调方法

类型：Function，默认：null

当你需要在层创建完毕时即执行一些语句，可以通过该回调。success会携带两个参数，分别是当前层DOM当前层索引。如：

layer.open({

  content: '测试回调',success: function(layero, index){console.log(layero, index);}
});

yes - 确定按钮回调方法

类型：Function，默认：null

该回调携带两个参数，分别为当前层索引、当前层DOM对象。如：

layer.open({content: '测试回调',yes: function(index, layero){//do somethinglayer.close(index); //如果设定了yes回调，需进行手工关闭}
});

cancel - 右上角关闭按钮触发的回调

类型：Function，默认：null

该回调携带两个参数，分别为：当前层索引参数（index）、当前层的DOM对象（layero），默认会自动触发关闭。如果不想关闭，return false即可，如；

cancel: function(index, layero){ if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭layer.close(index)}return false;
}

end - 层销毁后触发的回调

类型：Function，默认：null

无论是确认还是取消，只要层被销毁了，end都会执行，不携带任何参数。

full/min/restore -分别代表最大化、最小化、还原后触发的回调

类型：Function，默认：null

携带两个参数，即当前层 DOM、当前层索引

min: function(layero, index){ //index 参数为 layui 2.6.6 或独立版 layer 3.5.0 开始新增//当层最小化时触发//自定义操作，并阻止默认最小化//layer.min(index); //单独执行最小化//return false; //阻止默认最小化
}

minStack - 是否默认堆叠在左下角

类型：Boolean，默认：true

layui 2.6.6 或独立版 layer 3.5.0 开始新增

layer.config(options) - 初始化全局配置

这是一个可以重要也可以不重要的方法，重要的是，它的权利真的很大，尤其是在模块化加载layer时，你会发现你必须要用到它。它不仅可以配置一些诸如路径、加载的模块，甚至还可以决定整个弹层的默认参数。而说它不重要，是因为多数情况下，你会发现，你似乎不是那么十分需要它。但你真的需要认识一下这位伙计。

如果您是采用seajs或者requirejs加载layer，你需要执行该方法来完成初始化的配置。比如：

layer.config({path: '/res/layer/' //layer.js所在的目录，可以是绝对目录，也可以是相对目录
});
//这样的话，layer就会去加载一些它所需要的配件，比如 css 等。
//当然，你即便不用seajs或者requirejs，也可以通过上述方式设定路径

如果你是采用合并的方式引入 layer，那么您需要在 script 标签上加一个自定义属性 merge=“true”。如：

<script src="?a.js&layer.js" merge="true">如此，layer 则不会去自动获取路径，但你需要通过以下方式来完成初始化的配置
layer.config({path: '/res/layer/' //layer.js 所在的目录，可以是绝对目录，也可以是相对目录
});

除上述之外，如果您采用的是独立的 layer，那么你还可以在动态加载 layer 之前预先定义一个我们约定好的全局对象：

<script>
var LAYUI_GLOBAL = {layer_dir: '/res/layer/' //layer 所在目录（layer 3.5 开始新增）
};
</script>

提示 1：上述只针对独立版 layer，其 LAYUI_GLOBAL 设定的 layer_dir 优先级高于 layer.config 设定的 path；
提示 2：如果是 layui 加载的 layer，可以无视上述所有的目录设定。前置工作都会在 layui 内部完成。

另外，layer.config 还可以配置层默认的基础参数，如：

layer.config({anim: 1, //默认动画风格skin: 'layui-layer-molv' //默认皮肤//…
});
//除此之外，extend 还允许你加载拓展的 css 皮肤，如：
layer.config({//如果是独立版的layer，则将 myskin 存放在 ./skin 目录下//如果是layui中使用layer，则将 myskin 存放在 ./css/modules/layer 目录下extend: 'myskin/style.css'
});
//具体的皮肤定制，可以参见：skin参数说明

layer.ready(callback) - 初始化就绪

由于我们的layer内置了轻量级加载器，所以你根本不需要单独引入css等文件。但是加载总是需要过程的。当你在页面一打开就要执行弹层时，你最好是将弹层放入ready方法中，如：

//页面一打开就执行弹层
layer.ready(function(){layer.msg('很高兴一开场就见到你');
});

我是华丽的酱油：介绍完上面两位引导者，接下来我们真正的主角闪亮登场了。此处应有掌声 ^,^

layer.open(options) - 原始核心方法

基本上是露脸率最高的方法，不管是使用哪种方式创建层，都是走layer.open()，创建任何类型的弹层都会返回一个当前层索引，上述的options即是基础参数，另外，该文档统一采用options作为基础参数的标识例子：

var index = layer.open({content: 'test'
});
//拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。

噢，请等等，上面这位主角的介绍篇幅怎么看怎么都觉得跟它的地位不符，
作者在文档中只给了它如此可怜的一块地？？这是因为，它真的已经大众得不能再大众了，
你真正需要了解的，是它的内部器官，即上面一大篇幅介绍的各种基础参数。 ←_←

layer.alert(content, options, yes) - 普通信息框

它的弹出似乎显得有些高调，一般用于对用户造成比较强烈的关注，类似系统alert，但却比alert更灵便。它的参数是自动向左补齐的。通过第二个参数，可以设定各种你所需要的基础参数，但如果你不需要的话，直接写回调即可。如

//eg1
layer.alert('只想简单的提示');
//eg2
layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调，可以放在第三个参数中。
//eg3
layer.alert('有了回调', function(index){//do somethinglayer.close(index);
});

layer.confirm(content, options, yes, cancel) - 询问框

类似系统confirm，但却远胜confirm，另外它不是和系统的confirm一样阻塞你需要把交互的语句放在回调体中。同样的，它的参数也是自动补齐的。

//eg1
layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){//do somethinglayer.close(index);
});
//eg2
layer.confirm('is not?', function(index){//do somethinglayer.close(index);
});

layer.msg(content, options, end) - 提示框

我们在源码中用了相对较大的篇幅来定制了这个msg，目的是想将其打造成露脸率最高的提示框。而事实上我的确也在大量地使用它。因为它简单，而且足够得自觉，它不仅占据很少的面积，而且默认还会3秒后自动消失所有这一切都决定了我对msg的爱。因此我赋予了它许多可能在外形方面，它坚持简陋的变化，在作用方面，它坚持零用户操作。而且它的参数也是自动补齐的。

//eg1
layer.msg('只想弱弱提示');
//eg2
layer.msg('有表情地提示', {icon: 6});
//eg3
layer.msg('关闭后想做些什么', function(){//do something
});
//eg
layer.msg('同上', {icon: 1,time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){//do something
});

layer.load(icon, options) - 加载层

type:3的深度定制。load并不需要你传太多的参数，但如果你不喜欢默认的加载风格，你还有选择空间。icon支持传入0-2如果是0，无需传。另外特别注意一点：load默认是不会自动关闭的，因为你一般会在ajax回调体中关闭它。

//eg1
var index = layer.load();
//eg2
var index = layer.load(1); //换了种风格
//eg3
var index = layer.load(2, {time: 10*1000}); //又换了种风格，并且设定最长等待10秒
//关闭
layer.close(index);

layer.tips(content, follow, options) - tips层

type:4的深度定制。也是我本人比较喜欢的一个层类型，因为它拥有和msg一样的低调和自觉，而且会智能定位，即灵活地判断它应该出现在哪边。默认是在元素右边弹出

//eg1
layer.tips('只想提示地精准些', '#id');
//eg 2
$('#id').on('click', function(){var that = this;layer.tips('只想提示地精准些', that); //在元素的事件回调体中，follow直接赋予this即可
});
//eg 3
layer.tips('在上面', '#id', {tips: 1
});

上面主要是一些弹层的调用方式，而下面介绍的是一些辅助性的方法

layer.close(index) - 关闭指定层

关于它似乎没有太多介绍的必要，唯一让你疑惑的，可能就是这个index了吧。事实上它非常容易得到。

//当你想关闭当前页的某个层时
var index = layer.open();
var index = layer.alert();
var index = layer.load();
var index = layer.tips();
//正如你看到的，每一种弹层调用方式，都会返回一个index
layer.close(index); //此时你只需要把获得的index，轻轻地赋予layer.close即可//如果你想关闭最新弹出的层，直接获取layer.index即可
layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的//当你在iframe页面关闭自身时
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭//关闭后的回调（layui 2.6.5、layer 3.4.0 新增）
layer.close(index, function(){//do something
});

layer.closeAll(type) - 关闭所有层

如果你很懒，你不想去获取index你只想关闭。那么closeAll真的可以帮上你。如果你不指向层类型的话，它会销毁掉当前页所有的layer层。当然，如果你只想关闭某个类型的层，那么你可以

layer.closeAll(); //疯狂模式，关闭所有层
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe层
layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips层//关闭后的回调（layui 2.6.5、layer 3.4.0 新增）
layer.closeAll('loading', function(){ //关闭 loading 并执行回调//do something
});
layer.closeAll(function(){ //关闭所有层并执行回调//do something
});

layer.style(index, cssStyle) - 重新定义层的样式

该方法对loading层和tips层无效。参数index为层的索引，cssStyle允许你传入任意的css属性

//重新给指定层设定width、top等
layer.style(index, {width: '1000px',top: '10px'
});

layer.title(title, index) - 改变层的标题

使用方式：layer.title(‘标题变了’, index)

layer.getChildFrame(selector, index) - 获取iframe页的DOM

当你试图在当前页获取iframe页的DOM元素时，你可以用此方法。selector即iframe页的选择器

layer.open({type: 2,content: 'test/iframe.html',success: function(layero, index){var body = layer.getChildFrame('body', index);var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();console.log(body.html()) //得到iframe页的body内容body.find('input').val('Hi，我是从父页来的')}
});

layer.getFrameIndex(windowName) - 获取特定iframe层的索引

此方法一般用于在iframe页关闭自身时用到。

//假设这是iframe页
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭

layer.iframeAuto(index) - 指定iframe层自适应

调用该方法时，iframe层的高度会重新进行适应

layer.iframeSrc(index, url) - //重置特定iframe url

似乎不怎么常用的样子。使用方式：layer.iframeSrc(index, ‘http://sentsin.com’)

layer.setTop(layero) -置顶当前窗口

非常强大的一个方法，虽然一般很少用。但是当你的页面有很多很多layer窗口，你需要像Window窗体那样，点击某个窗口，该窗体就置顶在上面，那么setTop可以来轻松实现。它采用巧妙的逻辑，以使这种置顶的性能达到最优

//通过这种方式弹出的层，每当它被选择，就会置顶。
layer.open({type: 2,shade: false,area: '500px',maxmin: true,content: 'http://www.layui.com',zIndex: layer.zIndex, //重点1success: function(layero){layer.setTop(layero); //重点2}
});

layer.full()、layer.min()、layer.restore() - 手工执行最大小化

一般用于在自定义元素上触发最大化、最小化和全屏。

layer.full(index); //执行最大化
layer.min(index); //执行最小化
layer.restore(index); //执行还原

layer.prompt(options, yes) - 输入层

prompt的参数也是向前补齐的。options不仅可支持传入基础参数，还可以传入prompt专用的属性。当然，也可以不传。yes携带value 表单值index 索引elem 表单元素

//prompt层新定制的成员如下
{formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）value: '', //初始时的值，默认空字符maxlength: 140, //可输入文本的最大长度，默认500
}//例子1
layer.prompt(function(value, index, elem){alert(value); //得到valuelayer.close(index);
});//例子2
layer.prompt({formType: 2,value: '初始值',title: '请输入值',area: ['800px', '350px'] //自定义文本域宽高
}, function(value, index, elem){alert(value); //得到valuelayer.close(index);
});

layer.tab(options) - tab层

tab层只单独定制了一个成员，即tab: []，这个好像没有什么可介绍的，简单粗暴看例子

layer.tab({area: ['600px', '300px'],tab: [{title: 'TAB1', content: '内容1'}, {title: 'TAB2', content: '内容2'}, {title: 'TAB3', content: '内容3'}]
});

layer.photos(options) - 相册层

相册层，也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式。如果是json传入，如下：

$.getJSON('/jquery/layer/test/photos.json', function(json){layer.photos({photos: json,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）});
});
//而返回的json需严格按照如下格式：

{"title": "", //相册标题"id": 123, //相册id"start": 0, //初始显示的图片序号，默认0"data": [   //相册包含的图片，数组格式{"alt": "图片名","pid": 666, //图片id"src": "", //原图地址"thumb": "" //缩略图地址}]
}

如果是直接从页面中获取图片，那么需要指向图片的父容器，并且你的img可以设定一些规定的属性（但不是必须的）。

//HTML示例
<div id="layer-photos-demo" class="layer-photos-demo"><img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名"><img layer-pid="图片id，可以不写" layer-src="大图地址" src="缩略图" alt="图片名">
</div><script>
//调用示例
layer.photos({photos: '#layer-photos-demo',anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
</script>

看看一个实例呗：

第二种方式的图片查看器显然更加简单，因为无需像第一种那样返回规定的json，但是他们还是有各自的应用场景的，你可以按照你的需求进行选择。另外，photos还有个tab回调，切换图片时触发。

layer.photos({photos: json/选择器,tab: function(pic, layero){console.log(pic) //当前图片的一些信息}
});

结语

合理地设定基础参数，合理地选择内置方法，合理的心态，合理地阅读，只要一切都在合理的前提下，你才会感知到layer许许多多令人愉悦的地方，她真的是否如你所愿，取决于你对她了解的深远。愿layer能给你的web开发带来一段美妙的旅程。别忘了在线调试。

日期和时间

日期和时间组件文档 - layui.laydate

如你所见，layDate 在 layui 2.0 的版本中迎来一次重生。无论曾经它给你带来过多么糟糕的体验，从今往后，所有的旧坑都将弥合。全面重写的 layDate 包含了大量的更新，其中主要以：年选择器、年月选择器、日期选择器、时间选择器、日期时间选择器五种类型的选择方式为基本核心，并且均支持范围选择（即双控件）。内置强劲的自定义日期格式解析和合法校正机制，含中文版和国际版，主题简约却又不失灵活多样。由于内部采用的是零依赖的原生 JavaScript 编写，因此又可作为独立组件使用。毫无疑问，这是 layui 的虔心之作。
模块加载名称：laydate

快速使用

和 layer 一样，你可以在 layui 中使用 layDate，也可直接使用 layDate 独立版，请按照你的实际需求来选择。

场景	用前准备	调用方式
1. 在 layui 模块中使用	下载 layui 后，引入layui.css和layui.js即可	通过layui.use(‘laydate’, callback)加载模块后，再调用方法
2. 作为独立组件使用	去 layDate 独立版本官网下载组件包，引入 laydate.js 即可	直接调用方法使用

这是一个最简单的示例：

对应的代码如下：
在 layui 模块中使用

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>layDate快速使用</title><link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body><div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 --><input type="text" class="layui-input" id="test1">
</div><script src="/static/build/layui.js"></script>
<script>
layui.use('laydate', function(){var laydate = layui.laydate;//执行一个laydate实例laydate.render({elem: '#test1' //指定元素});
});
</script>
</body>
</html>

作为独立组件使用

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>使用 layDate 独立版</title>
</head>
<body><input type="text" id="test1"><script src="laydate.js"></script>
<script>
//执行一个laydate实例
laydate.render({elem: '#test1' //指定元素
});
</script>
</body>
</html>

除了在组件加载方式有一些小小的不同，其它都完全类似

基础参数选项

通过核心方法：laydate.render(options) 来设置基础参数，也可以通过方法：laydate.set(options) 来设定全局基础参数.

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'
});

range - 开启左右面板范围选择

类型：Boolean/String/Array，默认值：false

如果设置 true，将默认采用 “ - ” 分割。你也可以直接设置分割字符。五种选择器类型均支持左右面板的范围选择。

//日期范围选择
laydate.render({ elem: '#test',range: true //或 range: '~' 来自定义分割字符
});//日期时间范围选择
laydate.render({ elem: '#test',type: 'datetime',range: true
});//时间范围选择
laydate.render({ elem: '#test',type: 'time',range: true
});//年范围选择
laydate.render({ elem: '#test',type: 'year',range: true
});//年月范围选择
laydate.render({ elem: '#test',type: 'month',range: true
});

如果您要将开始时间和结束时间分开，那么还可以将 range 参数设置为数组，如：

<div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">日期范围</label><div class="layui-inline" id="test-range"><div class="layui-input-inline"><input type="text" id="startDate" class="layui-input" placeholder="开始日期"></div><div class="layui-form-mid">-</div><div class="layui-input-inline"><input type="text" id="endDate" class="layui-input" placeholder="结束日期"></div></div></div>
</div>
<script>
laydate.render({ elem: '#test-range' //开始时间和结束时间所在 input 框的父选择器//设置开始日期、日期日期的 input 选择器,range: ['#startDate', '#endDate'] //数组格式为 layui 2.6.6 开始新增
});
</script>

format - 自定义格式

类型：String，默认值：yyyy-MM-dd

通过日期时间各自的格式符和长度，来设定一个你所需要的日期格式。layDate 支持的格式如下：

格式符	说明
yyyy	年份，至少四位数。如果不足四位，则前面补零
y	年份，不限制位数，即不管年份多少位，前面均不补零
MM	月份，至少两位数。如果不足两位，则前面补零。
M	月份，允许一位数。
dd	日期，至少两位数。如果不足两位，则前面补零。
d	日期，允许一位数。
HH	小时，至少两位数。如果不足两位，则前面补零。
H	小时，允许一位数
mm	分钟，至少两位数。如果不足两位，则前面补零。
m	分钟，允许一位数。
ss	秒数，至少两位数。如果不足两位，则前面补零
s	秒数，允许一位数。

通过上述不同的格式符组合成一段日期时间字符串，可任意排版，如下所示：

格式	示例值
yyyy-MM-dd HH:mm:ss	2017-08-18 20:08:08
yyyy年MM月dd日 HH时mm分ss秒	2017年08月18日 20时08分08秒
yyyyMMdd	20170818
dd/MM/yyyy	18/08/2017
yyyy年M月	2017年8月
M月d日	8月18日
北京时间：HH点mm分	北京时间：20点08分
yyyy年的M月某天晚上，大概H点	2017年的8月某天晚上，大概20点

//自定义日期格式
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 的时间戳
});

isInitValue - 初始值填充

类型：Boolean，默认值：true

用于控制是否自动向元素填充初始值（需配合 value 参数使用）

laydate.render({elem: '#test',value: '2017-09-10',isInitValue: false //是否允许填充初始值，默认为 true
});

注意：该参数为 layui 2.3.0 新增。

isPreview - 是否开启选择值预览

类型：Boolean，默认值：true

用于控制是否显示当前结果的预览（type 为 datetime 时不开启）

laydate.render({elem: '#test',isPreview: false //禁用面板左下角选择值的预览，默认 true
});

注意：该参数为 layui 2.6.6 新增。

min/max - 最小/大范围内的日期时间值

类型：string，默认值：min: ‘1900-1-1’、max: ‘2099-12-31’

设定有限范围内的日期或时间值，不在范围内的将不可选中。这两个参数的赋值非常灵活，主要有以下几种情况：

序号	说明
1	如果值为字符类型，则：年月日必须用 -（中划线）分割、时分秒必须用 :（半角冒号）号分割。这里并非遵循 format 设定的格式
2	如果值为整数类型，且数字＜86400000，则数字代表天数，如：min: -7，即代表最小日期在7天前，正数代表若干天后
3	如果值为整数类型，且数字 ≥ 86400000，则数字代表时间戳，如：max: 4073558400000，即代表最大日期在：公元3000年1月1日

实例

//日期有效范围只限定在：2017年
laydate.render({ elem: '#test',min: '2017-1-1',max: '2017-12-31'
});//日期有效范围限定在：过去一周到未来一周
laydate.render({ elem: '#test',min: -7 //7天前,max: 7 //7天后
});//日期时间有效范围的设定:
laydate.render({ elem: '#test',type: 'datetime',min: '2017-8-11 12:30:00',max: '2017-8-18 12:30:00'
});//时间有效范围设定在: 上午九点半到下午五点半
laydate.render({ elem: '#test',type: 'time',min: '09:30:00',max: '17:30:00'
});

毫不保留地说，min和max参数是两个非常强大的存在，合理运用，可帮助用户在日期与时间的选择上带来更为友好的约束与体验。

trigger - 自定义弹出控件的事件

类型：String，默认值：focus，如果绑定的元素非输入框，则默认事件为：click

//自定义事件
laydate.render({ elem: '#test',trigger: 'click' //采用click弹出
});

show - 默认显示

类型：Boolean，默认值：false

如果设置: true，则控件默认显示在绑定元素的区域。通常用于外部事件调用控件，如：

//默认显示
laydate.render({elem: '#test',show: true //直接显示
});//外部事件调用
lay('#test1').on('click', function(e){ //假设 test1 是一个按钮laydate.render({elem: '#test',show: true //直接显示,closeStop: '#test1' //这里代表的意思是：点击 test1 所在元素阻止关闭事件冒泡。如果不设定，则无法弹出控件});
});

position - 定位方式

类型：String，默认值：absolute

用于设定控件的定位方式，有以下三种可选值：

position 可选值	说明
abolute	绝对定位，始终吸附在绑定元素周围。默认值
fixed	固定定位，初始吸附在绑定元素周围，不随浏览器滚动条所左右。一般用于在固定定位的弹层中使用。
static	静态定位，控件将直接嵌套在指定容器中。注意：请勿与 show 参数的概念搞混淆。show为 true 时，控件仍然是采用绝对或固定定位。而这里是直接嵌套显示

下面是一个直接嵌套显示的例子：

【HTML】
<span id="testView"></span>
<div id="test2"></div>【JS】:
//嵌套在指定容器中
laydate.render({elem: '#test2',position: 'static',change: function(value, date){ //监听日期被切换lay('#testView').html(value);}
});

zIndex - 层叠顺序

类型：Number，默认值：66666666

一般用于解决与其它元素的互相被遮掩的问题。如果 position 参数设为 static 时，该参数无效

//设定控件的层叠顺序
laydate.render({elem: '#test',zIndex: 99999999
});

showBottom - 是否显示底部栏

类型：Boolean，默认值：true

如果设置 false，将不会显示控件的底部栏区域

//不显示底部栏
laydate.render({elem: '#test',showBottom: false
});

btns - 工具按钮

类型：Array，默认值：[‘clear’, ‘now’, ‘confirm’]

右下角显示的按钮，会按照数组顺序排列，内置可识别的值有：clear、now、confirm

//只显示清空和确认
laydate.render({elem: '#test',btns: ['clear', 'confirm']
});

lang - 语言

类型：String，默认值：cn

我们内置了两种语言版本：cn（中文版）、en（国际版，即英文版）。这里并没有开放自定义文字，是为了避免繁琐的配置。

//国际版
laydate.render({elem: '#test',lang: 'en'
});

theme - 主题

类型：String，默认值：default

我们内置了多种主题，theme的可选值有：default（默认简约）、molv（墨绿背景）、#颜色值（自定义颜色背景）、grid（格子主题）

//墨绿背景主题
laydate.render({elem: '#test',theme: 'molv'
});//自定义背景色主题 - 非常实用
laydate.render({elem: '#test',theme: '#393D49'
});//格子主题
laydate.render({elem: '#test',theme: 'grid'
});

另外，你还可以传入其它字符，如：theme: ‘xxx’，那么控件将会多出一个 class=“laydate-theme-xxx” 的CSS类，以便于你单独定制主题。

calendar - 是否显示公历节日

类型：Boolean，默认值：false

我们内置了一些我国通用的公历重要节日，通过设置 true 来开启。国际版不会显示。

//允许显示公历节日
laydate.render({elem: '#test',calendar: true
});

mark - 标注重要日子

类型：Object，默认值：无

calendar 参数所代表的公历节日更多情况下是一个摆设。因此，我们还需要自定义标注重要日子，比如结婚纪念日？日程等？它分为以下两种：

标注	格式	说明
每年的日期	{‘0-9-18’: ‘国耻’}	0 即代表每一年
每月的日期	{‘0-0-15’: ‘中旬’}	0-0 即代表每年每月（layui 2.1.1/layDate 5.0.4 新增
特定的日期	{‘2017-8-21’: ‘发布’)	-

可同时设定多个，如：

//标注重要日子
var ins1 = laydate.render({elem: '#test',mark: {'0-10-14': '生日','0-12-31': '跨年' //每年12月31日,'0-0-10': '工资' //每个月10号,'2017-8-15': '' //具体日期,'2017-8-20': '预发' //如果为空字符，则默认显示数字+徽章,'2017-8-21': '发布'},done: function(value, date){if(date.year === 2017 && date.month === 8 && date.date === 15){ //点击2017年8月15日，弹出提示语ins1.hint('中国人民抗日战争胜利72周年');}}
});

非常实用的存在，是时候利用它制作你的日程表了。

控件初始打开的回调

控件在打开时触发，回调返回一个参数：初始的日期时间对象

laydate.render({elem: '#test',ready: function(date){console.log(date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}}
});

日期时间被切换后的回调

年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象

laydate.render({elem: '#test',change: function(value, date, endDate){console.log(value); //得到日期生成的值，如：2017-08-18console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。}
});

控件选择完毕后的回调

点击日期、清空、现在、确定均会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象

laydate.render({elem: '#test',done: function(value, date, endDate){console.log(value); //得到日期生成的值，如：2017-08-18console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。}
});

弹出控件提示

事实上，执行核心方法 laydate.render(options) 会返回一个当前实例对象。其中包含一些成员属性和方法，比如：hint方法

var ins1 = laydate.render({elem: '#test',change: function(value, date, endDate){ins1.hint(value); //在控件上弹出value值}
});

配置基础路径

如果你不是采用 layui 或者普通 script 标签方式加载的 laydate.js，而是采用 requirejs 等其它方式引用 laydate，那么你需要设置基础路径，以便 laydate.css 完成加载。

laydate.path = '/static/xxx/'; //laydate.js 所在目录//配置好路径后，再调用
laydate.render(options);

除上述之外，如果您采用的是独立的 laydate，那么你还可以在动态加载 laydate之前预先定义一个我们约定好的全局对象：

<script>
var LAYUI_GLOBAL = {laydate_dir: '/res/laydate/' //laydate 所在目录（laydate 5.3.0 开始新增）
};
</script>

提示 1：上述只针对独立版 laydate，其 LAYUI_GLOBAL 设定的 laydate_dir 优先级高于 laydate.path；
提示 2：如果是 layui 加载的 laydate，可以无视上述所有的目录设定。前置工作都会在 layui 内部完成。

其它方法

方法名	备注
laydate.getEndDate(month, year)	$获取指定年月的最后一天，month默认为当前月，year默认为当前年。如：var endDate1 = laydate.getEndDate(10); //得到31。var endDate2 = laydate.getEndDate(2, 2080); //得到29

结语

layDate最早发布于2014年6月，但当时只迭代了一个版本，就再也没有更新。而时至今日，作为 layui 2.0 的核心组成之一，layDate 再度强势复活，不禁让人感慨万千！layDate曾被我定义为：“最失败的一个组件”，被我无情搁置了整整三年。现在，是时候卸下这个标签

分页

分页模块文档 - layui.laypage

layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的 UI、灵活的排版，极简的调用方式，这一切的优质元素，都将毫无违和感地镶嵌在你的页面之中。
模块加载名称：laypage

快速使用

laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染：
在 layui 模块中使用

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>layPage快速使用</title><link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body><div id="test1"></div><script src="/static/build/layui.js"></script>
<script>
layui.use('laypage', function(){var laypage = layui.laypage;//执行一个laypage实例laypage.render({elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号,count: 50 //数据总数，从服务端得到});
});
</script>
</body>
</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]
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

以及参数选项curr：

//开启location.hash的记录
laypage.render({elem: 'test1',count: 500,curr: location.hash.replace('#!fenye=', '') //获取起始页,hash: 'fenye' //自定义hash值
});

类型为Number，默认值1

jump - 切换分页的回调

当分页被切换时触发，函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）

laypage.render({elem: 'test1',count: 70 //数据总数，从服务端得到,jump: function(obj, first){//obj包含了当前分页的所有参数，比如：console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。console.log(obj.limit); //得到每页显示的条数//首次不执行if(!first){//do something}}
});

结束

laypage 只负责分页本身的逻辑，具体的数据请求与渲染需要另外去完成。laypage 不仅能应用在一般的异步分页上，还可直接对一段已知数据进行分页展现。其中大家使用最多的 table 组件就是采用的 laypage 作为分页依赖。

模板引擎

模板引擎文档 - layui.laytpl

laytpl 是 JavScript 模板引擎，在字符解析上有着比较出色的表现，欠缺之处在于异常调试上。由于传统意义的前端模板引擎已经变得不再流行，所以 laytpl 后续可能会进行重写，目前方向暂时还没有想好，预计会在layui比较稳定后开始实施。

模块加载名称：laytpl，

快速使用

laytpl 模板可与数据共存，这意味着可直接在模板中处理逻辑。

layui.use('laytpl', function(){var laytpl = layui.laytpl;//直接解析字符laytpl('{{ d.name }}是一位公猿').render({name: '贤心'}, function(string){console.log(string); //贤心是一位公猿});//你也可以采用下述同步写法，将 render 方法的回调函数剔除，可直接返回渲染好的字符var string =  laytpl('{{ d.name }}是一位公猿').render({name: '贤心'});console.log(string);  //贤心是一位公猿//如果模板较大，你也可以采用数据的写法，这样会比较直观一些laytpl(['{{ d.name }}是一位公猿','其它字符 {{ d.content }}  其它字符'].join(''))
});

你也可以将模板存储在页面或其它任意位置：

//第一步：编写模版。你可以使用一个script标签存放模板，如：
<script id="demo" type="text/html"><h3>{{ d.title }}</h3><ul>{{#  layui.each(d.list, function(index, item){ }}<li><span>{{ item.modname }}</span><span>{{ item.alias }}：</span><span>{{ item.site || '' }}</span></li>{{#  }); }}{{#  if(d.list.length === 0){ }}无数据{{#  } }} </ul>
</script>//第二步：建立视图。用于呈现渲染结果。
<div id="view"></div>//第三步：渲染模版
var data = { //数据"title":"Layui常用模块","list":[{"modname":"弹层","alias":"layer","site":"layer.layui.com"},{"modname":"表单","alias":"form"}]
}
var getTpl = demo.innerHTML
,view = document.getElementById('view');
laytpl(getTpl).render(data, function(html){view.innerHTML = html;
});

模版语法

如果模版默认的 {{ }} 分隔符与你的其它模板（一般是服务端模板）存在冲突，你也可以重新定义分隔符：

laytpl.config({open: '<%',close: '%>'
});//分割符将必须采用上述定义的
laytpl(['<%# var type = "公"; %>' //JS 表达式,'<% d.name %>是一位<% type %>猿。'
].join('')).render({name: '贤心'
}, function(string){console.log(string); //贤心是一位公猿
});

结语

laytpl 应用在 layui 的很多模块中，如：layim、table 等。尽管传统意义的前端模板引擎已经变得不再流行，但 laytpl 仍然可以发挥一定作用，不妨尝试一下吧。

table 数据表格

table 数据表格文档 - layui.table

table 模块是我们的又一走心之作，在 layui 2.0 的版本中全新推出，是 layui 最核心的组成之一。它用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。尽管如此，我们仍将对其进行完善，在控制代码量和性能的前提下，不定期增加更多人性化功能。table 模块也将是 layui 重点维护的项目之一。

模块加载名称：table

快速使用

创建一个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: '/demo/table/user/' //数据接口,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>

一切都并不会陌生：绑定容器、设置数据接口、在表头设定对应的字段，剩下的…就交给 layui 吧。你的牛刀是否早已饥渴难耐？那么不妨现在就去小试一波吧。数据接口可参考：返回的数据，规则在下文也有讲解。

三种初始化渲染方式

在上述“快速使用”的介绍中，你已经初步见证了 table 模块的信手拈来，但其使用方式并不止那一种。我们为了满足各种情况下的需求，对 table 模块做了三种初始化的支持，你可按照个人喜好和实际情况灵活使用。

方法渲染

其实这是“自动化渲染”的手动模式，本质类似，只是“方法级渲染”将基础参数的设定放在了JS代码中，且原始的 table 标签只需要一个

选择器：

//HTMLcode<table id="demo" lay-filter="test"></table>

//JavaScriptcode
var table = layui.table;//执行渲染
table.render({elem: '#demo' //指定原始表格元素选择器（推荐id选择器）,height: 315 //容器高度,cols: [{}] //设置表头//,…… //更多参数参考右侧目录：基本参数选项
});

事实上我们更推荐采用“方法级渲染”的做法，其最大的优势在于你可以脱离HTML文件，而专注于JS本身。尤其对于项目的频繁改动及发布，其便捷性会体现得更为明显。而究竟它与“自动化渲染”的方式谁更简单，也只能由各位猿猿们自行体味了。

备注：table.render()方法返回一个对象：var tableIns = table.render(options)，可用于对当前表格进行“重载”等操作，详见目录：表格重载

自动渲染

所谓的自动渲染，即：在一段 table 容器中配置好相应的参数，由 table 模块内部自动对其完成渲染，而无需你写初始的渲染方法。其特点在上文也有阐述。你需要关注的是以下三点：

带有 class=“layui-table” 的标签。
对标签设置属性 lay-data="" 用于配置一些基础参数
在标签中设置属性lay-data=""用于配置表头信息

按照上述的规范写好table原始容器后，只要你加载了layui 的 table 模块，就会自动对其建立动态的数据表格。下面是一个示例：

<table class="layui-table" lay-data="{height:315, url:'/demo/table/user/', page:true, id:'test'}" lay-filter="test"><thead><tr><th lay-data="{field:'id', width:80, sort: true}">ID</th><th lay-data="{field:'username', width:80}">用户名</th><th lay-data="{field:'sex', width:80, sort: true}">性别</th><th lay-data="{field:'city'}">城市</th><th lay-data="{field:'sign'}">签名</th><th lay-data="{field:'experience', sort: true}">积分</th><th lay-data="{field:'score', sort: true}">评分</th><th lay-data="{field:'classify'}">职业</th><th lay-data="{field:'wealth', sort: true}">财富</th></tr></thead>
</table>

转换静态表格

假设你的页面已经存在了一段有内容的表格，它由原始的table标签组成，这时你需要赋予它一些动态元素，比如拖拽调整列宽？比如排序等等？那么你同样可以很轻松地去实现。如下所示：

通过上面的小例子，你已经初步见识了这一功能的实际意义。尝试在你的静态表格的 th 标签中加上 lay-data="" 属性，代码如下：

<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><tr><td>贤心2</td><td>88</td><td>人生就像是一场修行b</td></tr><tr><td>贤心3</td><td>33</td><td>人生就像是一场修行c</td></tr></tbody>
</table>

然后执行用于转换表格的JS方法，就可以达到目的了：

var table = layui.table;//转换静态表格
table.init('demo', {height: 315 //设置高度,limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致//支持所有基础参数
});

在前面的“方法渲染”和“自动渲染”两种方式中，你的数据都来源于异步的接口，这可能并不利于所谓的seo（当然是针对于前台页面）。而在这里，你的数据已和页面同步输出，却仍然可以转换成动态表格，是否感受到一丝惬意呢？

基础参数一览表

基础参数并非所有都要出现，有必选也有可选，结合你的实际需求自由设定。基础参数一般出现在以下几种场景中：

场景一：下述方法中的键值即为基础参数项
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 模块所支持的全部参数一览表，我们对重点参数进行了的详细说明，你可以点击下述表格最右侧的“示例”去查看

cols - 表头参数一览表

相信我，在你还尚无法驾驭 layui table 的时候，你的所有焦点都应放在这里，它带引领你完成许多可见和不可见甚至你无法想象的工作。如果你采用的是方法渲染，cols 是一个二维数组，表头参数设定在数组内；如果你采用的自动渲染，表头参数的设定应放在 < th> 标签上

下面是一些方法渲染和自动渲染的配置方式：

//方法渲染：
table.render({cols:  [[ //标题栏{checkbox: true},{field: 'id', title: 'ID', width: 80},{field: 'username', title: '用户名', width: 120}]]
});它等价于自动渲染：
<table class="layui-table" lay-data="{基础参数}" lay-filter="test"><thead><tr><th lay-data="{checkbox:true}"></th><th lay-data="{field:'id', width:80}">ID</th><th lay-data="{field:'username', width:180}">用户名</th></tr></thead>
</table>

以下是一个二级表头的例子：

JS：
table.render({cols:  [[ //标题栏{field: 'username', title: '联系人', width: 80, rowspan: 2} //rowspan即纵向跨越的单元格数,{field: 'amount', title: '金额', width: 80, rowspan: 2},{align: 'center', title: '地址', colspan: 3} //colspan即横跨的单元格数，这种情况下不用设置field和width], [{field: 'province', title: '省', width: 80},{field: 'city', title: '市', width: 120},{field: 'county', title: '详细', width: 300}]]
});它等价于：
<table class="layui-table" lay-data="{基础参数}"><thead><tr><th lay-data="{field:'username', width:80}" rowspan="2">联系人</th><th lay-data="{field:'amount', width:120}" rowspan="2">金额</th><th lay-data="{align:'center'}" colspan="3">地址</th></tr><tr><th lay-data="{field:'province', width:80}">省</th><th lay-data="{field:'city', width:120}">市</th><th lay-data="{field:'county', width:300}">详细</th></tr></thead>
</table>

需要说明的是，table 组件支持无限极表头，你可按照上述的方式继续扩充。核心点在于 rowspan 和 colspan 两个参数的使用。

templet - 自定义列模板

类型：String，默认值：无

在默认情况下，单元格的内容是完全按照数据接口返回的content原样输出的，如果你想对某列的单元格添加链接等其它元素，你可以借助该参数来轻松实现。这是一个非常实用且强大的功能，你的表格内容会因此而丰富多样。

templet 提供了三种使用方式，请结合实际场景选择最合适的一种：
如果自定义模版的字符量太大，我们推荐你采用【方式一】；
如果自定义模板的字符量适中，或者想更方便地调用外部方法，我们推荐你采用【方式二】；
如果自定义模板的字符量很小，我们推荐你采用【方式三】

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

table.render({cols: [[{field:'title', title: '文章标题', width: 200, templet: '#titleTpl'} //这里的templet值是模板元素的选择器,{field:'id', title:'ID', width:100}]]
});等价于：
<th lay-data="{field:'title', width: 200, templet: '#titleTpl'}">文章标题</th>
<th lay-data="{field:'id', width:100}">ID</th>

下述是templet对应的模板，它可以存放在页面的任意位置。模板遵循于 laytpl 语法，可读取到返回的所有数据

<script type="text/html" id="titleTpl"><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>
</script>注意：上述的 {{d.id}}、{{d.title}} 是动态内容，它对应数据接口返回的字段名。除此之外，你还可以读取到以下额外字段：序号：{{ d.LAY_INDEX }} 当前列的表头信息：{{ d.LAY_COL }} （layui 2.6.8 新增）由于模板遵循 laytpl 语法（建议细读 laytpl文档 ），因此在模板中你可以写任意脚本语句（如 if else/for等）：
<script type="text/html" id="titleTpl">{{#  if(d.id < 100){ }}<a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a>{{#  } else { }}{{d.title}}(普通用户){{#  } }}
</script>

方式二：函数转义。templet 若未函数，则返回一个参数 d（包含当前行数据及特定的额外字段）。如下所示：

table.render({cols: [[{field:'title', title: '文章标题', width: 200,templet: function(d){console.log(d.LAY_INDEX); //得到序号。一般不常用console.log(d.LAY_COL); //得到当前列表头配置信息（layui 2.6.8 新增）。一般不常用//得到当前行数据，并拼接成自定义模板return 'ID：'+ d.id +'，标题：<span style="color: #c00;">'+ d.title +'</span>'}},{field:'id', title:'ID', width:100}]]
});

方式三：直接赋值模版字符。事实上，templet 也可以直接是一段 html 内容，如：

templet: '<div><a href="/detail/{{d.id}}" class="layui-table-link">{{d.title}}</a></div>'注意：这里一定要被一层 <div></div> 包裹，否则无法读取到模板

toolbar - 绑定工具条模板

类型：String，默认值：无

通常你需要在表格的每一行加上查看、编辑、删除这样类似的操作按钮，而 tool 参数就是为此而生，你因此可以非常便捷地实现各种操作功能。tool 参数和 templet 参数的使用方式完全类似，通常接受的是一个选择器，也可以是一段HTML字符。

table.render({cols: [[{field:'id', title:'ID', width:100},{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器]]
});等价于：
<th lay-data="{field:'id', width:100}">ID</th>
<th lay-data="{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'}"></th>

下述是 toolbar 对应的模板，它可以存放在页面的任意位置：

<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><!-- 这里同样支持 laytpl 语法，如： -->{{#  if(d.auth > 2){ }}<a class="layui-btn layui-btn-xs" lay-event="check">审核</a>{{#  } }}
</script>注意：属性 lay-event="" 是模板的关键所在，值可随意定义。

接下来我们可以借助 table模块的工具条事件，完成不同的操作功能：

//工具条事件
table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"var data = obj.data; //获得当前行数据var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）if(layEvent === 'detail'){ //查看//do somehing} else if(layEvent === 'del'){ //删除layer.confirm('真的删除行么', function(index){obj.del(); //删除对应行（tr）的DOM结构，并更新缓存layer.close(index);//向服务端发送删除指令});} else if(layEvent === 'edit'){ //编辑//do something//同步更新缓存对应的值obj.update({username: '123',title: 'xxx'});} else if(layEvent === 'LAYTABLE_TIPS'){layer.alert('Hi，头部工具栏扩展的右侧图标。');}
});

异步数据参数

数据的异步请求由以下几个参数组成：

注意：request 和 response 参数均为 layui 2.1.0 版本新增

调用示例：

//“方法级渲染”配置方式
table.render({ //其它参数在此省略url: '/api/data/'//where: {token: 'sasasas', id: 123} //如果无需传递额外参数，可不加该参数//method: 'post' //如果无需自定义HTTP类型，可不加该参数//request: {} //如果无需自定义请求参数，可不加该参数//response: {} //如果无需自定义数据响应名称，可不加该参数
}); 等价于（“自动化渲染”配置方式）
<table class="layui-table" lay-data="{url:'/api/data/'}" lay-filter="test"> …… </table>

done - 数据渲染完的回调

类型：Function，默认值：无

无论是异步请求数据，还是直接赋值数据，都会触发该回调。你可以利用该回调做一些表格以外元素的渲染。

table.render({ //其它参数在此省略done: function(res, curr, count){//如果是异步请求数据方式，res即为你接口返回的信息。//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度console.log(res);//得到当前页码console.log(curr); //得到数据总量console.log(count);}
});

defaultToolbar - 头部工具栏右侧图标

类型：Array，默认值：[“filter”,“exports”,“print”]

该参数可自由配置头部工具栏右侧的图标按钮，值为一个数组，支持以下可选值：
filter: 显示筛选图标
exports: 显示导出图标
print: 显示打印图标

可根据值的顺序显示排版图标，如：defaultToolbar: ['filter', 'print', 'exports']

另外你还可以无限扩展图标按钮（layui 2.5.5 新增）：

table.render({ //其它参数在此省略defaultToolbar: ['filter', 'print', 'exports', {title: '提示' //标题,layEvent: 'LAYTABLE_TIPS' //事件名，用于 toolbar 事件中使用,icon: 'layui-icon-tips' //图标类名}]
});

扩展的图标可通过 toolbar 事件回调（详见行工具事件），其中 layEvent 的值会在事件的回调参数中返回，以便区分不同的触发动作。

text - 自定义文本

类型：Object

table 模块会内置一些默认的文本信息，如果想修改，你可以设置以下参数达到目的。

table.render({ //其它参数在此省略text: {none: '暂无相关数据' //默认：无数据。}
});

initSort - 初始排序

类型：Object，默认值：无

用于在数据表格渲染完毕时，默认按某个字段排序。注：该参数为 layui 2.1.1 新增

//“方法级渲染”配置方式
table.render({ //其它参数在此省略initSort: {field: 'id' //排序字段，对应 cols 设定的各字段名,type: 'desc' //排序方式  asc: 升序、desc: 降序、null: 默认排序}
});等价于（“自动化渲染”配置方式）
<table class="layui-table" lay-data="{initSort:{field:'id', type:'desc'}}" lay-filter="test"> …… </table>

height - 设定容器高度

类型：Number/String，可选值如下：

示例：

//“方法级渲染”配置方式
table.render({ //其它参数在此省略height: 315 //固定值
});
table.render({ //其它参数在此省略height: 'full-20' //高度最大化减去差值
}); 等价于（“自动化渲染”配置方式）
<table class="layui-table" lay-data="{height:315}" lay-filter="test"> …… </table>
<table class="layui-table" lay-data="{height:'full-20'}" lay-filter="test"> …… </table>

设定表格外观

控制表格外观的主要由以下参数组成：

//“方法级渲染”配置方式
table.render({ //其它参数在此省略skin: 'line' //行边框风格,even: true //开启隔行背景,size: 'sm' //小尺寸的表格
}); 等价于（“自动化渲染”配置方式）
<table class="layui-table" lay-data="{skin:'line', even:true, size:'sm'}" lay-filter="test"> …… </table>

基础方法

基础用法是table模块的关键组成部分，目前所开放的所有方法如下：

> table.set(options); //设定全局默认参数。options即各项基础参数
> table.on('event(filter)', callback); //事件。event为内置事件名（详见下文），filter为容器lay-filter设定的值
> table.init(filter, options); //filter为容器lay-filter设定的值，options即各项基础参数。例子见：转换静态表格
> table.checkStatus(id); //获取表格选中行（下文会有详细介绍）。id 即为 id 参数对应的值
> table.render(options); //用于表格方法级渲染，核心方法。应该不用再过多解释了，详见：方法级渲染
> table.reload(id, options, deep); //表格重载
> table.resize(id); //重置表格尺寸
> table.exportFile(id, data, type); //导出数据
> table.getData(id); //用于获取表格当前页的所有行数据（layui 2.6.0 开始新增）

获取选中行

该方法可获取到表格所有的选中行相关数据
语法：table.checkStatus(‘ID’)，其中 ID 为基础参数 id 对应的值（见：设定容器唯一ID），如：
渲染方式

【自动化渲染】
<table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>【方法渲染】
table.render({ //其它参数省略id: 'idTest'
});

调用

var checkStatus = table.checkStatus('idTest'); //idTest 即为基础参数 id 对应的值console.log(checkStatus.data) //获取选中行的数据
console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件
console.log(checkStatus.isAll ) //表格是否全选

重置表格尺寸

该方法可重置表格尺寸和结构，其内部完成了：固定列高度平铺、动态分配列宽、容器滚动条宽高补丁等操作。它一般用于特殊情况下（如“非窗口 resize”导致的表格父容器宽度变化而引发的列宽适配异常），以保证表格在此类特殊情况下依旧能友好展示。

语法：table.resize(‘ID’)，其中 ID 为基础参数 id 对应的值（见：设定容器唯一ID），如：

table.render({ //其它参数省略,elem: '#demo'//,…… //其它参数,id: 'idTest'
});//执行表格“尺寸结构”的重置，一般写在对应的事件中
table.resize('idTest');

表格重载

很多时候，你需要对表格进行重载。比如数据全局搜索。以下方法可以帮你轻松实现这类需求（可任选一种）。


请注意：如果你在 2.6.0 之前版本已经习惯深度重载模式的，现在请在第三个参数中，加上 true，如：
table.reload(ID, options, true); //这样就跟 v2.5.7 及之前版本处理机制完全一样。或者您也可以像下面这样做：

//由于 2.6.0 之前的版本是采用深重载，
//所以如果您之前真实采用了深重载机制，那么建议将以下代码放入您的全局位置，从而可对老项目起到兼容作用
var tableReload = table.reload;
table.reload = function(){var args = [];layui.each(arguments, function(index, item){args.push(item);});args[2] === undefined && (args[2] = true);return tableReload.apply(null, args);
};
//但如果你之前没有采用深重载机制，也可以不放。不放甚至可以解决你之前因为多次 reload 而带来的各种参数重叠问题

重载示例：
示例1：自动化渲染的重载

【HTML】
<table class="layui-table" lay-data="{id: 'idTest'}"> …… </table>【JS】
table.reload('idTest', {url: '/api/table/search',where: {} //设定异步数据接口的额外参数//,height: 300
});

示例2：方法级渲染的重载

//所获得的 tableIns 即为当前容器的实例
var tableIns = table.render({elem: '#id',cols: [] //设置表头,url: '/api/data' //设置异步接口,id: 'idTest'
}); //这里以搜索为例
tableIns.reload({where: { //设定异步数据接口的额外参数，任意设aaaaaa: 'xxx',bbb: 'yyy'//…},page: {curr: 1 //重新从第 1 页开始}
});
//上述方法等价于
table.reload('idTest', {where: { //设定异步数据接口的额外参数，任意设aaaaaa: 'xxx',bbb: 'yyy'//…},page: {curr: 1 //重新从第 1 页开始}
}); //只重载数据

注意：这里的表格重载是指对表格重新进行渲染，包括数据请求和基础参数的读取

导出任意数据

尽管 table 的工具栏内置了数据导出按钮，但有时你可能需要通过方法去导出任意数据，那么可以借助以下方法：
语法：table.exportFile(id, data, type)

var ins1 = table.render({elem: '#demo',id: 'test'//,…… //其它参数
})      //将上述表格示例导出为 csv 文件
table.exportFile(ins1.config.id, data); //data 为该实例中的任意数量的数据

事实上，该方法也可以不用依赖 table 的实例，可直接导出任意数据：

table.exportFile(['名字','性别','年龄'], [['张三','男','20'],['李四','女','18'],['王五','女','19']
], 'csv'); //默认导出 csv，也可以为：xls

事件

语法：table.on(‘event(filter)’, callback);
注：event 为内置事件名，filter 为容器 lay-filter 设定的值
目前所支持的所有事件见下文

默认情况下，事件所触发的是全部的table模块容器，但如果你只想触发某一个容器，使用事件过滤器即可。
假设原始容器为：

那么你的事件写法如下：

//以复选框事件为例
table.on('checkbox(test)', function(obj){console.log(obj)
});

触发头部工具栏事件

点击头部工具栏区域设定了属性为 lay-event="" 的元素时触发（该事件为 layui 2.4.0 开始新增）。如：

原始容器
<table id="demo" lay-filter="test"></table>工具栏模板：
<script type="text/html" id="toolbarDemo"><div class="layui-btn-container"><button class="layui-btn layui-btn-sm" lay-event="add">添加</button><button class="layui-btn layui-btn-sm" lay-event="delete">删除</button><button class="layui-btn layui-btn-sm" lay-event="update">编辑</button></div>
</script><script;>
//JS 调用：
table.render({elem: '#demo',toolbar: '#toolbarDemo'//,…… //其他参数
});//触发事件
table.on('toolbar(test)', function(obj){var checkStatus = table.checkStatus(obj.config.id);switch(obj.event){case 'add':layer.msg('添加');break;case 'delete':layer.msg('删除');break;case 'update':layer.msg('编辑');break;};
});
</script>

触发复选框选择

点击复选框时触发，回调函数返回一个 object 参数：

table.on('checkbox(test)', function(obj){console.log(obj); //当前行的一些常用操作集合console.log(obj.checked); //当前是否选中状态console.log(obj.data); //选中行的相关数据console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
});

触发单选框选择

点击表格单选框时触发，回调函数返回一个 object 参数，携带的成员如下：

table.on('radio(test)', function(obj){ //test 是 table 标签对应的 lay-filter 属性console.log(obj); //当前行的一些常用操作集合console.log(obj.checked); //当前是否选中状态console.log(obj.data); //选中行的相关数据
});

触发单元格编辑

单元格被编辑，且值发生改变时触发，回调函数返回一个object参数，携带的成员如下：

table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"console.log(obj.value); //得到修改后的值console.log(obj.field); //当前编辑的字段名console.log(obj.data); //所在行的所有相关数据
});

触发行单双击事件

点击或双击行时触发。该事件为 layui 2.4.0 开始新增

//触发行单击事件
table.on('row(test)', function(obj){console.log(obj.tr) //得到当前行元素对象console.log(obj.data) //得到当前行数据//obj.del(); //删除当前行//obj.update(fields) //修改当前行数据
});//触发行双击事件
table.on('rowDouble(test)', function(obj){//obj 同上
});

触发行中工具条点击事件

具体用法见：绑定工具条

触发排序切换

点击表头排序时触发，它通用在基础参数中设置 autoSort: false 时使用，以完成服务端的排序，而不是默认的前端排序。该事件的回调函数返回一个 object 参数，携带的成员如下：

//禁用前端自动排序，以便由服务端直接返回排序好的数据
table.render({elem: '#id',autoSort: false //禁用前端自动排序。注意：该参数为 layui 2.4.4 新增//,… //其它参数省略
});//触发排序事件
table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"console.log(obj.field); //当前排序的字段名console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）console.log(this); //当前排序的 th 对象//尽管我们的 table 自带排序功能，但并没有请求服务端。//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：table.reload('idTest', {initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）field: obj.field //排序字段,order: obj.type //排序方式}});layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
});

结语

table 模块自推出以来，因某些功能的缺失，一度饱受非议，也背负了各种莫须有的锅，然而我始终未曾放弃对它的优化。为了迎合 layui 开箱即用的理念，我的工作并不是那么轻松。无论是从代码，还是文档和示例的撰写上，我都进行了多次调整，为的只是它能被更多人认可。——贤心

表单

表单模块文档 - layui.form

我们通常会在最常用的模块上耗费更多的精力，用尽可能简单的方式诠释 layui 所带来的便捷性。显而易见，form 是我们非常看重的一块。于是它试图用一贯极简的姿态，去捕获你对它的深深青睐。寄托在原始表单元素上的属性设定，及其全自动的初始渲染，和基于事件驱动的接口书写方式，会让你觉得，传统模式下的组件调用形式，也可以是那样的优雅、简单。然而文字的陈述始终是苍白的，所以用行动慢慢感受 layui.form 给你的项目带来的效率提升吧。

模块加载名称：form

使用

layui 针对各种表单元素做了较为全面的UI支持，你无需去书写那些 UI 结构，你只需要写 HTML 原始的 input、select、textarea 这些基本的标签即可。我们在 UI 上的渲染只要求一点，你必须给表单体系所在的父元素加上class=“layui-form”，一切的工作都会在你加载完form模块后，自动完成。如下是一个最基本的例子：
layui.form小例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui.form小例子</title>
<link rel="stylesheet" href="layui.css" media="all">
</head>
<body>
<form class="layui-form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 --><div class="layui-form-item"><label class="layui-form-label">输入框</label><div class="layui-input-block"><input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">下拉选择框</label><div class="layui-input-block"><select name="interest" lay-filter="aihao"><option value="0">写作</option><option value="1">阅读</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="阅读"></div></div><div class="layui-form-item"><label class="layui-form-label">开关关</label><div class="layui-input-block"><input type="checkbox" lay-skin="switch"></div></div><div class="layui-form-item"><label class="layui-form-label">开关开</label><div class="layui-input-block"><input type="checkbox" checked 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="0" title="男"><input type="radio" name="sex" value="1" title="女" checked></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">请填写描述</label><div class="layui-input-block"><textarea 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="*">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div><!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<script src="layui.js"></script>
<script>
layui.use('form', function(){var form = layui.form;//各种基于事件的操作，下面会有进一步介绍
});
</script>
</body>
</html>

正如你上述看到的，你必须放入 layui 所规范的元素结构，form 模块才会对其进行重置渲染。值得注意的是，在具体的每一块表单元素中，你仍是像往日一样写 input 等标签即可。另外，我们对我们所规范的结构进行了响应式的支持，而针对一些不同的表单排版，比如行内表单，你也只需要设定我们所定义好的 class 即可。关于这一块，你可以移步页面元素的表单文档中做详细了解。而事实上你的大部分焦点可能也在那里，但当前这篇文档主要还是介绍 form 整体模块。

更新渲染

有些时候，你的有些表单元素可能是动态插入的。这时 form 模块的自动化渲染是会对其失效的。虽然我们没有双向绑定机制（因为我们叫经典模块化框架，偷笑.gif）但没有关系，你只需要执行 form.render(type, filter); 方法即可。

第一个参数：type，为表单的 type 类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表：

例子

form.render(); //更新全部
form.render('select'); //刷新select选择框渲染
//……

第二个参数：filter，为 class=“layui-form” 所在元素的 lay-filter="" 的值。你可以借助该参数，对表单完成局部更新。

【HTML】
<div class="layui-form" lay-filter="test1">…
</div><div class="layui-form" lay-filter="test2">…
</div>【JavaScript】
form.render(null, 'test1'); //更新 lay-filter="test1" 所在容器内的全部表单状态
form.render('select', 'test2'); //更新 lay-filter="test2" 所在容器内的全部 select 状态
//……

预设元素属性

事实上在使用表单时，你的一半精力可能会在元素本身上。所以我们把一些基础属性的配置恰恰安放在了标签本身上。如：

<input type="text" lay-verify="email">
<input type="checkbox" checked lay-skin="switch" lay-filter="encrypt" title="是否加密">
<button lay-submit>提交</button>

上述的lay-verify、lay-skin、lay-filter、lay-submit神马的都是我们所说的预设的元素属性，他们可以使得一些交互操作交由form模块内部、或者你来借助form提供的JS接口精确控制。目前我们可支持的属性如下表所示：

事件触发

语法：form.on(‘event(过滤器值)’, callback);

form模块在 layui 事件机制中注册了专属事件，所以当你使用layui.onevent()自定义模块事件时，请勿占用form名。form支持的事件如下：

默认情况下，事件所触发的是全部的form模块元素，但如果你只想触发某一个元素，使用事件过滤器即可。
如：< select lay-filter=“test”></ select>

form.on('select(test)', function(data){console.log(data);
});

触发select选择

下拉选择框被选中时触发，回调函数返回一个object参数，携带两个成员：
语法

form.on('select(filter)', function(data){console.log(data.elem); //得到select原始DOM对象console.log(data.value); //得到被选中的值console.log(data.othis); //得到美化后的DOM对象
});

请注意：如果你想触发所有的select，去掉过滤器(filter)即可。下面将不再对此进行备注

触发checkbox复选

复选框点击勾选时触发，回调函数返回一个object参数，携带两个成员：

form.on('checkbox(filter)', function(data){console.log(data.elem); //得到checkbox原始DOM对象console.log(data.elem.checked); //是否被选中，true或者falseconsole.log(data.value); //复选框value值，也可以通过data.elem.value得到console.log(data.othis); //得到美化后的DOM对象
});

触发switch开关

开关被点击时触发，回调函数返回一个object参数，携带两个成员：

form.on('switch(filter)', function(data){console.log(data.elem); //得到checkbox原始DOM对象console.log(data.elem.checked); //开关是否开启，true或者falseconsole.log(data.value); //开关value值，也可以通过data.elem.value得到console.log(data.othis); //得到美化后的DOM对象
});

触发radio单选

radio单选框被点击时触发，回调函数返回一个object参数，携带两个成员：
语法

form.on('radio(filter)', function(data){console.log(data.elem); //得到radio原始DOM对象console.log(data.value); //被点击的radio的value值
});

触发submit提交

按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员：
语法

form.on('submit(*)', function(data){console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

再次温馨提示：上述的submit(*)中的 * 号为事件过滤器的值，是在你绑定执行提交的元素时设定的，如：

<button lay-submit lay-filter="*">提交</button>

你可以把*号换成任意的值，如：lay-filter=“go”，但触发事件时也要改成 form.on(‘submit(go)’, callback);

表单赋值 / 取值

语法：form.val(‘filter’, object);

用于给指定表单集合的元素赋值和取值。如果 object 参数存在，则为赋值；如果 object 参数不存在，则为取值。
注：其中「取值」功能为 layui 2.5.5 开始新增

//给表单赋值
form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值"username": "贤心" // "name": "value","sex": "女","auth": 3,"check[write]": true,"open": false,"desc": "我爱layui"
});//获取表单区域所有值
var data1 = form.val("formTest");

第二个参数中的键值是表单元素对应的 name 和 value。

表单验证

我们对表单的验证进行了非常巧妙的支持，大多数时候你只需要在表单元素上加上 lay-verify="" 属性值即可。如：

<input type="text" lay-verify="email"> 还同时支持多条规则的验证，如下：
<input type="text" lay-verify="required|phone|number">

上述对输入框定义了一个邮箱规则的校验，它会在 form 模块内部完成。目前我们内置的校验支持见上文的：预设元素属性

除了内置的校验规则外，你还可以自定义验证规则，通常对于比较复杂的校验，这是非常有必要的。

form.verify({username: function(value, item){ //value：表单的值、item：表单的DOM对象if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){return '用户名不能有特殊字符';}if(/(^\_)|(\__)|(\_+$)/.test(value)){return '用户名首尾不能出现下划线\'_\'';}if(/^\d+\d+\d$/.test(value)){return '用户名不能全为数字';}//如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）if(value === 'xxx'){alert('用户名不能为敏感词');return true;}}//我们既支持上述函数式的方式，也支持下述数组的形式//数组的两个值分别代表：[正则匹配、匹配不符时的提示文字],pass: [/^[\S]{6,12}$/,'密码必须6到12位，且不能出现空格']
});

当你自定义了类似上面的验证规则后，你只需要把 key 赋值给输入框的 lay-verify 属性即可：

<input type="text" lay-verify="username" placeholder="请输入用户名">
<input type="password" lay-verify="pass" placeholder="请输入密码">

再次温馨提示一下

针对一些不同的表单排版，比如行内表单、整体表单风格、按钮风格等等，请移步到文档导航【页面元素】下的指定分类即可

文件上传

图片/文件上传 - layui.upload

上传模块自 layui 2.0 的版本开始，进行了全面重写，这使得它不再那么单一，它所包含的不仅是更为强劲的功能，还有灵活的 UI。任何元素都可以作为上传组件来调用，譬如按钮、图片、普通的 DIV 等等，而不再是一个单调的 file 文件域。

模块加载名称：upload

快速使用

一切从小试牛刀开始。通常情况下，我们上传文件是借助 type=“file” 的 input 标签来完成的，但非常遗憾的是，它不能很好地与其它表单元素并存，所以我们常常要单独为它做一个业务层面的“异步上传”，即先让图片上传，再和其它表单一起提交保存。下面是一个小示例：

这原本只是一个普通的 button，正是 upload 模块赋予了它“文件选择”的特殊技能。当然，你还可以随意定制它的样式，而不是只局限于按钮。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>upload模块快速使用</title><link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body><button type="button" class="layui-btn" id="test1"><i class="layui-icon">&#xe67c;</i>上传图片
</button><script src="/static/build/layui.js"></script>
<script>
layui.use('upload', function(){var upload = layui.upload;//执行实例var uploadInst = upload.render({elem: '#test1' //绑定元素,url: '/upload/' //上传接口,done: function(res){//上传完毕回调},error: function(){//请求异常回调}});
});
</script>
</body>
</html>

一切看起来是那样的简单，乃至于我不得不凑一段文字来填充这一行的版面。这样好像与下文衔接起来会比较谐调的样子（自我感觉）

核心方法与基础参数选项

使用 upload 模块必须与 upload.render(options) 方法打交道，其中的 options即为基础参数，它是一个对象。

var upload = layui.upload; //得到 upload 对象//创建一个上传组件
upload.render({elem: '#id',url: '',done: function(res, index, upload){ //上传后的回调} //,accept: 'file' //允许上传的文件类型//,size: 50 //最大允许上传的文件大小//,……
})

从 layui 2.1.0 开始，允许你直接在元素上设定基础参数，如：

【HTML】
<button class="layui-btn test" lay-data="{url: '/a/'}">上传图片</button>
<button class="layui-btn test" lay-data="{url: '/b/', accept: 'file'}">上传文件</button>【JS】
upload.render({elem: '.test',done: function(res, index, upload){//获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增var item = this.item;}
})

更多支持的参数详见下表，合理的配置它们，应对各式各样的业务需求。

上传接口

设定一个 URL 地址给 url 参数，用来告诉 upload 模块的服务端上传接口。像你平时使用Ajax一样。如：

upload.render({elem: '#id',url: '/api/upload/' //必填项,method: ''  //可选项。HTTP类型，默认post,data: {} //可选项。额外的参数，如：{id: 123, abc: 'xxx'}
});

该接口返回的相应信息（response）必须是一个标准的 JSON 格式，如：
response

{"code": 0,"msg": "","data": {"src": "http://cdn.layui.com/123.jpg"}
}

注意1：你不一定非得按照上述格式返回，只要是合法的 JSON 字符即可。其响应信息会转化成JS对象传递给 done 回调。
注意2：如果上传后，出现文件下载框（一般为ie下），那么你需要在服务端对response的header设置 Content-Type: text/html

选择文件的回调

在文件被选择后触发，该回调会在 before 回调之前。一般用于非自动上传（即 auto: false ）的场景，比如预览图片等。

upload.render({elem: '#id',url: '/api/upload/',auto: false //选择文件后不自动上传,bindAction: '#testListAction' //指向一个按钮触发上传,choose: function(obj){//将每次选择的文件追加到文件队列var files = obj.pushFile();//预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)obj.preview(function(index, file, result){console.log(index); //得到文件索引console.log(file); //得到文件对象console.log(result); //得到文件base64编码，比如图片//obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增//这里还可以做一些 append 文件列表 DOM 的操作//obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用//delete files[index]; //删除列表中对应的文件，一般在某个事件中使用});}
});

事实上这是一个非常实用的存在，可轻松应对复杂的列表文件上传管理。具体可移步到示例页面，里面有一个文件列表的小例子。

文件上传前的回调

在 choose 回调之后、done/error 回调之前触发。返回的参数完全类似 choose 回调。一般用于上传完毕前的loading、图片预览等。

upload.render({elem: '#id',url: '/api/upload/',before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。layer.load(); //上传loading},done: function(res, index, upload){layer.closeAll('loading'); //关闭loading},error: function(index, upload){layer.closeAll('loading'); //关闭loading}
});

上传接口请求成功的回调

在上传接口请求完毕后触发，但文件不一定是上传成功的，只是接口的响应状态正常（200）。回调返回三个参数，分别为：服务端响应信息、当前文件的索引、重新上传的方法

upload.render({elem: '#id',url: '/api/upload/',done: function(res, index, upload){//假设code=0代表上传成功if(res.code == 0){//do something （比如将res返回的图片链接保存到表单的隐藏域）}//获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增var item = this.item;//文件保存失败//do something}
});

上传请求失败的回调

当请求上传时出现异常时触发（如网络异常、404/500等）。回调返回两个参数，分别为：当前文件的索引、重新上传的方法

upload.render({elem: '#id',url: '/api/upload/',error: function(index, upload){//当上传失败时，你可以生成一个“重新上传”的按钮，点击该按钮时，执行 upload() 方法即可实现重新上传}
});

多文件上传完毕后的状态回调

只有当开启多文件时（即 multiple: true），该回调才会被触发。回调返回一个 object 类型的参数，包含一些状态数据：

upload.render({elem: '#id',url: '/api/upload/',multiple: true,allDone: function(obj){ //当文件全部被提交后，才触发console.log(obj.total); //得到总文件数console.log(obj.successful); //请求成功的文件数console.log(obj.aborted); //请求失败的文件数},done: function(res, index, upload){ //每个文件提交一次触发一次。详见“请求成功的回调”}
});

文件上传进度的回调

在网速一般的情况下，大文件的上传通常需要一定时间的等待，而浏览器并不会醒目地告知你它正在努力地上传中，此时为了提升用户体验，我们可以通过该回调制作一个进度条。注：该回调为 layui 2.5.5 新增

upload.render({elem: '#id',url: '/api/upload/',progress: function(n, elem, res, index){var percent = n + '%' //获取进度百分比element.progress('demo', percent); //可配合 layui 进度条元素使用console.log(elem); //得到当前触发的元素 DOM 对象。可通过该元素定义的属性值匹配到对应的进度条。console.log(res); //得到 progress 响应信息console.log(index); //得到当前上传文件的索引，多文件上传时的进度条控制，如：element.progress('demo-'+ index, n + '%'); //进度条}
});

重载实例

有时你可能需要对 upload.render() 实例进行重载，通过改变一些参数（如将上传文件重置为只上传图片等场景）来重置功能。如:

//创建一个实例
var uploadInst = upload.render({elem: '#id',url: '/api/upload/',size: 1024*5 //限定大小
});//重载该实例，支持重载全部基础参数
uploadInst.reload({accept: 'images' //只允许上传图片,acceptMime: 'image/*' //只筛选图片,size: 1024*2 //限定大小
});

注意：该方法为 layui 2.5.0 开始新增

重新上传

在执行 upload.render(options) 方法时，其实有返回一个实例对象，以便对完成重新上传等操作。注意：这是对当前上传队列的全局重新上传，而 choose 回调返回的 obj.upload(index, file) 方法则是对单个文件进行重新上传。如：

var uploadInst = upload.render({elem: '#id',url: '/api/upload/',choose: function(obj){obj.preview(function(index, file, result){//对上传失败的单个文件重新上传，一般在某个事件中使用//obj.upload(index, file);});}
});//重新上传的方法，一般在某个事件中使用
//uploadInst.upload();

跨域上传

有些时候，可能会涉及到文件跨域操作，过去版本的 upload 模块最大的缺陷恰恰在于这里。而从 layui 2.0 的版本开始，我们已经对跨域做了支持。但鉴于代码的冗余度等多方面考虑，在IE9以下版本环境中，仍然不支持跨域。其它所有版本的IE和Chrome/FireFox等高级浏览器均支持。

那么，需要你怎么做？通常来说，是借助 CORS（跨资源共享）方案，即对接口所在的服务器设置：Access-Control-Allow-Origin 详见Google，配置起来还是挺简单的。而至于域名限制，一般是服务端程序中去做处理。这里不做过多赘述。

下拉菜单

下拉菜单组件文档 - layui.dropdown

dropdown 是基于 layui「基础菜单」结构衍生的多功能通用下拉菜单组件，它将原本静态呈现的菜单，通过各种事件的形式触发，从而以独立面板的形式弹出。不仅可用作常见的「下拉菜单」，更可用于「右键菜单」来实现更多的交互可能。

模块加载名称：dropdown

快速使用

演示效果

代码

<button class="layui-btn" id="demo1">下拉菜单<i class="layui-icon layui-icon-down layui-font-12"></i>
</button><script>
layui.use('dropdown', function(){var dropdown = layui.dropdowndropdown.render({elem: '#demo1' //可绑定在任意元素中，此处以上述按钮为例,data: [{title: 'menu item 1',id: 100,href: '#'},{title: 'menu item 2',id: 101,href: 'https://www.layui.com/' //开启超链接,target: '_blank' //新窗口方式打开},{type: '-'},{title: 'menu item 3',id: 102,type: 'group'  //菜单类型，支持：normal/group/parent/-,child: [{title: 'menu item 3-1',id: 103},{title: 'menu item 3-2',id: 104,child: [{title: 'menu item 3-2-1',id: 105},{title: 'menu item 3-2-2',id: 106}]},{title: 'menu item 3-3',id: 107}]},{type: '-'},{title: 'menu item 4',id: 108},{title: 'menu item 5',id: 109,child: [{title: 'menu item 5-1',id: 11111,child: [{title: 'menu item 5-1-1',id: 2111},{title: 'menu item 5-1-2',id: 3111}]},{title: 'menu item 5-2',id: 52}]},{type:'-'},{title: 'menu item 6',id: 6,type: 'group',isSpreadItem: false,child: [{title: 'menu item 6-1',id: 61},{title: 'menu item 6-2',id: 62}]}],id: 'demo1'//菜单被点击的事件,click: function(obj){console.log(obj);layer.msg('回调返回的参数已显示再控制台');}});
});
</script>

菜单列表核心的数据来自于 data 参数，详细可参加目录「菜单列参数」

基础参数

即核心方法 dropdown.render(options) 中的 options 对应的参数：

菜单项参数

即上述基础参数 data 对应的参数，格式为：data: [{title: ‘menu item 1’, id: 1}, {}, {}]

菜单项被点击的回调

演示效果

代码

<table class="layui-table">   <tbody><tr><td>列表 1</td><td><button class="layui-btn layui-btn-sm demolist" data-id="111">更多操作</button></td></tr><tr><td>列表 2</td><td><button class="layui-btn layui-btn-sm demolist" data-id="222">更多操作</button></td></tr><tr><td>列表 3</td><td><button class="layui-btn layui-btn-sm demolist" data-id="333">更多操作</button></td></tr></tbody>
</table>
<script>
layui.use('dropdown', function(){var dropdown = layui.dropdown,$ = layui.jquery;dropdown.render({elem: '.demolist',data: [{title: 'item 1',id: 'aaa'}, {title: 'item 2',id: 'bbb'}],click: function(data, othis){var elem = $(this.elem),listId = elem.data('id'); //表格列表的预埋数据layer.msg('得到表格列表的 id：'+ listId +'，下拉菜单 id：'+ data.id);}});
});
</script>

自定义菜单项模板

通过 templet 参数即可自定义菜单项模板，其字符将被 laytpl 组件所转义，因此可通过 undefined 的方式得到当前菜单配置的数据。

var dropdown = layui.dropdown;//执行菜单
dropdown.render({elem: '#id',data: [{title: '刷新'//当设定了模板时，菜单项将优先显示模板结构；否则将默认显示标题,templet: '<i class="layui-icon layui-icon-refresh"></i> {{d.title}}',id: 100},{title: 'menu item 2'//该模板由「图片+标题+徽章」组成,templet: '<img src="1.jpg" style="width: 16px;"> {{d.title}} <span class="layui-badge-dot"></span>',id: 101,href: 'https://www.layui.com/',target: '_blank'},{title: 'menu item 3' //未开启模板时，默认直接显示标题,id: 103}]
})

右键菜单

当参数设定为 trigger: 'contextmenu’时，即会在所绑定的元素中屏蔽默认的右键菜单，从而呈现 dropdown 组件配置的菜单。

var dropdown = layui.dropdown;//执行菜单
dropdown.render({elem: '#demo' //在 id="demo" 的元素中触发事件。也可以直接设置为 document，从而重置整个右键菜单,trigger: 'contextmenu' //右键事件,data: [{title: 'menu item 1',id: 1},{title: 'menu item 2',id: 'reload'},{type:'-'},{title: 'menu item 3',id: 3,child: [{title: 'menu item 3-1',id: 31},{title: 'menu item 3-2',id: 32},{title: 'menu item 3-3',id: 33}]},{type:'-'},{title: 'menu item 4',id: 111},{title: 'menu item 5',id: 555},{title: 'menu item 6',id: 666}]
});

结语

该组件使用非常灵活，且弹出的面板进行了坐标的科学判断（基于内部的 lay.js 模块），能始终吸附显示在最佳的位置。

穿梭框

穿梭框组件文档 - layui.transfer

穿梭框组件的初衷来源于 layui 社区的扩展组件平台，并且在 layui 2.5.0 的版本中开始登场。其适用的业务场景多样，不妨一试。

模块加载名称：transfer

快速使用

transfer 组件可以进行数据的交互筛选
layui.transfer小例子

<!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('transfer', function(){var transfer = layui.transfer;//渲染transfer.render({elem: '#test1'  //绑定元素,data: [{"value": "1", "title": "李白", "disabled": "", "checked": ""},{"value": "2", "title": "杜甫", "disabled": "", "checked": ""},{"value": "3", "title": "贤心", "disabled": "", "checked": ""}],id: 'demo1' //定义索引});});</script>
</body>
</html>

基础参数

目前 transfer 组件提供以下基础参数，可根据需要进行相应的设置

数据源格式

解析数据格式解析的回调函数，用于将任意数据格式解析成 transfer 组件规定的数据格式，以下是合法的数据格式如下：

合法的数据格式code
[{"value": "1", "title": "李白", "disabled": "", "checked": ""},{"value": "2", "title": "杜甫", "disabled": "", "checked": ""},{"value": "3", "title": "贤心", "disabled": "", "checked": ""}

然而很多时候你返回的数据格式可能并不符合规范，比如：

不符合规范的数据格式code
[{"id": "1", "name": "李白"},{"id": "2", "name": "杜甫"},{"id": "3", "name": "贤心"}

那么您需要将其解析成 transfer 组件所规定的数据格式：

transfer.render({elem: '#text1',data: [{"id": "1", "name": "李白"},{"id": "2", "name": "杜甫"},{"id": "3", "name": "贤心"}],parseData: function(res){return {"value": res.id //数据值,"title": res.name //数据标题,"disabled": res.disabled  //是否禁用,"checked": res.checked //是否选中}}
});

左右穿梭的回调

当数据在左右穿梭时触发，回调返回当前被穿梭的数据

例子code
transfer.render({elem: '#text',data: [] //数据源,onchange: function(data, index){console.log(data); //得到当前被穿梭的数据console.log(index); //如果数据来自左边，index 为 0，否则为 1}
});

基础方法

基础用法是组件关键组成部分，目前所开放的所有方法如下：

var transfer = layui.transfer;transfer.set(options); //设定全局默认参数。options 即各项基础参数
transfer.getData(id); //获得右侧数据
transfer.reload(id, options); //重载实例

获得右侧数据

穿梭框的右侧数据通常被认为是选中数据，因此你需要得到它并提交到后台。

例子code
transfer.render({elem: '#test',data: [],id: 'demo1' //定义索引
});//获得右侧数据
var getData = transfer.getData('demo1');

实例重载

重载一个已经创建的组件实例，被覆盖新的基础属性

例子code
transfer.render({elem: '#test',data: [],id: 'demo1' //定义索引
});//可以重载所有基础参数
transfer.reload('demo1', {title: ['新列表1', '新列表2']
});

结语

穿梭框组件极易上手，在浩瀚的业务需求中，值得一用。

树形组件

树形组件文档 - layui.tree

在一段漫长的雪藏后，我们在 layui 2.5.0 的版本中重新创作了 tree，以便它能够更加适用于绝大多数业务场景，而风格依然遵循 layui 独有的极简和清爽。需要提醒的是，如果您的项目中仍然采用了 layui 2.5 版本之前的 tree，它将不被兼容，请尽快修改为以下新的调用方式。

模块加载名称：tree

快速使用

通过 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>

基础参数

目前 tree 组件提供以下基础参数，可根据需要进行相应的设置

数据源属性选项

我们将 data 参数称之为数据源，其内部支持设定以下选项

节点被点击的回调

在节点被点击后触发，返回的参数如下：

例子code
tree.render({elem: '#test1',click: function(obj){console.log(obj.data); //得到当前点击的节点数据console.log(obj.state); //得到当前节点的展开状态：open、close、normalconsole.log(obj.elem); //得到当前节点元素console.log(obj.data.children); //当前节点下是否有子节点}
});

复选框被点击的回调

点击复选框时触发，返回的参数如下：

例子code
tree.render({elem: '#test1',oncheck: function(obj){console.log(obj.data); //得到当前点击的节点数据console.log(obj.checked); //得到当前节点的展开状态：open、close、normalconsole.log(obj.elem); //得到当前节点元素}
});

操作节点的回调

通过 operate 实现函数，对节点进行增删改等操作时，返回操作类型及操作节点

例子code
tree.render({elem: '#test1',operate: function(obj){var type = obj.type; //得到操作类型：add、edit、delvar data = obj.data; //得到当前节点的数据var elem = obj.elem; //得到当前节点元素//Ajax 操作var id = data.id; //得到节点索引if(type === 'add'){ //增加节点//返回 key 值return 123;} else if(type === 'update'){ //修改节点console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容} else if(type === 'del'){ //删除节点};}
});

返回选中的节点数据

很多时候 tree 可能不仅仅只是一个树菜单，它还用于各种权限控制等场景，这个时候你需要获得选中的节点。
语法：tree.getChecked(id)

例子code
tree.render({elem: '#test',data: [] //数据源,id: 'demoId' //定义索引
});//获得选中的节点
var checkData = tree.getChecked('demoId');

设置节点勾选

除了通过 checked 参数对节点进行初始勾选之外，你还可以通过方法动态对节点执行勾选
语法： tree.setChecked(id, checkedId)
参数 checkedId：代表的是数据源中的节点 id

例子code
tree.render({elem: '#test',data: [] //数据源,id: 'demoId' //定义索引
});//执行节点勾选
tree.setChecked('demoId', 1); //单个勾选 id 为 1 的节点
tree.setChecked('demoId', [2, 3]); //批量勾选 id 为 2、3 的节点

实例重载

重载一个已经创建的组件实例，被覆盖新的基础属性

例子code
tree.render({elem: '#test',data: [],id: 'demoId' //定义索引
});//可以重载所有基础参数
tree.reload('demoId', {//新的参数
});

结语

树组件还在持续完善。

颜色选择器

颜色选择器文档 - layui.colorpicker

在主题定制的应用场景中，自然离不开颜色的自定义。而你往往需要的是关于它的直观选择，于是 colorpicker 模块姗姗来迟，它支持 hex、rgb、rgba 三类色彩模式，在代码中简单的调用后，便可在你的网页系统中自由拖拽去选择你中意的颜色。

模块加载名称：colorpicker
注意：colorpicker 为 layui 2.4.0 新增模块，不支持 ie10 以下版本，其它高级浏览器均支持。

使用

colorpicker 是一款颜色选择器，如下是一个最基本的用法：

小例子code
<!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('colorpicker', function(){var colorpicker = layui.colorpicker;//渲染colorpicker.render({elem: '#test1'  //绑定元素});
});
</script>
</body>
</html>

基础参数

colorpicker 组件目前支持以下参数

预定义颜色

预定义颜色，可以被认为是提供的参考色，因此除了我们默认的预定义颜色之外，你还可以自己定义

小例子code
layui.use('colorpicker', function(){var colorpicker = layui.colorpicker;、colorpicker.render({elem: '#test1',predefine: true,colors: ['#F00','#0F0','#00F','rgb(255, 69, 0)','rgba(255, 69, 0, 0.5)']});
});

颜色被改变的回调

回调名：change
当颜色在选择器中发生选择改变时，会进入 change 回调，你可以通过它来进行所需操作，下面的例子就是实时的输出当前选择器的颜色

小例子code
layui.use('colorpicker', function(){var colorpicker = layui.colorpicker;colorpicker.render({elem: '#test1',change: function(color){console.log(color)}});
});

颜色选择后的回调

回调名：done
点击颜色选择器的“确认”和“清除”按钮，均会触发 done 回调，回调返回当前选择的色值。

小例子code
layui.use('colorpicker', function(){var colorpicker = layui.colorpicker;colorpicker.render({elem: '#test1',done: function(color){console.log(color)//譬如你可以在回调中把得到的 color 赋值给表单}});
});

结语

颜色选择器不仅仅是独立使用，它更多情况可能是跟表单结合使用。

常用元素

常用元素操作 - layui.element

页面中有许多元素需要自动去完成一些处理，譬如导航菜单的小滑块、Tab 的切换等操作，他们往往不需要去单独调用一个方法来开启一项功能，而页面上恰恰有太多这样的小交互，所以我们统一归类为 element 组件。

模块加载名称：element

使用

元素功能的开启只需要加载element模块即会自动完成，所以不用跟其它模块一样为某一个功能而调用一个方法。她只需要找到她支持的元素，如你的页面存在一个 Tab元素块，那么element模块会自动赋予她该有的功能。

HTMLcode
<div class="layui-tab" lay-filter="demo"><ul class="layui-tab-title"><li class="layui-this">网站设置</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>
</div>

前提是你要加载element模块

JavaScriptcode
layui.use('element', function(){var element = layui.element;//一些事件触发element.on('tab(demo)', function(data){console.log(data);});
});

预设元素属性

我们通过自定义元素属性来作为元素的功能参数，他们一般配置在容器外层，如：

<div class="layui-tab" lay-allowClose="true" lay-filter="demo">…</div>
<span class="layui-breadcrumb" lay-separator="|"></span>And So On

element 模块支持的元素如下表：

基础方法

基础方法允许你在外部主动对元素发起一起操作，目前element模块提供的方法如下：

更新渲染

跟表单元素一样，很多时候你的页面元素可能是动态生成的，这时element的相关功能将不会对其有效，你必须手工执行 element.init(type, filter) 方法即可。注意：2.1.6 开始，可以用 element.render(type, filter); 方法替代

第一个参数：type，为表单的type类型，可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表：

例子code
element.init(); //更新全部  2.1.6 可用 element.render() 方法替代
element.render('nav'); //重新对导航进行渲染。注：layui 2.1.6 版本新增
//……

第二个参数：filter，为元素的 lay-filter="" 的值。你可以借助该参数，完成指定元素的局部更新。

【HTML】
<div class="layui-nav" lay-filter="test1">…
</div><div class="layui-nav" lay-filter="test2">…
</div>【JavaScript】
//比如当你对导航动态插入了二级菜单，这时你需要重新去对它进行渲染
element.render('nav', 'test1'); //对 lay-filter="test1" 所在导航重新渲染。注：layui 2.1.6 版本新增
//……

事件触发

语法：element.on(‘event(过滤器值)’, callback);

element 模块在 layui 事件机制中注册了element 模块事件，所以当你使用 layui.onevent() 自定义模块事件时，请勿占用 element 名。目前 element 模块所支持的事件如下表：

默认情况下，事件所触发的是全部的元素，但如果你只想触发某一个元素，使用事件过滤器即可。
如：< div class=“layui-tab” lay-filter=“test”>< /div>

element.on('tab(test)', function(data){console.log(data);
});

触发选项卡切换

Tab选项卡点击切换时触发，回调函数返回一个object参数，携带两个成员：

element.on('tab(filter)', function(data){console.log(this); //当前Tab标题所在的原始DOM元素console.log(data.index); //得到当前Tab的所在下标console.log(data.elem); //得到当前的Tab大容器
});

触发选项卡删除

Tab选项卡被删除时触发，回调函数返回一个object参数，携带两个成员：

element.on('tabDelete(filter)', function(data){console.log(this); //当前Tab标题所在的原始DOM元素console.log(data.index); //得到当前Tab的所在下标console.log(data.elem); //得到当前的Tab大容器
});

注：该事件为 layui 2.1.6 新增

触发导航菜单的点击

当点击导航父级菜单和二级菜单时触发，回调函数返回所点击的菜单DOM对象：

element.on('nav(filter)', function(elem){console.log(elem); //得到当前点击的DOM对象
});

触发折叠面板

当折叠面板点击展开或收缩时触发，回调函数返回一个object参数，携带三个成员：

element.on('collapse(filter)', function(data){console.log(data.show); //得到当前面板的展开状态，true或者falseconsole.log(data.title); //得到当前点击面板的标题区域DOM对象console.log(data.content); //得到当前点击面板的内容区域DOM对象
});

动态操作进度条

你肯定不仅仅是满足于进度条的初始化显示，通常情况下你需要动态改变它的进度值，element模块提供了这样的基础方法：element.progress(filter, percent);。

例子code
<div class="layui-progress layui-progress-big" lay-filter="demo" lay-showPercent="true"><div class="layui-progress-bar" lay-percent="0%"></div>
</div>上述是一个已经设置了过滤器（lay-filter="demo"）的进度条
现在你只需要在某个事件或者语句中执行方法：element.progress('demo', '50%');
即可改变进度

结语

事实上元素模块的大部分操作都是内部自动完成的，所以目前你发现他的接口很少呢。当然，我们也会不断增加element模块所支持的页面元素。

滑块

滑块文档 - layui.slider

作为一个拖拽式的交互性组件，滑块往往能给产品带来更好的操作体验。layui 深以为然，slider 模块包含了你能想到的大部分功能，尽管它可以作为一个独立的个体，但很多时候它往往会出现 form 元素中，想象一下吧。

模块加载名称：slider
注意：slider 为 layui 2.4.0 新增模块

使用

通过对 slider 模块的使用，你可以在页面构建出可拖动的滑动元素，如下是一个最基本的用法：

小例子code
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>滑块</title><link rel="stylesheet" href="../src/css/layui.css">
</head>
<body>
<div id="slideTest1"></div>
<script src="../src/layui.js"></script>
<script>
layui.use('slider', function(){var slider = layui.slider;//渲染slider.render({elem: '#slideTest1'  //绑定元素});
});
</script>
</body>
</html>

基础参数

slider 组件支持以下参数

自定义提示文本

当鼠标放在圆点和滑块拖拽时均会触发提示层。其默认显示的文本是它的对应数值，你也可以自定义提示内容：

例子code
slider.render({elem: '#slideTest1',setTips: function(value){ //自定义提示文本return value + '%';}
});

数值改变的回调

在滑块数值被改变时触发。该回调非常重要，可动态获得滑块当前的数值。你可以将得到的数值，赋值给隐藏域，或者进行一些其它操作。

小例子code
//当滑块为普通模式，回调返回的 value 是一个数值
slider.render({elem: '#slideTest1',change: function(value){console.log(value) //动态获取滑块数值//do something}
});//当滑块为范围模式，回调返回的 value 是一个数组，包含开始和结尾
slider.render({elem: '#slideTest1',range: true,change: function(value){console.log(value[0]) //得到开始值console.log(value[1]) //得到结尾值//do something}
});

实例方法

执行 slider 实例时，会返回一个当前实例的对象，里面包含针对当前实例的方法和属性。
语法：var ins1 = slider.render(options);

实例方法和属性code
var ins1 = slider.render(options); //获得实例对象ins1.config //获得当前实例的配置项
ins1.setValue(nums); //动态给滑块赋值

动态改变滑块数值

你可以通过外部方法动态改变滑块数值，如：

var ins1 = slider.render({elem: '#test1'//…
});      //改变指定滑块实例的数值
ins1.setValue(20)//若滑块开启了范围（range: true）
ins1.setValue(20, 0) //设置开始值
ins1.setValue(60, 1) //设置结尾值

结语

layui.slider 可以大幅度提升你 Web 应用中的很多操作体验，可尽情发挥。

评分

评分组件文档 - layui.rate

rate 评分组件在电商和 O2O 平台尤为常见，一般用于对商家进行服务满意度评价。外形依然小巧自然，功能依旧灵活实用。其中评分对应的自定义内容功能，可让它有更多的发挥空间。该组件为 2.3.0 版本新增
模块加载名称：rate

使用

rate 组件可以用来进行展示或评价，你只需要通过更改参数设定来开启你想要的功能，如下是一个最基本的例子：

layui.rate小例子code
<!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('rate', function(){var rate = layui.rate;//渲染var ins1 = rate.render({elem: '#test1'  //绑定元素});});</script>
</body>
</html>

这真的就是个小例子，所以下文对组件的参数进行了说明，请仔细阅读奥

基础参数

目前 rate 组件提供了以下基础参数，你可根据实际场景进行相应的设置

分数设置

如若你设置分数，我们会根据你是否开启半星功能，来做一个具体的规范：关闭半星功能:
小数值大于 0.5 ：分数向上取整，如 3.6 分，则系统自动更改为 4 分
小数值小于等于 0.5 ：分数向下取整，如 3.2 分，则系统自动更改为 3 分
如果在关闭半星功能的情况下开启了文本，你会发现你的分数也相应的变成了整数
开启半星功能:
不论你的小数值是 0.1 还是 0.9，都统一规划为 0.5，在文本开启的情况下，你可以看见你的分数并没有发生变化

自定义文本的回调

通过 setText 函数，在组件初次渲染和点击后时产生回调。我们默认文本以星级显示，你可以根据自己设定的文字来替换我们的默认文本，如 “讨厌” “喜欢” 。若用户选择分数而没有设定对应文字的情况下，系统会使用我们的默认文本

例子coderate.render({elem: '#test1',setText: function(value){var arrs = {'1': '极差','2': '差','3': '中等','4': '好'};this.span.text(arrs[value] || ( value + "星"));}
});

当你点击 3 星时，文本内容是中等，点击 5 星时，由于没有设定对应文字，所以文本会显示 5 星

点击产生的回调

通过 choose 实现函数，在组件被点击后触发，回调分数，用户可根据分数来设置效果，比如出现弹出层

例子code
rate.render({elem: '#test1',choose: function(value){if(value > 4) alert( '么么哒' )}
});

那么当你点击 5 星或更高星级时，页面就会弹出“么么哒”啦，你可根据相应需求在 choose 里完善你的代码

结语

评分组件非常简单，重点在于参数选项的设置，你可以前往示例页面进行更为直观的了解。

轮播组件

通用轮播组件文档 - layui.carousel

carousel 是 layui 2.0 版本中新增的全新模块，主要适用于跑马灯/轮播等交互场景。它并非单纯地为焦点图而生，准确地说，它可以满足任何类型内容的轮播式切换操作，更可以胜任 FullPage （全屏上下轮播）的需求，简洁而不失强劲，灵活而优雅。

模块加载名称：carousel

快速使用

如下是几个常用的轮播示例，其中背景色是为了区分条目单独加的，在layui框架中并不会包含。条目区域可以放上文字列表、图片等任意内容

对应的代码code
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>carousel模块快速使用</title><link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body><div class="layui-carousel" id="test1"><div carousel-item><div>条目1</div><div>条目2</div><div>条目3</div><div>条目4</div><div>条目5</div></div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> --><script src="/static/build/layui.js"></script>
<script>
layui.use('carousel', function(){var carousel = layui.carousel;//建造实例carousel.render({elem: '#test1',width: '100%' //设置容器宽度,arrow: 'always' //始终显示箭头//,anim: 'updown' //切换动画方式});
});
</script>
</body>
</html>

在HTML结构中，只需要简单地注意这两项：

外层元素的 class=“layui-carousel” 用来标识为一个轮播容器
内层元素的属性 carousel-item 用来标识条目

而 id 则用于carousel模块建造实例的元素指向，剩下的工作，就是按照你的实际需求，给方法设置不同的基础参数了。

基础参数选项

通过核心方法：carousel.render(options) 来对轮播设置基础参数，也可以通过方法：carousel.set(options) 来设定全局基础参数.

切换事件

轮播的每一次切换时触发，回调函数返回一个object参数，携带的成员如下：

var carousel = layui.carousel;//触发轮播切换事件
carousel.on('change(test1)', function(obj){ //test1来源于对应HTML容器的 lay-filter="test1" 属性值console.log(obj.index); //当前条目的索引console.log(obj.prevIndex); //上一个条目的索引console.log(obj.item); //当前条目的元素对象
});

重置轮播

事实上，在执行 carousel.render(options) 方法时，有返回一个当前实例的对象。该对象包含了用于操作当前轮播的一些属性和方法。

var ins = carousel.render(options);//重置轮播
ins.reload(options);

结语

由于轮播的使用非常简单，所以本篇不做过于详细的讲解，核心在于基础参数选项的设置。你也可以前往示例页面进行更为直观的了解。

流加载

流加载文档 - layui.flow

该模块包含信息流加载和图片懒加载两大核心支持，无论是对服务端、还是前端体验，都有非常大的性能帮助。你可能已经在太多的地方看到她们的身影了，但不妨现在开始，体验一下Layui更为简单和高效的Flow吧。

模块加载名称：flow

使用

flow模块包含两个核心方法，如下所示：

layui.use('flow', function(){var flow = layui.flow;//信息流flow.load(options);//图片懒加载flow.lazyimg(options);
});

下面将对她们进行详细介绍。

信息流

信息流即异步逐页渲染列表元素，这是你页面已经存在的一段列表，你页面初始时只显示了6个

HTMLcode
<ul id="demo"><li>1</li><li>2</li>……<li>6</li>
</ul>

你想通过加载更多来显示余下列表，那么你只需要执行方法：flow.load(options) 即可

JavaScriptcode
layui.use('flow', function(){var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。var flow = layui.flow;flow.load({elem: '#demo' //指定列表容器,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页var lis = [];//以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）$.get('/api/list?page='+page, function(res){//假设你的列表返回在data集合中layui.each(res.data, function(index, item){lis.push('<li>'+ item.title +'</li>');}); //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多next(lis.join(''), page < res.pages);    });}});
});

上述是一个比较简单的例子，以下是信息流完整的参数支撑（即options对象），它们将有助于你更灵活地应对各种场景

图片懒加载

应该说比当前市面上任何一个懒加载的实现都更为强劲和轻量，她用不足80行代码巧妙地提供了一个始终加载当前屏图片的高性能方案（无论上滑还是下滑）。对你的网站因为图片可能带来的压力，可做出很好的应对。

语法：flow.lazyimg(options)

layui.use('flow', function(){var flow = layui.flow;//当你执行这样一个方法时，即对页面中的全部带有 lay-src 的 img 元素开启了懒加载（当然你也可以指定相关 img）flow.lazyimg();
});

如上所述，它只会针对以下 img 元素有效：

HTMLcode
<img src="占位图地址" lay-src="预加载图地址">
<img src="" src="bbb.jpg">
<img src="" lay-src="ccc.jpg">

占位图功能为 layui 2.6.6 开始新增。这本应在 1.0 就该支持，但由于重心在其他组件，导致姗姗来迟。
如你所见，图片懒加载的使用极其简单，其参数（options 对象）可支持的 key 如下表所示：

结语

如果还有各种流行的流加载，你可以给我们提供建议，我们会在layui后续版本中选择性加入。

工具组件

工具集文档 - layui.util

我们将一些工具性元素放入 util 模块中，以供选择性使用。其内部由多个小工具组件组成，他们也许不是必须的，但很多时候却能为你的页面提供良好的辅助作用。

模块加载名称：util

固定块

语法：util.fixbar(options)
其中参数 options 是一个对象，可支持的key如下表：

例子code
layui.use('util', function(){var util = layui.util;//执行util.fixbar({bar1: true,click: function(type){console.log(type);if(type === 'bar1'){alert('点击了bar1')}}});
});

倒计时

这是一个精致的封装，它并不负责视图的呈现，而仅返回倒计时数值，这意味着你可以将它应用在任何倒计时相关的业务中。

语法：util.countdown(endTime, serverTime, callback)

例子code
<div id="test"></div><script>
layui.use('util', function(){var util = layui.util;//示例var endTime = new Date(2099,1,1).getTime() //假设为结束日期,serverTime = new Date().getTime(); //假设为当前服务器时间，这里采用的是本地时间，实际使用一般是取服务端的util.countdown(endTime, serverTime, function(date, serverTime, timer){var str = date[0] + '天' + date[1] + '时' +  date[2] + '分' + date[3] + '秒';layui.$('#test').html('距离2099年1月1日还有：'+ str);});
});
</script>

其它方法

结语

工具模块往往应用在边边角角，将不定期增加。

代码高亮

代码高亮文档 - layui.code

该组件暂时只对你的 pre 元素进行一个修饰，从而保证你展现的代码更具可读性。目前它没有对不同的语言进行颜色高亮（后续逐步强化），但这丝毫不会影响它对你带来的便捷。

模块加载名称：code

使用

code模块的使用非常简单，请直接看代码，假设你在页面有这样一段pre标签：

htmlcode
<pre class="layui-code">
//代码区域
var a = 'hello layui';
</pre>

那么你只需要经过下面的方式：

JavaScriptcode
layui.use('code', function(){ //加载code模块layui.code(); //引用code方法
});

就可以将那段pre区块显示成你现在看到的这个样子：

//代码区域
var a = 'hello layui';

基础参数方法：

layui.code(options)
它接受一个对象参数options，支持以下key的设定

特别提示：除了上述方式的设置，我们还允许你直接在pre标签上设置属性来替代，如：

<pre class="layui-code" lay-title="" lay-height="" lay-skin="" lay-encode="">
这样有木有觉得更方便些
</pre>

下面将针对每一个参数做进一步讲解。

指定元素

code模块会去自动查找class为layui-code的类，如果你初始给的不是该类，仅仅只是一个pre标签，那么需要通过elem设置选择器来指向元素：

JavaScriptcode
layui.code({elem: 'pre' //默认值为.layui-code
});

设置标题

即左上角显示的文本，默认值为code

JavaScriptcode
layui.code({title: 'JavaScript'
});

或者直接在pre标签上设置属性

设置最大高度

你可以设置以下key来控制修饰器的最大高度。如果内容低于该高度，则会自适应内容高度；如果内容超过了该高度，则会自动出现滚动条。

JavaScriptcode
layui.code({height: '100px' //请注意必须加px。如果该key不设定，则会自适应高度，且不会出现滚动条。
});

或者直接在pre标签上设置属性< pre lay-height=“100px”>< /pre>

转义html标签

事实上很多时候你都需要在pre标签中展现html标签，而不希望它被浏览器解析。那么code模块允许你这么做，只需要开启encode即可，如：

JavaScriptcode
layui.code({encode: true //是否转义html标签。默认不开启
});

开启了encode后的效果如下：

显示htmlcode
<ul><li>HTML将不会被解析</li><li>有木有感觉非常方便</li>
</ul>
<script>
!function(){var a = 123;
}();
</script>

或者直接在pre标签上设置属性< pre lay-encode=“true”>< /pre>

风格选择

你肯定不会满足于code的某一种显示风格，而skin参数则允许你设定许多种显示风格，我们目前内置了两种，分别为默认和notepad

JavaScriptcode
layui.code({title: 'NotePad++的风格',skin: 'notepad' //如果要默认风格，不用设定该key。
});

上述的设定后，你会看到下面的样子

或者直接在pre标签上设置属性< pre lay-skin=“notepad”>< /pre>

layui官方文档保存相关推荐

layui官方文档镜像站
layui 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用.其风格简约轻盈,而组件优雅丰盈,从源代码到使用方法的每一处细节都经过精心雕琢 ...
OpenCV-Python官方文档学习笔记（上）
整理自OpenCV-Python官方文档一. OpenCV-Python Tutorials 1 安装及验证 2 图片读写,展示 3 视频读写,展示 4 绘图功能(绘制几何形状:线.圆.椭圆.矩形. ...
python-66：BS4实例--下载BS4官方文档
2019独角兽企业重金招聘Python工程师标准>>> 前面已经对BS4有了简单的认识和讲解,该讲的都讲了,原本也已经想好了一个实例,但是现在想往后推一推,因为我实在受不了了,我们前 ...
k8s多master建议用几个_Kubernetes 教程之跟着官方文档从零搭建 K8S
前言本文将带领读者一起, 参照者 Kubernetes 官方文档, 对其安装部署进行讲解. Kubernetes 更新迭代很快, 书上.网上等教程可能并不能适用于新版本, 但官方文档能. 阅读这篇文 ...
Disruptor官方文档实现
获得Disruptor Disruptor是什么,我就不废话了,本文是对官方文档的实现,直接进入主题,要使用Disruptor可以通过Maven或者下载jar来安装Disruptor,只要把对应的ja ...
OpenGL ES着色器语言之语句和结构体（官方文档第六章）内建变量（官方文档第七、八章）...
OpenGL ES着色器语言之语句和结构体(官方文档第六章) OpenGL ES着色器语言的程序块基本构成如下: 语句和声明函数定义选择(if-else) 迭代(for, while, do-wh ...
《maven官方文档》5分钟开始Maven
原文地址前提你必须明白如何在电脑上安装软件.如果你不知道如何做,请向你学校.办公室里等的人请教下,或者付费给他人让他们解释给你.Maven邮件组不是寻求这个建议的最好地方. 安装 Maven是个J ...
vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
mysql 标识符规则_MySQL 标识符到底区分大小写么——官方文档告诉你
最近在阿里云服务器上部署一个自己写的小 demo 时遇到一点问题,查看 Tomcat 日志后定位到问题出现在与数据库服务器交互的地方,执行 SQL 语句时会返回指定列.指定名不存在的错误.多方查证 ...
spark之4：基础指南（源自官方文档）
spark之4:基础指南(源自官方文档) @(SPARK)[spark, 大数据] spark之4基础指南源自官方文档一简介二接入Spark 三初始化Spark 一使用Shell 四弹性分布式数据 ...