layer弹层组件移动版介绍以及使用方法示例代码
1、layer mobile 是为移动设备（手机、平板等webkit内核浏览器/webview）量身定做的弹层UI。由于是采用原生 JavaScript编写，所有并不依赖任何第三方库。layer mobile完全独立于PC版的layer，您需要按照场景选择使用。
和layer PC版不同的是，只提供一个核心调用方法，即：layer.open(options)
layer移动版弹层 地址：
layer移动版弹层 API地址：
PC版的layer弹层 API地址：
前端UI框架layui官网：
layer弹层组件PC版介绍以及使用方法示例代码：
2、layer弹出层移动版轻量级，在官网下载layer移动版包后，引入layer.css 和 layer.js就可以使用，非常好用，pc端也能使用。示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>layer弹层组件移动版</title>
<link rel="stylesheet" href="layer/mobile/need/layer.css">
<style>
button {
height: 35px;
line-height: 35px;
border-radius: 2px;
background-color: #1AA094;
color: #fff;
border: none;
margin-bottom: 10px;
}
</style>
</head>
<body>
<button id="btn1">信息框</button>
<button id="btn2">提示</button>
<button id="btn3">询问框</button>
<button id="btn4">底部对话框</button>
<button id="btn5">底部提示</button>
<button id="btn6">自定义标题风格</button>
<button id="btn7">页面层</button>
<button id="btn8">loading层</button>
<button id="btn9">loading带文字</button>
</body>
</html>
<script src="../jquery.min.js"></script>
<script src="layer/mobile/layer.js"></script>
<script>
$("#btn1").on("click", function () {
//信息框
layer.open({
content: 移动版和PC版不能同时存在同一页面
, btn: 我知道了
});
});
$("#btn2").on("click", function () {
//提示
layer.open({
content: hello layer
, skin: msg
, time: 2 //2秒后自动关闭
});
});
$("#btn3").on("click", function () {
//询问框
layer.open({
content: 您确定要刷新一下本页面吗？
, btn: [刷新, 不要]
, yes: function (index) {
location.reload();
layer.close(index);
}
});
});
$("#btn4").on("click", function () {
//底部对话框
layer.open({
content: 这是一个底部弹出的询问提示
, btn: [删除, 取消]
, skin: footer
, yes: function (index) {
layer.open({content: 执行删除操作})
}
});
});
$("#btn5").on("click", function () {
//底部提示
layer.open({
content: 一个没有任何按钮的底部提示
, skin: footer
});
});
$("#btn6").on("click", function () {
//自定义标题风格
layer.open({
title: [
我是标题,
background-color: #FF4351; color:#fff;
]
, content: 标题风格任你定义。
});
});
$("#btn7").on("click", function () {
//页面层
layer.open({
type: 1
, content: 可传入任何内容，支持html。一般用于手机页面中
, anim: up
, style: position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;
});
});
$("#btn8").on("click", function () {
//loading层
layer.open({type: 2});
});
$("#btn9").on("click", function () {
//loading带文字
layer.open({
type: 2
, content: 加载中
});
});
</script>