layui这款插件我很喜欢，特意总结如下：
欢迎加我技术交流QQ群 ：811956471
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layer_moblie/layer_mobile/need/layer.css" media="all">
<script src="layer_moblie/layer_mobile/layer.js" charset="utf-8"></script>
<title></title>
<style type="text/css">
button {
display: block;
margin: 0 auto;
margin-bottom: 30px;
width: 50%;
padding: 10px 0;
}
</style>
</head>
<body>
<p class="demo" id="trys" style="margin-top: 20px;">
<button onclick="demo1()">1.信息框</button>
<button onclick="demo2()">2.提示</button>
<button onclick="demo3()">3.询问框</button>
<button onclick="demo4()">4.底部对话框</button>
<button onclick="demo4()">5.底部提示</button>
<button onclick="demo6()">6.自定义标题风格</button>
<button onclick="demo7()">7.页面层</button>
<button onclick="demo8()">8.loading层</button>
<button onclick="demo9()">9.loading带文字</button>
</p>
<script type="text/javascript">
//1.信息框
function demo1() {
layer.open({
content: '移动版和PC版不能同时存在同一页面',
btn: '我知道了'
});
}
//2.提示
function demo2() {
layer.open({
content: 'hello layer',
style: 'background-color:#09C1FF; color:#fff; border:none;', //可以通过 style 自定风格
skin: 'msg',
time: 2 //2秒后自动关闭
});
}
//3.询问框
function demo3() {
layer.open({
content: '您确定要刷新一下本页面吗？',
btn: ['刷新', '不要'],
yes: function(index) {
alert(index)
location.reload();
layer.close(index);
},
no:function(){
layer.open({
content: '您点击了不要'
})
}
});
}
//4.底部对话框
function demo4() {
layer.open({
content: '这是一个底部弹出的询问提示',
btn: ['删除', '取消'],
skin: 'footer',
yes: function(index) {
layer.open({
content: '执行删除操作'
})
},
no:function(){
layer.open({
content: '您点击了取消'
})
}
});
}
//5.底部提示
function demo5() {
layer.open({
content: '一个没有任何按钮的底部提示',
skin: 'footer'
});
}
//6.自定义标题风格
function demo6() {
layer.open({
title: [
'我是标题',
'background-color: #FF4351; color:#fff;'
],
content: '标题风格任你定义。'
});
}
//7.页面层 type - 设置弹层的类型 默认：0 （0表示信息框，1表示页面层，2表示加载层）
function demo7() {
layer.open({
type: 1,
content: '可传入任何内容，支持html。一般用于手机页面中',
anim: 'up',
style: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
});
}
//8.loading层
function demo8() {
layer.open({
type: 2
});
}
//9.loading带文字
function demo9() {
layer.open({
type: 2,
shadeClose:false,
content: '加载中...'
});
}
/*说明*/
// 1.type - 设置弹层的类型 类型：Number 默认：0 （0表示信息框，1表示页面层，2表示加载层）;
// 2.content - 设置弹层内容 类型：String 必选参数;
// 3.title - 设置弹层标题 类型：String或Array 默认：空，值可以为字符串或者数组。，为空则不显示。title: '标题',或者title: ['标题', 'background-color: #eee;'] ，第二个参数可以自定义标题的样式
//4.time - 控制自动关闭层所需秒数 类型：Number 默认不开启，支持整数和浮点数
//5.style - 自定义层的样式 类型：String 如:layer.open({style: 'border:none; background-color:#78BA32; color:#fff;',content:'内容'})
//6.skin - 设定弹层显示风格 类型：String 目前支持配置 footer（即底部对话框风格）、msg（普通提示） 两种风格。
//7.className - 自定义一个css类 类型：String 如:layer.open({ className: 'popuo-login', //这样你就可以在css里面控制该弹层的风格了,content:'内容'})
//8.btn - 按钮 类型：String/Array 不设置则不显示按钮。如果只需要一个按钮，则btn: '按钮'，如果有两个，则：btn: ['按钮一', '按钮二']。
//9.anim - 动画类型 类型：String/Boolean 可支持的支持动画配置：scale（默认）、up（从下往上弹出），如果不开启动画，设置false即可
//10.shade - 控制遮罩展现 类型：String/Boolean 默认：true，该参数可允许你是否显示遮罩，并且定义遮罩风格:shade: false //不显示遮罩;shade: 'background-color: rgba(0,0,0,.3)' //自定义遮罩的透明度
//11.shadeClose -类型：Boolean 默认：true，是否点击遮罩时关闭层
//12.fixed - 是否固定层的位置 类型：Boolean 默认：true
//13.top - 控制层的纵坐标 类型：Number 默认：无，一般情况下不需要设置，因为层会始终垂直水平居中，只有当fixed: false时top才有效。
//14.success - 层成功弹出层的回调 类型：Function 该回调参数返回一个参数为当前层元素对象 success: function(elem){console.log(elem);}
//15.yes - 类型：Function 点确定按钮触发的回调函数，返回一个参数为当前层的索引 yes: function(index){layer.close(index)};
//16.no - 类型：Function 点取消按钮触发的回调函数
//17.end - 类型：Function 层彻底销毁后的回调函数
//18.layer.close(index) 用于关闭特定层，index为该特定层的索引
//19.layer.closeAll() 关闭页面所有layer的层
</script>
</body>
</html>
网友评论