Layui
使用
引入方式
-
模块化
- 引入layui.js文件和layui.css文件
- layui.use([模块数组],function(){JS代码});
-
非模块化
-
直接引入layui.all.js文件(相当于引入所有模块)和layui.css文件
- 这样就不需要use代码
-
使用方法
-
一般新建一变量
-
var layer= layui.layer; 使用layer模块就不用加layui前缀
- 这样比较简单,方便
元素
图标
-
需要一个容器标签才可以显示
-
相关样式
- layui-icon
-
使用实体字符或者使用类名
按钮
-
相关样式
-
必要样式
- layui-btn
-
主题样式
- layui-btn-primary(原始按钮)
- layui-btn-normal(百搭按钮)
- layui-btn-warm(暖色按钮)
- layui-btn-danger(警告按钮)
- layui-btn-disabled(禁用按钮)
-
尺寸
- layui-btn-lg(最大按钮)
- 默认按钮不加
- layui-btn-sm(小型按钮)
- layui-btn-xs(微型按钮)
-
其它样式
- layui-btn-radius(圆角按钮)
- 外层div添加样式:layui-btn-group(按钮组)
-
导航菜单
-
相关样式
-
方向
- layui-nav(水平)
- layui-nav-tree(垂直)
-
其它样式
- layui-nav(导航菜单)
- layui-nav-item(导航菜单的子项目列表)
- layui-nav-child(指向的子项)
- layui-this(通用,默认选择)
-
选项卡
-
相关样式
-
风格
- layui-tab(默认风格_
- layui-tab-brief(简洁风格)
- layui-tab-card(卡片风格)
-
其它样式
- layui-tab-title(卡片头)
- layui-this(默认选中)
- layui-tab-content(卡片内容外层)
- layui-tab-item(卡片内容)
- layui-show(显示卡片)
-
-
相关属性
- lay-allowclose="true"(使卡片可以关闭)
- lay-filter="demo"(layui可以找到元素)
-
相关方法
进度条
-
相关样式
- layui-progress(外层div)
- layui-progress-bar(内层div)
- layui-progress-big(大号进度条,文本显示在里面)
-
相关属性
- lay-percent="10%"(设置进度,内层)
- lay-showPercent="yes"(外层div,用于显示文本)
面板
-
相关样式
-
layui-card-header(面板标题)
-
layui-card-body(面板内容)
-
折叠面板
- layui-collapse(整个面板容器)
- layui-colla-item(面板块)
- layui-colla-title(面板标题)
- layui-colla-content(面板内容)
- layui-show(初始展开)
-
手风琴面板
- 在折叠面板容器中设置属性lay-accordion即可
- 面板只能存在一个打开状态,不可以多个同时打开
-
徽章
-
相关样式
- layui-badge-dot(不可以加文字,小圆点,改变背景改变颜色)
- layui-badge(椭圆体)
- layui-badge-rim(边框体)
-
一般用于插入其他元素中间修饰作用,类似于邮件有多少封未读
时间线
-
相关样式
-
layui-timeline(时间线外层)
-
layui-timeline-item(单个时间线的内容)
-
插入图标用一个容器
- �
-
layui-timeline-content(具体内容层)
-
layui-timeline-title(具体内容标题)
-
下面接一个层用于设置内容
-
表格
-
相关样式
- layui-table(普通表格)
-
相关属性
-
lay-even
- 使用隔行背景
-
lay-skin="属性值"
- line(行边框风格)
- row(列边框风格)
- nob(无边框风格)
-
lay-size="属性值"
- sm(小尺寸)
- lg(大尺寸)
-
动画
-
相关样式
-
layui-anim(必要样式)
-
layui-anim-loop(循环动画)
-
动画样式
- layui-anim-up(底部向上滑动)
- layui-anim-upbit(微微向上滑动)
- layui-anim-scale(平滑放大)
- layui-anim-scaleSpring(弹簧式放大)
- layui-anim-fadein(逐渐显示)
- layui-anim-fadeout(逐渐消失)
- layui-anim-rotate(360度旋转)
-
辅助元素
-
引用
- layui-elem-quote(引用区域的文字)
-
字段集区块
- layui-elem-field(设置区块div)
- layui-field-box(设置区块内容)
模块
layer:弹出层
-
属性
-
type
- 0(默认信息框)
- 1(页面层)
- 2(iframe层)
- 3(加载层)
- 4(tips层)
-
title
- 设置标题文本
- 可以以数组形式填写标题内容和样式
-
content
- 可以写很多东西
- HTML内容
- 超链接等
-
skin
- 使用某个css类
-
area
- 设置宽和高,以数组形式
- area:['200px','200px']
-
offset
- 用于设置弹出层的位置坐标
- auto(默认,中间)
- 定义一个值默认是top
- 定义两个是绝对位置
- 使用首字母,例如:offset:'lt'左上角
-
icon
- 内部有7个icon
- 所以参数是数字
- 默认没有,一共有0-6个编号
- 加载层有0-2个
-
btn
-
按钮,btn:['btn1','btn2']
-
可以有无限个按钮
-
按钮回调,,btn2:function(index,layero){}
-
btnAlign
- 按钮对齐
- l:左对齐
- r:右对齐
- c:居中对齐
-
closeBtn
- 关闭按钮的风格
- 默认为1,第二种比较丑
-
-
shade
-
设置毛玻璃背景
-
除了弹出层意外的窗口内部用一个背景色遮住可以设置透明度
-
shade:[0.4,'#fff']
- 默认0.3
-
ShadeClose
- 默认关闭
- 设置true打开
- 点击弹出层以外部分可以关闭弹出层
-
-
time
- 自动关闭(毫秒)
- 默认不会自动关闭
-
id
- 弹出层唯一表示,一般用于页面层或者iframe
-
anim
-
弹出动画
-
默认0:平滑放大
-
1:从上掉落
-
2:底部向上滑入
-
3:左滑入
-
4:左翻滚
-
5:逐渐显示
-
6:抖动
-
isOutAnim
- 默认关闭弹出有个动画(默认开启),设置false可以关闭
-
-
页面尺寸以及定位
-
fixed
- 默认固定(true)
- 如果不固定会跟随页面滚动
-
resize
-
是否允许拉伸
-
默认true
-
resizing:function()
- 监听窗口拉伸动作
-
-
maxWidth&maxHeight
- 最大宽度,area:'auto'有效
- 高度自适应有效
-
scrollbar
- 是否允许浏览器出现滚动条
- 默认true
-
zIndex
- 层叠顺序,用于解决其他组件层叠冲突
-
maxmin
- 最大最小化默认false
-
-
move
-
是否允许拖动
-
默认true
-
moveOut
- 是否可以拖动到窗口外面
- 默认false
-
moveEnd:function()
- 拖动完以后的回调函数(默认没有)
-
-
tips
-
四个方向弹出
- 1-4(顺时针)
- 以数组方式设置颜色
- tips:[1,'#fff']
-
tipMore
- 是否允许多个共存
- 默认false
-
-
-
方法
-
语法
- success:function()
-
success
- 成功后的回调方法
- 参数是DOM和索引
-
yes
- 确认按钮回调方法
- 参数是DOM和索引
-
cancel
- 关闭按钮回调方法
- 参数是DOM和索引
-
end
- 层销毁触发回调函数
- 无参数
-
full/min/restore
- 放大缩小还原触发回调
- DOM
-
layer.config()
- 初始化全局配置
-
layer.ready()
- 初始化就绪
-
layer.open()
- 核心方法,用于创建层
-
layer.alert()
- 可以添加图标,以及回调函数
-
layer.confirm()
- 可以添加图标和回调
-
layer.msg
- 图标回调
- 设置关闭时间
-
layer.load
-
加载层
-
设置等待时间以及风格
- 风格0-2
-
var x = layer.load(2,{time:2000});
-
layer.close(x);
-
-
layer.tips
- 类似msg
-
layer.close()
- 关闭特定层
- 创建层的时候赋值给一个变量即可
-
layer.coseAll()
- 关闭所以层,在不指定类型的情况下
- 例如指定:layer.closeAll(page);
-
layer.style(index,cssstyle)
- 给指定层设置css样式
-
layer.title("标题内容",index)
- 给指定层改变标题
-
layer.getChildFrame(selector, index)
- 获取iframe页面DOM
-
layer.getFrameIndex(windowName)
- 获取iframe指定层的索引
-
layer.iframeAuto(index)
- 指定iframe层自适应
-
layer.iframeSrc(idnex,url)
- 重新设定iframe的url
-
layer.setTop(layero)
- 置顶当前窗口
-
layer.full()、layer.min()、layer.restore()
- 最大最小化和还原
-
layer.prompt(options, yes)
- 输入层
-
layer.tab({})
- tab层,弹出一组tab
-
layer.photos(options)
- 相册层
-
date:日期选择
-
elem(绑定元素)
-
type(控件类型选择)
- year(年)
- month(年月)
- date(年月日)
- time(时间)
- datetime(时间日期)
-
range(范围选择)
-
默认false
-
range:true
- 或者range:'~'(定义分隔字符)
-
-
format(自定义格式)
- 例如:yyyy-MM-dd HH:mm:ss
- 2017-08-18 20:08:08
-
value(设置初始值)
-
默认为:new Date()
-
value:'2018-08-18'(必须遵循format设定格式)
-
例如:value:new Date(153476888000)
-
isInitValue(是否向元素填充初始值)
- 默认true
-
-
min/max
- 和value格式一样,遵循format
- 或者:min:-7,代表七天内,类似格式
-
trigger(自定义弹出控件事件)
- 默认为focus
- 如果绑定元素为非输入框默认事件为click
-
position(控件定位)
-
abolute(绝对定位,始终吸附绑定元素,默认)
-
fixed(固定定位,吸附绑定元素不跟随浏览器滚动)
-
static(静态定位,嵌入指定容器)
-
show(控件默认显示是否在绑定元素区域)
- 默认false
-
-
ZIndex(层叠顺序)
-
showBottom(是否显示底部)
-
默认true
-
btns(工具按钮)
- 目前内置可识别
- btns:['clear','now','confirm']
- 清除,当前时间,确认
-
-
lang(两种语言版本)
- 默认:lang:'cn'
-
theme(主题)
- default(默认简约)
- molv(墨绿)
-
颜色值自定义
- grid(格子主题)
-
calendar(是否显示公历节日)
- 默认false
- 国际版true也不会显示
-
mark(标注重要日子)
- mark:{'0-9-18':'国耻'}
- 固定格式
- 如果年份为0默认每年月份为0默认每月
-
函数
-
ready(空间打开触发回调)
- 初始时间为参数
-
change(日期切换发生回调)
- 生成的值
- 日期时间对象
- 结束日期时间对象
-
done(点击日期,清空,现在,确定都会触发)
- 生成的值,日期时间对象,结束的日期时间对象
-
render
- var insl = laydate.render({elem:'#test'})
-
laydate.getEndDate(mounth,year)
- 获取指定年月最后一天,没有年默认当前
-
slider:滑块
-
elem(绑定属性)
-
type(滑块类型)
- 默认default(水平)
- vertical(垂直)
-
min/max(滑块最小值最大值)
-
range(是否开启滑块范围拖拽)
- 默认false
-
value(滑块初始值)
- 如果开启range需要传入,value:[20,30]
-
step(拖动步长)
-
showstep(是否显示间断点)
-
tips(是否显示文本提示)
-
input(是否显示输入框,如果开启range此选项无效)
-
height(针对垂直滑块的高度)
-
disabled(是否将滑块禁用拖拽)
-
theme(主题颜色#自定义)
rate:评分
- elem(绑定元素)
- length(星星的个数,如果是小数向下取整)
- value(初始值)
- theme(主题默认#ffb800可以自定义)
- half(是否可以选择半星)
- text(是否显示对应内容)
- readonly(是否只读)
- choose:function(value){选择星星后触发}
carousel:轮播图
-
相关类
- layui-carousel(标识一个轮播图容器)
- carousel-item(这是一个属性,放置轮播内容外面)
-
carousel.render
-
elem(绑定元素)
-
width/height(设定轮播器高度宽度像素可以百分比)
-
full(是否全屏轮播,默认否)
-
anim(切换动画方式)
- default(左右,默认)
- updown(上下)
- fade(渐隐渐现)
-
autoplay(是否支持自动切换,默认true)
-
interval(自动切换时间间隔,单位毫秒,不小于800)
-
index:初始条目[0]
-
arrow:切换箭头显示状态
- hover:悬停显示,默认
- always:始终显示
- none:始终不显示
-
indicator:指示器位置
- inside:容器内部,默认
- outside:容器外部
- none:不显示
- 如果设置了updown此参数无效
-
trigger:指示器的触发事件
-
laytpl:模板引擎
-
{{d.field}}
-
输出一个普通字符串,不转译html
-
{{d.field}}
-
-
-
{{=d.field}}
- 输出普通字段,并且转义HTML
-
{{#JavaScript表达式}}
- 如果想输出一个函数应该{{fun}}
-
{{!template!}}
- 不解析该模板
flow:流加载
- elem:绑定元素
- scrollElem:滚动条所在元素选择
- isAuto:是否自动加载
- end:用于页末显示内容(默认:没有更多了)
- isLazyimg:是否开启图片懒加载,默认false(如果设置,img中的src需要改成lay-src)
- mb:与底部临界距离,默认50,当滚动条产生这个距离触发加载,(只有isAuto:true有效)
- done:function:到达临界点触发回调,两个参数,一个是当前页page,一个是下一页next
util:工具集
-
固定块
-
语法:util.fixbar(options)
-
bar1:默认false,如果为true则显示第一个(默认图标),如果参数为图标字符,则覆盖默认图标
-
bar2:同上
-
bgcolor:定义区块背景色
-
showHeight:用于控制top按钮滚动高度临界值,默认200
-
css:可以通过重置bar的位置,css:{right:200,bottom:299}
-
click:function()
- 点击bar的回调,带有一个参数用于区分var
- 支持类型有:bar1,bar2,top
-
-
倒计时
-
语法:util.countdown(endTime,serverTime,calback)
-
endTime:结束时间戳或Date对象
-
serverTime:当前服务器时间戳或者date对象
-
callback:回调函数如果正在倒计时每秒执行一次返回三个参数
-
date
-
serverTime
-
timer
- 计时器返回的id值,用于clearTimeout
-
-
-
-
其它相关方法
-
util.timeAge(time,onlyDate)
- 某个时间在当前时间多久前
- time:时间戳或者日期对象
- onlyDate:是否在超过30天后,只返回日期
- 3分钟内:刚刚
- 30天内:若干分钟小时或者天前
- 30天以上,返回日期字符
-
util.toDateString(time,format)
- 转化时间戳或者日期对象为日期格式
- time:日期对象或者时间戳
- format:日期格式字符
-
util.digit(num,length)
- 如果num长度小于length在num前面补0
-
util.escape(str)
-
转义xss字符
- str为任意字符
-
-
util.event(attr,obj,eventType)
-
layactive='1'
- 元素的属性
-
attr:监听事件元素的属性
-
obj:事件回调,一堆触发函数
-
eventType:事件类型,默认click
-
-
code:代码修饰器
-
在pre标签中添加class="layui-code"
-
然后导入模块layui.code()
-
elem:绑定元素
-
title:设定标题
-
height:设置最大高度
-
encode:是否转义HTML标签默认false
-
skin
-
默认风格
-
skin: 'notepad'
- notepad++
-
-
about:是否剔除右上角关于
-
colorpicker:颜色选择器
-
颜色选择器
-
elem:绑定元素
-
color:默认颜色(支持各种格式)
-
format:颜色显示/输入格式,可选,(hex,rgb)
- 如果rgb开启透明度自动变成rgba,默认颜色黑色
-
alpha:是否开启透明度
-
predefine:预定义颜色是否开启
-
color:预定义颜色,需要predefine配合
-
size:下拉框大小
- lg
- sm
- xs
-
chang:function:颜色改变回调,参数是颜色
-
done:function:点击确认或者清除触发回调,返回当前颜色值
tree:树
-
语法:tree.render()
-
elem:绑定元素
-
data:数据源
- title:节点标题
- id:节点唯一索引
- field:节点字段名
- children:子节点,设定选项和父节点一样
- href:点击节点弹出新窗口对应url,需要开启isJump参数
- spread:节点是否初始展开,默认false
- checked:节点是否初始为选中状态,如果开启复选框默认false
- disabled:节点是否为禁用状态,默认false
-
id:设定实例唯一索引,用于基础方法传参使用
-
showCheckbox:是否显示复选框
-
edit:是否开启节点操作图标,默认false
- 如果为true按照数组顺序
- 目前支持edit:['add','update','del']
-
accordion:是否启用手风琴模式,默认false
-
onlylconControl:如果为true只能点击左侧图标收缩,默认false可以点击节点文本
-
isJump:是否允许点击节点弹出新窗口,默认false
-
showLine:是否开启连接线,默认true如果不开启左侧会出现三角图标
-
text:自定义各类默认文本
-
回调函数
-
click(obj)
-
obj.data:当前节点数据
-
obj.state:当前节点展开状态
- open
- close
- normal
-
obj.elem:当前节点元素
-
obj.data.children:当前节点下是否有子节点
-
-
oncheck
- obj.data:节点数据
- obj.checked:展开状态
- obj.elem:节点元素
-
operate操作节点回调
-
obj.type:操作类型
- add
- edit
- del
-
obj.data:当前节点数据
-
obj.elem:当前节点元素
-
-
tree.getChecked(id):获取选中的节点
-
tree.setChecked("id",[2,3,5]):批量勾选节点
-
transfer:穿梭框
-
elem:绑定元素
-
title:穿梭框上方标题
-
data:数据源
-
parseData:用于对数据源进行格式解析
-
合法格式
- [{"value":"1","title":"礼拜","disabled":"","checked":""}]
-
不合法
- [{"id":"1","name":"李白"}]
-
解析
- parseData:function(res){return{"value":res.id}}
-
-
value:初始选中的数据(右侧)
-
id:唯一实例索引
-
showSearch:是否开启搜索,默认false
-
width/height:定义左右穿梭框的宽度/高度
-
text:自定义文本
- 例如:none:'无数据'
- searchNone:'无匹配数据'
-
onchange:左右数据穿梭时的回调
-
基础方法
-
transfer.set(options);
- 设定全局默认参数
-
transfer.getData(id);
- 获取右侧数据
-
transfer.reload(id,options);
- 重载实例
-
upload:文件上传
-
文件上传本来只是一个button,upload给它特殊技能
-
upload.render()
-
elem:绑定元素
-
url:服务器上传接口
-
data:请求上传接口的额外参数
-
headers:接口请求的头
-
accept:上传校验文件类型
-
file
- 文件
-
images
- 图片
-
video
- 视频
-
audio
- 音频
-
-
acceptMinme:规定打开文件选择框时筛选文件类型
-
exts:允许上传文件后缀
- 例如:exts:'zip ar7z';
-
auto:是否选择完成自动上传,默认true
-
bintAction:如果自动上传为false这个用来绑定手动上传按钮
-
field:设定文件域或字段名
-
size:设置最大上传文件大小,KB
-
multiple:是否允许多文件上传,默认false
-
number:同上传文件数量
-
drag:是否接受拖拽上传文件
-
函数
-
choose():选择文件后的回调函数
-
before():文件提交上传前的回调
-
done():执行上传请求后的回调,三个参数
- res:服务端响应信息
- index:当前文件的索引
- upload:重新上传的方法,一般在上传失败的时候用
-
error():执行上传请求异常回调
-
laypage:分页
- laypage.render()
- elem:绑定元素
- count:数据总和,一般通过服务端得到
- limit:每页显示条数,默认10
- limits:每页条数选择项,默认array[10,20,30,40,50]
- curr:起始页
- groups:连续出现页码个数,默认5
- prev:自定义上一页内容,支持传入文本或者HTML
- next:自定义下一页
- first:自定义首页
- last:自定义尾页
- layout:自定义排版,默认array['prev','page','next']
- theme:自定义主题可以传入颜色值
- hash:开启location.hash,并自定义hash值
- jump:function:切换分页回调函数
table:表格
-
页面放置一个元素
-
elem:绑定元素
-
cols:设置表头
-
值是一个二维数组
-
field:字段名,唯一表示
-
title:设定标题,可以看到的
-
设定列宽,不写就自动分配,数字或者百分比
-
minWidth:局部定义当前常规单元格最小宽度,默认60,优先级高于cellMinWidth
-
type:设定列类型
- normal:常规无需设定
- checkbox:复选框列
- radio:单选框列
- numbers:序号列
- space:空列
-
LAY_CHECKED:是否全选状态,默认false,开启复选框列有效
-
fixed:固定列冻结
- left:固定在左
- right:固定在右
- 必须放在表头的最前或者最后
-
hide:是否隐藏列,默认false
-
totalRow:是否开启该列的自动合计功能,默认false
-
totalRowText:显示自定义合计文本
-
sort:是否允许排序,默认false,ASCII对比
-
unresize:是否禁止拖拽列宽,默认false
-
edit:单元格编辑类型,默认不开启,目前只支持text(输入框)
-
event:自定义单元格点击事件,可以在tool中完成对单元格的业务处理
-
style:自定义单元格样式,传入css样式
-
align:单元格排列方式
- left
- center
- right
-
colspan:单元格所占列数,默认1,用于多级表头
-
templet:自定义列模板
-
toolbar:绑定工具条模板
-
-
url:异步数据接口
-
url:接口地址默认传递两个参数
- ?page=1&limi=30
- page当前页码
- limit每页数据量
-
method:接口http请求类型,默认get
-
where:接口的其它参数
-
contentType:发送到服务端的内容编码类型
- 如果你要发送 json 内容，可以设置：contentType: 'application/json'
-
header:接口的请求头
-
parseData:数据格式解析回调函数
- parseData: function(res){ //res 即为原始返回的数据
return {
"code": res.status, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.total, //解析数据长度
"data": res.data.item //解析数据列表
};
}
- parseData: function(res){ //res 即为原始返回的数据
-
request:用于对分页请求的参数,pag/limit从新设定名称
-
response:重新设定返回数据格式
-
-
toolbar:开启表格头部工具栏,默认false
- toolbar:'#toolbarDemo' 指向自定义工具栏模板选择器
- toolbar:'xxx' 直接传入工具栏模板字符
- toolbar:true 只开启工具栏不显示左侧模板
- toolbar:'default' 让工具栏左侧显示默认的内置模板
-
defaultToolbar:可以自由配置表头工具栏右侧的图标按钮
- filter:显示筛选图标
- exports:显示导出图标
- print:显示打印图标
-
设定table容器宽度,如果内容超出会出现滚动条
-
height:容器高度
- 默认高度随数据适应
- 固定值:设定是一个数字,超高出现滚动条
- full-差值:高度始终铺满,无论浏览器尺寸
-
cellMinWidth:全局定义所有常规单元格的最小宽度,默认60
-
done:数据渲染完的回调,可以做一些其它操作
-
data:直接复制数据,array
-
totalRow:是否开启合计行区域
-
page:分页默认false
-
limit:每页显示的条数
-
limits:每页显示条数选择
- 默认:[10,20,30,....,90]
-
loading:是否显示加载条,默认true
-
title:定义table的大标题,文件导出用到
-
text:自定义文本,如空数据时的异常提示
-
autoSort:默认true,直接由table组件在前端自动处理排序
-
initSort:初始排序状态,默认按某个字段排序
-
id:设定容器唯一id
-
skin:设定表格外观尺寸
-
skin
- line:行边框
- row:列边框
- nob:无边框
-
even:是否开启隔行背景,默认false
-
size
- sm小尺寸
- lg大尺寸
-