require(['jquery', 'layer'], function($, layer) {
var options = {
/*
基本层类型
0 (信息框,默认)
1 (页面层)
2 (iframe层)
3 (加载层)
4 (tips层)
*/
type: 0,
/*
标题
String (title :'我是标题')
Array (title: ['文本', 'font-size:18px;'])
Boolean (title: false)
*/
title: '我是标题',
/*
内容
String (content: '我是内容')
DOM (content: $('#id'))
Array (content: ['内容', '#id'] 数组第二项即吸附元素选择器或者DOM)
*/
content: '我是内容',
/*
样式类名
String
*/
skin: 'skin-css',
/*
宽高
String (area: '500px')
Array (area: ['500px', '300px'])
*/
area: 'auto',
/*
坐标
String (offset: '100px')
Array (offset: ['100px', '200px'])
*/
offset: 'auto',
/*
图标
Number 信息框(0-6) 加载层(0-2)
*/
icon: 1,
/*
按钮
String (btn: '我知道了')
Array (btn: ['yes', 'no'],btn: ['按钮1', '按钮2', '按钮3', …])
*/
btn: ['yes', 'no'],
/*
关闭按钮
String (0,1,2)
Boolean (true,false)
*/
closeBtn: 1,
/*
遮罩
String (shade: 0) 取消遮罩
Array (shade: [0.8, '#393D49'])
Boolean
*/
shade: 0.2,
/*
是否点击遮罩关闭
Boolean (true\false)
*/
shadeClose: true,
/*
自动关闭所需毫秒
Number 0 ( 0 默认不会自动关闭)
*/
time: 0,
/*
用于控制弹层唯一标识
String 置该值后,只允许同时弹出一个
*/
id: 'layer_id',
/*
动画
Number (0-6) 默认:0
*/
shift: 1,
/*
最大最小化
Boolean (false) 参数值对type:1和type:2有效
*/
maxmin: false,
/*
固定
Boolean (true)
*/
fix: true,
/*
最大宽度
当area: 'auto'时,maxWidth的设定才有效。
*/
maxWidth: 360,
/*
层叠顺序
*/
zIndex: 19891014,
/*
触发拖动的元素
*/
move: '.layui-layer-title',
/*
拖拽风格
Number:0,1
*/
moveType: 1,
/*
是否允许拖拽到窗口外
Boolean false
*/
moveOut: false,
/*
拖动完毕后的回调方法
*/
moveEnd: function() {
console.log('moveEnd');
},
/*
tips方向和颜色
tips层的私有参数
Number (tips:2) 上,右,下,左 对应 1-4
Array (tips: [1, '#c00'])
*/
tips: 2,
/*
是否允许多个tips
Boolean false
*/
tipsMore: false,
// 层弹出后的成功回调方法
success: function(layero, index) {
console.log(layero, index);
},
// 确定按钮回调方法
yes: function(index, layero) {
console.log(index, layero);
},
// 取消和关闭按钮触发的回调
cancel: function(index) {
console.log(index)
},
// 层销毁后触发的回调
end: function() {
},
// full/min/restore 分别代表最大化、最小化、还原 后触发的回调
};
$('#btn').click(function() {
// 原始核心方法 layer.open(options)
layer.open(options);
// 普通信息框 layer.alert(content, options, yes)
layer.alert('我是内容', options);
// 询问框 layer.confirm(content, options, yes, cancel)
layer.confirm('我是内容', options, yes, cancel);
// 提示框 layer.msg(content, options, end)
layer.msg('我是内容', { time: 2000 }) ;
// 加载层 layer.load(icon, options)
layer.load(2, { time: 2000 });
// tips层 layer.tips(content, follow, options)
var _this = this;
layer.tips('我是内容', _this, { tips: 2 });
// 关闭特定层 layer.close(index)
// 关闭所有层 layer.closeAll(type) type(dialog , page , iframe , loading , tips )
// 改变层的标题 layer.title(title, index)
// 置顶当前窗口 layer.setTop(layero)
// 手工执行最大小化 layer.full()、layer.min()、layer.restore()
})
})
参考文献
网友评论