前端ui框架layui——layer弹出层-弹出框方法

——————————弹出框方法—————————————————

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

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

layer.open ({
type : 1,
title : '测试',
id: 'myp',
btn: ['确认','删除'],
area: ['420px', '240px'], //宽高
content : '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;"><input type="te" />你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>',
success : function (layero,index) {
var btn = layero.find('.layui-layer-btn0');
console.log(btn)
},
yes: function(index, layero){
console.log(index)
layer.close(index); //如果设定了yes回调，需进行手工关闭
},
cancel: function(){
layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
}
})

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

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

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

layer.close(index);
});

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

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

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

layer.close(index);
});
//eg2
layer.confirm('is not?', function(index){
//do something
layer.close(index);
});

4.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
});

5.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);

6.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
});

7.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); //得到value
layer.close(index);
});

//例子2
layer.prompt({
formType: 2,
value: '初始值',
title: '请输入值',
area: ['800px', '350px'] //自定义文本域宽高
}, function(value, index, elem){
alert(value); //得到value
layer.close(index);
});

8.layer.tab(options) - tab层

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

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

9.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参数）
});
});

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

阅读更多