第1页 / 共199页
第2页 / 共199页
第3页 / 共199页
第4页 / 共199页
第5页 / 共199页
第6页 / 共199页
第7页 / 共199页
第8页 / 共199页
Layui参考手册.pdf
Layui 参考手册
当前版本：2.5.6
作者：贤心
寂寞高手整理
2020.10
Layui 参考手册目录
目录
一、快速上手 ................................................................................................................................................. 1
1、引入 js ............................................................................................................................................... 1
1）采用模块化方式 ....................................................................................................................... 1
2）采用非模块化方式引用： ....................................................................................................... 1
2、layui 模块的定义及使用 .................................................................................................................. 2
1）实例：lay-config.js .................................................................................................................... 2
2）实例：主体框架扩展（common.js） ..................................................................................... 4
3、本地存储 ........................................................................................................................................... 6
4、获取设备信息 ................................................................................................................................... 6
5、其他底层引擎 ................................................................................................................................... 7
二、页面元素规范与说明 ............................................................................................................................. 8
1、CSS 内置公共基础类 ........................................................................................................................ 8
2、CSS 命名规范 .................................................................................................................................... 9
3、HTML 规范：结构 ............................................................................................................................ 9
1）HTML 规范：lay 常用公共属性 ............................................................................................... 9
三、layui 模块规范 ...................................................................................................................................... 10
1、预先加载 ......................................................................................................................................... 10
2、模块命名空间 ................................................................................................................................. 11
3、扩展一个 layui 模块 ..................................................................................................................... 11
四、页面元素 ............................................................................................................................................... 12
1、布局 ................................................................................................................................................. 12
1）栅格系统 ................................................................................................................................. 12
2）响应式规则 ............................................................................................................................. 13
3）响应式公共类 ......................................................................................................................... 14
4）布局容器（固定或自适应） ................................................................................................. 14
5）列间距 ..................................................................................................................................... 15
6）列偏移 ..................................................................................................................................... 15
7）栅格嵌套 ................................................................................................................................. 15
8）让 IE8/9 兼容栅格 .................................................................................................................. 16
9）后台布局 ................................................................................................................................. 16
2、颜色 ................................................................................................................................................. 19
1）常用主色 ................................................................................................................................. 19
2）内置的背景色 CSS 类 ............................................................................................................. 20
3、图标 ................................................................................................................................................. 20
1）字体图标 ................................................................................................................................. 20
2）内置图标一览表 ..................................................................................................................... 21
4、动画 ................................................................................................................................................. 29
1）使用方式 ................................................................................................................................. 29
2）内置 CSS3 动画一览表 ........................................................................................................... 29
5、按钮 ................................................................................................................................................. 29
1）用法 ......................................................................................................................................... 29
2）标准按钮 ................................................................................................................................. 30
3）可跳转按钮 ............................................................................................................................. 30
4）主题 ......................................................................................................................................... 30
- 1 -
Layui 参考手册目录
5）尺寸 ......................................................................................................................................... 30
6）流体按钮 ................................................................................................................................. 31
7）圆角按钮 ................................................................................................................................. 31
8）图标按钮 ................................................................................................................................. 31
9）按钮组 ..................................................................................................................................... 31
10）按钮容器 ............................................................................................................................... 32
6、表单 ................................................................................................................................................. 32
1）Form 基本区块结构 ............................................................................................................... 33
2）输入框 ..................................................................................................................................... 35
3）下拉选择框 ............................................................................................................................. 35
（1）通过设定 selected 来设定默认选中项： ............................................................... 36
（2）通过 optgroup 标签给 select 分组： ....................................................................... 36
（3）通过设定属性 lay-search 来开启搜索匹配功能 ................................................. 36
（4）设置属性 disabled 开启禁用 ................................................................................... 36
4）复选框 ..................................................................................................................................... 36
5）开关按钮 ................................................................................................................................. 37
6）单选框 ..................................................................................................................................... 37
7）文本域 ..................................................................................................................................... 37
8）组装行内表单 ......................................................................................................................... 38
9）忽略美化渲染 ......................................................................................................................... 38
10）表单方框风格 ....................................................................................................................... 38
7、导航 ................................................................................................................................................. 39
1）水平导航 ................................................................................................................................. 40
2）导航中的其它元素 ................................................................................................................. 40
3）导航主题 ................................................................................................................................. 41
4）垂直/侧边导航 ....................................................................................................................... 41
5）水平、垂直、侧边三个导航的区别 ..................................................................................... 42
6）导航可选属性 ......................................................................................................................... 42
7）面包屑 ..................................................................................................................................... 42
8、选项卡 ............................................................................................................................................. 43
1）默认 Tab 选项卡 ..................................................................................................................... 43
2）Tab 简洁风格 .......................................................................................................................... 44
3）Tab 卡片风格 .......................................................................................................................... 45
4）带删除的 Tab .......................................................................................................................... 45
5）ID 焦点定位 ............................................................................................................................ 46
9、进度条 ............................................................................................................................................. 47
1）HTML 结构 ................................................................................................................................ 47
2）显示进度比文本 ..................................................................................................................... 47
3）大号进度条 ............................................................................................................................. 48
4）典型实例 ................................................................................................................................. 48
10、面板 ............................................................................................................................................... 49
1）卡片面板 ................................................................................................................................. 49
2）折叠面板 ................................................................................................................................. 50
3）开启手风琴 ............................................................................................................................. 50
11、表格 ............................................................................................................................................... 51
1）静态表格基础属性 ................................................................................................................. 51
- 2 -
Layui 参考手册目录
12、徽章 ............................................................................................................................................... 51
13、时间线 ........................................................................................................................................... 53
14、其他辅助元素 ............................................................................................................................... 54
五、内置模块 ............................................................................................................................................... 56
1、layer 弹出层 .................................................................................................................................... 56
1）layer 独立使用与模块化使用 ................................................................................................ 56
2）基础参数 ................................................................................................................................. 57
（1）type - 基本层类型 ...................................................................................................... 57
（2）title - 标题 .................................................................................................................. 57
（3）content - 内容 ............................................................................................................ 57
（4）skin - 样式类名 .......................................................................................................... 58
（5）area - 宽高 .................................................................................................................. 59
（6）offset - 坐标 ............................................................................................................... 59
（7）icon - 图标 .................................................................................................................. 59
（8）btn - 按钮 ................................................................................................................... 60
（9）btnAlign - 按钮排列 ................................................................................................... 61
（10）closeBtn - 关闭按钮 ................................................................................................. 61
（11）shade - 遮罩 ............................................................................................................. 61
（12）shadeClose - 是否点击遮罩关闭 ............................................................................. 61
（13）time - 自动关闭所需毫秒 ....................................................................................... 61
（14）id - 用于控制弹层唯一标识 .................................................................................... 62
（15）anim - 弹出动画 ....................................................................................................... 62
（16）isOutAnim - 关闭动画 .............................................................................................. 62
（17）maxmin - 最大最小化 .............................................................................................. 63
（18）fixed - 固定 ............................................................................................................... 63
（19）resize - 是否允许拉伸 .............................................................................................. 63
（20）resizing - 监听窗口拉伸动作 ................................................................................... 63
（21）scrollbar - 是否允许浏览器出现滚动条 ................................................................. 63
（22）maxWidth - 最大宽度 .............................................................................................. 63
（23）maxHeight - 最大高度 ............................................................................................. 63
（24）zIndex - 层叠顺序 .................................................................................................... 64
（25）move - 触发拖动的元素 .......................................................................................... 64
（26）moveOut - 是否允许拖拽到窗口外 ........................................................................ 64
（27）moveEnd - 拖动完毕后的回调方法 ........................................................................ 64
（28）tips - tips 方向和颜色 ............................................................................................... 64
（29）tipsMore - 是否允许多个 tips ................................................................................. 64
（30）success - 层弹出后的成功回调方法 ....................................................................... 64
（31）yes - 确定按钮回调方法 .......................................................................................... 65
（32）cancel - 右上角关闭按钮触发的回调 ..................................................................... 65
（33）end - 层销毁后触发的回调 ..................................................................................... 65
（34）full/min/restore -分别代表最大化、最小化、还原 后触发的回调 ..................... 65
（35）layer.config(options) - 初始化全局配置 .................................................................. 66
（36）layer.ready(callback) - 初始化就绪 .......................................................................... 67
（37）layer.open(options) - 原始核心方法........................................................................ 67
3）layer.alert(content, options, yes) - 普通信息框 ................................................... 67
4）layer.confirm(content, options, yes, cancel) - 询问框 ....................................... 67
- 3 -
Layui 参考手册目录
5）layer.msg(content, options, end) - 提示框 ............................................................... 68
6）layer.load(icon, options) - 加载层 ............................................................................. 68
7）layer.tips(content, follow, options) - tips 层 ...................................................... 69
8）layer.close(index) - 关闭特定层 ................................................................................... 69
9）layer.closeAll(type) - 关闭所有层 ............................................................................... 70
10）layer.style(index, cssStyle) - 重新定义层的样式 ................................................. 70
11）layer.title(title, index) - 改变层的标题 ............................................................... 70
12）layer.getChildFrame(selector, index) - 获取 iframe 页的 DOM ............................ 70
13）layer.getFrameIndex(windowName) - 获取特定 iframe 层的索引 ............................. 71
14）layer.iframeAuto(index) - 指定 iframe 层自适应 ..................................................... 71
15）layer.iframeSrc(index, url) - //重置特定 iframe url .......................................... 71
16）layer.setTop(layero) -置顶当前窗口 ........................................................................... 71
17）layer.full()、layer.min()、layer.restore() - 手工执行最大小化...................... 72
18）layer.prompt(options, yes) - 输入层 ......................................................................... 72
19）layer.tab(options) - tab 层 .......................................................................................... 73
20）layer.photos(options) - 相册层 ................................................................................... 73
2、日期与时间选择器 ......................................................................................................................... 75
1）elem - 绑定元素 ..................................................................................................................... 75
2）type - 控件选择类型 .............................................................................................................. 75
3）range - 开启左右面板范围选择 ............................................................................................ 76
4）format - 自定义格式 .............................................................................................................. 77
5）value - 初始值 ........................................................................................................................ 78
6）isInitValue - 初始值填充 ........................................................................................................ 78
7）min/max - 最小/大范围内的日期时间值 ............................................................................. 79
8）trigger - 自定义弹出控件的事件 .......................................................................................... 80
9）show - 默认显示 .................................................................................................................... 80
10）position - 定位方式 .............................................................................................................. 81
11）zIndex - 层叠顺序 ................................................................................................................ 81
12）showBottom - 是否显示底部栏 .......................................................................................... 82
13）btns - 工具按钮 .................................................................................................................... 82
14）lang - 语言 ............................................................................................................................ 82
15）theme - 主题 ........................................................................................................................ 82
16）calendar - 是否显示公历节日 ............................................................................................. 83
17）mark - 标注重要日子 .......................................................................................................... 83
18）控件初始打开的回调 ........................................................................................................... 84
19）日期时间被切换后的回调 ................................................................................................... 84
20）控件选择完毕后的回调 ....................................................................................................... 85
21）弹出控件提示 ....................................................................................................................... 85
22）配置基础路径 ....................................................................................................................... 85
23）其它方法 ............................................................................................................................... 85
24）简单的示例 ........................................................................................................................... 86
3、分页 ................................................................................................................................................. 86
1）快速使用 ................................................................................................................................. 87
2）基础参数选项 ......................................................................................................................... 87
3）jump - 切换分页的回调 ......................................................................................................... 88
4、模板引擎 ......................................................................................................................................... 89
- 4 -
Layui 参考手册目录
1）快速使用 ................................................................................................................................. 89
2）模版语法 ................................................................................................................................. 90
3）分隔符 ..................................................................................................................................... 91
5、数据表格 ......................................................................................................................................... 91
1）快速使用 ................................................................................................................................. 91
2）渲染三种方法 ......................................................................................................................... 93
（1）方法一：方法渲染 ..................................................................................................... 93
（2）方法二：自动渲染 ..................................................................................................... 94
（3）方法三：转换静态表格 ............................................................................................. 94
3）基础参数一览表 ..................................................................................................................... 96
4）cols - 表头参数一览表 ....................................................................................................... 98
5）templet - 自定义列模板 ................................................................................................... 101
6）toolbar - 绑定工具条模板 ............................................................................................... 102
7）异步数据接口 ....................................................................................................................... 104
（1）done - 数据渲染完的回调 ..................................................................................... 106
（2）defaultToolbar - 头部工具栏右侧图标 ............................................................. 107
（3）text - 自定义文本 ................................................................................................. 107
（4）initSort - 初始排序 ............................................................................................. 107
（5）height - 设定容器高度 ......................................................................................... 108
（6）设定表格外观 ........................................................................................................... 109
8）基础方法 ............................................................................................................................... 109
（1）获取选中行 ............................................................................................................... 109
（2）重置表格尺寸 ........................................................................................................... 110
（3）表格重载 ................................................................................................................... 110
（4）导出任意数据 ........................................................................................................... 111
9）事件监听 ............................................................................................................................... 112
（1）监听头部工具栏事件 ............................................................................................... 112
（2）监听复选框选择 ....................................................................................................... 113
（3）监听单元格编辑 ....................................................................................................... 113
（4）监听行单双击事件 ................................................................................................... 114
（5）监听行中工具条点击事件 ....................................................................................... 114
（6）监听排序切换 ........................................................................................................... 114
10）常用方法 ............................................................................................................................. 115
（1）列宽自动分配 ........................................................................................................... 115
（2）赋值已知数据 ........................................................................................................... 116
（3）转化静态表格 ........................................................................................................... 116
（4）开启分页 ................................................................................................................... 117
（5）自定义分页 ............................................................................................................... 117
（6）开启头部工具栏 ....................................................................................................... 117
（7）开启合计行 ............................................................................................................... 120
（8）开启复选框 ............................................................................................................... 120
（9）开启单选框 ............................................................................................................... 120
（10）开启单元格编辑 ..................................................................................................... 120
（11）在表格中加入表单元素 ......................................................................................... 121
（12）设置单元格样式 ..................................................................................................... 122
（13）固定列 ..................................................................................................................... 123
- 5 -
Layui 参考手册目录
（14）数据操作 ................................................................................................................. 123
（15）解析任意数据格式 ................................................................................................. 125
（16）监听行事件 ............................................................................................................. 126
（17）数据表格的重载 ..................................................................................................... 127
（18）高度最大化适应 ..................................................................................................... 128
（19）设置初始排序 ......................................................................................................... 128
（20）监听单元格事件 ..................................................................................................... 129
（21）复杂表头 ................................................................................................................. 130
6、表单 ............................................................................................................................................... 131
1）使用 ....................................................................................................................................... 131
2）更新渲染 ............................................................................................................................... 133
3）预设元素属性 ....................................................................................................................... 134
4）事件监听 ............................................................................................................................... 135
5）监听 select 选择 ................................................................................................................... 135
6）监听 checkbox 复选 .............................................................................................................. 135
7）监听 switch 开关................................................................................................................... 136
8）监听 radio 单选 ..................................................................................................................... 136
9）监听 submit 提交 .................................................................................................................. 136
10）表单赋值 / 取值 ............................................................................................................... 136
11）表单验证 ............................................................................................................................. 137
7、文件上传 ....................................................................................................................................... 138
1）快速使用 ............................................................................................................................... 138
2）基础参数选项 ....................................................................................................................... 139
3）上传接口 ............................................................................................................................... 141
4）回调 ....................................................................................................................................... 141
（1）选择文件的回调 ....................................................................................................... 141
（2）上传前的回调 ........................................................................................................... 142
（3）请求成功的回调 ....................................................................................................... 142
（4）请求失败的回调 ....................................................................................................... 143
（5）多文件上传回调 ....................................................................................................... 143
（6）上传进度的回调 ....................................................................................................... 143
5）重载实例 ............................................................................................................................... 144
6）重新上传 ............................................................................................................................... 144
7）跨域上传 ............................................................................................................................... 145
8）典型实例 ............................................................................................................................... 145
8、穿梭树 ........................................................................................................................................... 152
1）快速使用 ............................................................................................................................... 152
2）基础参数 ............................................................................................................................... 153
3）数据源格式解析 ................................................................................................................... 153
4）左右穿梭的回调 ................................................................................................................... 154
5）基础方法 ............................................................................................................................... 154
（1）获得右侧数据 ........................................................................................................... 154
（2）实例重载 ................................................................................................................... 155
6）典型实例 ............................................................................................................................... 155
9、树形组件 ....................................................................................................................................... 157
1）快速使用 ............................................................................................................................... 158
- 6 -
Layui 参考手册目录
2）基础参数 ............................................................................................................................... 158
3）数据源参数 ........................................................................................................................... 159
4）回调 ....................................................................................................................................... 160
（1）节点被点击的回调 ................................................................................................... 160
（2）复选框被点击的回调 ............................................................................................... 160
（3）操作节点的回调 ....................................................................................................... 160
5）方法 ....................................................................................................................................... 161
（1）返回选中的节点数据 ............................................................................................... 161
（2）设置节点勾选 ........................................................................................................... 161
（3）实例重载 ................................................................................................................... 161
6）典型实例 ............................................................................................................................... 162
10、颜色选择器 ................................................................................................................................. 164
1）使用 ....................................................................................................................................... 164
2）基础参数 ............................................................................................................................... 165
3）预定义颜色 ........................................................................................................................... 166
4）颜色被改变的回调 ............................................................................................................... 167
5）颜色选择后的回调 ............................................................................................................... 167
11、常用元素操作 ............................................................................................................................. 167
1）使用 ....................................................................................................................................... 167
2）预设元素属性 ....................................................................................................................... 168
3）基础方法 ............................................................................................................................... 168
4）初始动态元素（更新渲染） ............................................................................................... 170
5）事件监听 ............................................................................................................................... 170
（1）监听 Tab 切换 ........................................................................................................... 171
（2）监听 Tab 删除 ........................................................................................................... 171
（3）监听导航点击 ........................................................................................................... 171
（4）监听折叠面板 ........................................................................................................... 171
6）操作进度条 ........................................................................................................................... 172
12、滑块 ............................................................................................................................................. 172
1）使用 ....................................................................................................................................... 172
2）基础参数 ............................................................................................................................... 173
3）回调函数 ............................................................................................................................... 174
（1）自定义提示文本 ....................................................................................................... 174
（2）数值改变的回调 ....................................................................................................... 174
4）实例方法和属性 ................................................................................................................... 174
（1）动态改变滑块数值 ................................................................................................... 174
13、评分 ............................................................................................................................................. 175
1）使用 ....................................................................................................................................... 175
2）基础参数 ............................................................................................................................... 175
3）分数设置 ............................................................................................................................... 176
4）回调 ....................................................................................................................................... 176
（1）自定义文本的回调 ................................................................................................... 176
（2）点击产生的回调 ....................................................................................................... 177
14、轮播 ............................................................................................................................................. 177
1）快速使用 ............................................................................................................................... 177
2）基础参数使用 ....................................................................................................................... 178
- 7 -
相关推荐
2023年江西萍乡中考道德与法治真题及答案.doc
2012年重庆南川中考生物真题及答案.doc
2013年江西师范大学地理学综合及文艺理论基础考研真题.doc
2020年四川甘孜小升初语文真题及答案I卷.doc
2020年注册岩土工程师专业基础考试真题及答案.doc
2023-2024学年福建省厦门市九年级上学期数学月考试题及答案.doc
2021-2022学年辽宁省沈阳市大东区九年级上学期语文期末试题及答案.doc
2022-2023学年北京东城区初三第一学期物理期末试卷及答案.doc
2018上半年江西教师资格初中地理学科知识与教学能力真题及答案.doc
2012年河北国家公务员申论考试真题及答案-省级.doc
2020-2021学年江苏省扬州市江都区邵樊片九年级上学期数学第一次质量检测试题及答案.doc
2022下半年黑龙江教师资格证中学综合素质真题及答案.doc
