在layUi中弹出层是最常用的组件之一,今天我就简单介绍一下它的基础参数
1,内置方法:
layer.open、layer.msg
2,type - 基本层类型
5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。 若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)
3,title - 标题
3-1:传入普通的字符串,只会改变标题文本,title :‘标题’
3-2:自定义标题区域样式,title: [‘标题’, ‘font-size:18px;’]
3-3:不显示标题栏:title: false
4,content - 内容
content可传入的值是灵活多变的,不仅可以传入普通的html内容,还可以指定DOM,更可以随着type的不同而不同。
类型 1 常用的两种方式:
layer.open({
type: 1,
content: '内容' //这里content是一个普通的String
});
layer.open({
type: 1,
content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
});
类型 2
layer.open({
type: 2,
content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
});
5,area - 宽高
在默认状态下,layer是宽高都自适应的,但当你只想定义宽度时,你可以area: ‘500px’,高度仍然是自适应的。当你宽高都要定义时,你可以area: [‘500px’, ‘300px’]
6,btn - 按钮
信息框模式时,btn默认是一个确认按钮,其它层类型则默认不显示,加载层和tips层则无效。当您只想自定义一个按钮时,你可以btn: ‘ok’,当你要定义两个按钮时,你可以btn: [‘yes’, ‘no’]。也可以定义更多按钮,比如:btn: [‘按钮1’, ‘按钮2’, ‘按钮3’, …],按钮1的回调是yes,而从按钮2开始,则回调为btn2: function(){}
示例:
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 开启该代码可禁止点击该按钮关闭
}
});
7,btnAlign - 按钮排列
可以快捷定义按钮的排列位置,btnAlign的默认值为r,即右对齐。
btnAlign: ‘l’ 按钮左对齐
btnAlign: ‘c’ 按钮居中对齐
btnAlign: ‘r’ 按钮右对齐。默认值,不用设置
在这里我就只简单介绍了一些我们常用的类型,还有
closeBtn - 关闭按钮
shade - 遮罩
anim - 弹出动画
id - 用于控制弹层唯一标识等等一些可以查看相关文档
https://www.layui.com/doc/modules/layer.html
我的一些代码:
layer.open({
type: 1
,title:'查看详情' //标题
,closeBtn: 1
,area: '400px;'
,shade: false
,id: 'LAY_layuipro' //设定一个id,防止重复弹出
,btn: ['确定']
,btnAlign: 'c'
,moveType: 1 //拖拽模式,0或者1
,content: '<div align="center" style="padding: 30px; line-height: 20px; " >'
+'员工编号<input type="text" name="wid" autocomplete="off" class="layui-input" value="'+v.wid+'" style="width: 300px;text-align: center"><br>'
+'员工姓名<input type="text" name="wname" autocomplete="off" class="layui-input" value="'+v.wname+'" style="width: 300px;text-align: center"><br>'
+'员工年龄<input type="text" name="wage" autocomplete="off" class="layui-input" value="'+v.wage+'" style="width: 300px;text-align: center"><br>'
+'员工性别<input type="text" name="wsex" autocomplete="off" class="layui-input" value="'+v.wsex+'" style="width: 300px;text-align: center"><br>'
+'员工电话<input type="text" name="wnum" autocomplete="off" class="layui-input" value="'+v.wnum+'" style="width: 300px;text-align: center"><br>'
+'员工职位<input type="text" name="wjob" autocomplete="off" class="layui-input" value="'+v.wjob+'" style="width: 300px;text-align: center"><br>'
+'员工薪资<input type="text" name="wsalary" autocomplete="off" class="layui-input" value="'+v.wsalary+'" style="width: 300px;text-align: center"><br>'
+'</div>'
});
这是我的content采用传入字符串,拼接的表单效果
layer.open({
type: 1
,title:'查看详情' //标题
,closeBtn: false
,area: '400px;'
,shade: false
,id: 'LAY_layuipro' //设定一个id,防止重复弹出
,btn: ['确定','重置']
,btnAlign: 'c'
,moveType: 1 //拖拽模式,0或者1
,content:$('#addw')
,yes: function (index, layero) {//确定执行函数
$.getJSON(ip+"/sy/worker_addWorker.action", {
name: $("#name").val(),
age:$('#age').val(),
sex:$('#sex').val(),
num:$('#num').val(),
job:$('#job').val(),
salary:$('#dalary').val()
},function (res){
var v = eval('(' + res + ')');
if(v.code>0){
layer.msg(v.msg)
}else{
layer.msg('添加失败!')
}
layer.close(index);
table.reload('idTest', {//重载表格
page: {
curr: 1
}
})
})
},cancel:function (index, layero) {//取消
$("#addworker")[0].reset();//重置form 根据id
layer.close(index);
}
});
这是我content采用DOM的方式,还有两个自定义按钮及其回调函数