Layer For Mobile

Layer For Mobile

         layer mobile是为移动设备（手机、平板等webkit内核浏览器/webview）量身定做的弹层UI。由于是采用原生 JavaScript编写，所有并不依赖任何第三方库。layer mobile完全独立于PC版的layer，您需要按照场景选择使用。layer mobile正致力于成为您WebApp开发过程中弹出交互的不二选择。

  /** 以下是小试牛刀的调用代码（此处不展示事件绑定）*/

  //信息框
  layer.open({
    content: '移动版和PC版不能同时存在同一页面'
    ,btn: '我知道了'
  });
  
  //提示
  layer.open({
    content: 'hello layer'
    ,skin: 'msg'
    ,time: 2 //2秒后自动关闭
  });
  
  //询问框
  layer.open({
    content: '您确定要刷新一下本页面吗？'
    ,btn: ['刷新', '不要']
    ,yes: function(index){
      location.reload();
      layer.close(index);
    }
  });
  
  //底部对话框
  layer.open({
    content: '这是一个底部弹出的询问提示'
    ,btn: ['删除', '取消']
    ,skin: 'footer'
    ,yes: function(index){
      layer.open({content: '执行删除操作'})
    }
  });
  
  //底部提示
  layer.open({
    content: '一个没有任何按钮的底部提示'
    ,skin: 'footer'
  });
  
  //自定义标题风格
  layer.open({
    title: [
      '我是标题',
      'background-color: #FF4351; color:#fff;'
    ]
    ,content: '标题风格任你定义。'
  });
  
  //页面层
  layer.open({
    type: 1
    ,content: '可传入任何内容，支持html。一般用于手机页面中'
    ,anim: 'up'
    ,style: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
  });
  
  //loading层
  layer.open({type: 2});
  
  //loading带文字
  layer.open({
    type: 2
    ,content: '加载中'
  });

功能说明

1)一个在底部弹出的完整对话框：

layer.open({
  title: [
    '我是标题',
    'background-color:#8DCE16; color:#fff;'
  ]
  ,anim: 'up'
  ,content: '展现的是全部结构'
  ,btn: ['确认', '取消']
});
样式展示:

2)设置3秒自动关闭：

layer.open({
  content: '通过style设置你想要的样式'
  ,style: 'background-color:#09C1FF; color:#fff; border:none;' //自定风格
  ,time: 3
});

3)设置不允许点遮罩关闭：

layer.open({
  content: '不允许点击遮罩关闭',
  btn: '我知道了',
  shadeClose: false,
  yes: function(){
    layer.open({
      content: '好的'
      ,time: 2
      ,skin: 'msg'
    });
  }
});

4)自定义一个全屏的页面层：

var pageii = layer.open({
  type: 1
  ,content: html
  ,anim: 'up'
  ,style: 'position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;'
});

和layer PC版不同的是，我们只提供一个核心调用方法，即：layer.open(options)。各类型的层你可以借助下面高度灵活的参数接口对layer.open进行二次封装。

参数

即核心接口：layer.open(options) 中的options：

type - 设置弹层的类型

类型：Number

默认：0 （0表示信息框，1表示页面层，2表示加载层）

content - 设置弹层内容

类型：String

必选参数

title - 设置弹层标题

类型：String或Array

默认：空，值可以为字符串或者数组。，为空则不显示

title: '标题'
//或者
title: ['标题', 'background-color: #eee;'] //第二个参数可以自定义标题的样式    
    

time - 控制自动关闭层所需秒数

类型：Number

默认不开启，支持整数和浮点数

style - 自定义层的样式

类型：String

非常实用，如

layer.open({
  style: 'border:none; background-color:#78BA32; color:#fff;',
  content:'内容'
})
运行  

skin - 设定弹层显示风格

类型：String

目前支持配置 footer（即底部对话框风格）、msg（普通提示） 两种风格。

className - 自定义一个css类

类型：String

用于自定义样式。如

layer.open({
  className: 'popuo-login', //这样你就可以在css里面控制该弹层的风格了
  content:'内容'
})
    

btn - 按钮

类型：String/Array

不设置则不显示按钮。如果只需要一个按钮，则btn: '按钮'，如果有两个，则：btn: ['按钮一', '按钮二']。

anim - 动画类型

类型：String/Boolean

可支持的支持动画配置：scale（默认）、up（从下往上弹出），如果不开启动画，设置false即可

shade - 控制遮罩展现

类型：String/Boolean

默认：true，该参数可允许你是否显示遮罩，并且定义遮罩风格

shade: false //不显示遮罩
或者
shade: 'background-color: rgba(0,0,0,.3)' //自定义遮罩的透明度    
    

shadeClose

类型：Boolean

默认：true，是否点击遮罩时关闭层

fixed - 是否固定层的位置

类型：Boolean

默认：true

top - 控制层的纵坐标

类型：Number

默认：无，一般情况下不需要设置，因为层会始终垂直水平居中，只有当fixed: false时top才有效。

success - 层成功弹出层的回调

类型：Function

该回调参数返回一个参数为当前层元素对象

success: function(elem){
  console.log(elem);
}    

yes

类型：Function

点确定按钮触发的回调函数，返回一个参数为当前层的索引

yes: function(index){
  alert('点击了是')
  layer.close(index)
}    

no

类型：Function

点取消按钮触发的回调函数

end

类型：Function

层彻底销毁后的回调函数

其它内置方法/属性

layer.v

返回当前使用的layer mobile版本号

layer.close(index)

用于关闭特定层，index为该特定层的索引

layer.closeAll()

关闭页面所有layer的层

开发文档链接:http://www.layui.com/doc/