layer mobile 2.0 弹窗层UI（备份篇）

最近在写新的页面时候，想起了前段时间开的产品优化会议，手机端有很多旧 pc 端的习惯

问题：
用户使用流程中过多的弹窗以及反复确认
打断用户使用流程，过多的层次分格

在写新页面时候选择放弃以前的形式，寻找新的效果，保证既能提示用户，也能不打断用户体验的效果。

需求

轻量化，简单易用
方便的接口
利于后期修改代码（开源的代码）
大量的用户使用

Layer 弹层组件（移动版）

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

一个简单方便的弹层插件，基本的都够用
奇迹的发现 2016 年是最后一次的更新，不知道是什么原因不更新了，但是现有的已经足够强大了
pc 端的 Layer 弹窗层组件也是很强大的，但是这里主要用的是他的移动版本
官方的文档感觉也不更新了，下载地址也有问题了，只能从Github上手动复制下来了
自己的使用的插件 api 丢失，那就很悲催了，所以才有了此篇

v2.0（2016.08.26）
新增底部对话框风格（类似手机 QQ），详见官网 demo。新增 skin 参数，目前支持配置 footer（即底部对话框风格）、msg（普通提示）两种风格。默认 90%的自适应宽度（为了在移动设备上显得大气些）。 anim 参数改造，支持动画配置 scale（默认）、up。 loading 层支持传递 content，如：layer.open({type: 2, content: ‘加载中’})。 btn 参数如果只需要一个按钮，则 btn: ‘按钮’，如果有两个，则：btn: [‘按钮一’, ‘按钮二’]。修复与部分样式的冲突。结构大幅度优化。移除右上角关闭 icon，因为并没有实际卵用。

以下内容都是从官方搬运过来的，建议下载源码在本地测试,地址: layer.layui.com/mobile/

1、Layer 小试牛刀

一共分为以下几个功能

信息框
提示
询问框
底部对话框
底部提示
自定义标题
页面层
loading 层
loading 带文字

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
/** 以下是小试牛刀的调用代码（此处不展示事件绑定）*/

//信息框
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: "加载中",
});

2、功能说明

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

1
2
3
4
5
6
layer.open({
  title: ["我是标题", "background-color:#8DCE16; color:#fff;"],
  anim: "up",
  content: "展现的是全部结构",
  btn: ["确认", "取消"],
});

设置 3 秒自动关闭：

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

设置不允许点遮罩关闭：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
layer.open({
  content: "不允许点击遮罩关闭",
  btn: "我知道了",
  shadeClose: false,
  yes: function () {
    layer.open({
      content: "好的",
      time: 2,
      skin: "msg",
    });
  },
});

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

1
2
3
4
5
6
7
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 所有的接口，它们会帮助你完成形形色色的展现形式。

因篇幅有限具体的文档说明在另外的页面中地址:待更新