弹出层layer的使用
Intro
layer是一款web弹层组件，致力于服务各个水平段的开发人员。layer官网：http://layer.layui.com/
layer侧重于用户灵活的自定义，为不同人的使用习惯提供动力。其意义在于，可以让您的页面拥有更丰富与便捷的操作体验，而您只需在调用时简单地配置相关参数，即可轻松实现。
layer.msg
语法：layer.msg(content[, options][, end]) 提示框
layer.msg('这里是msg内容');
layer.msg('这里是msg内容',{icon:1});
layer.msg('关闭后想做些什么', function(){
//do something
});
layer.msg('同上', {
icon: 1,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function(){
//do something
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
layer.alert
语法：layer.alert(content[, options][, yes]) 普通信息框
//eg1
layer.alert('只想简单的提示');
//eg2
layer.alert('加了个图标', {icon: 1}); //这时如果你也还想执行yes回调，可以放在第三个参数中。
//eg3
layer.alert('有了回调', function(index){
//do something
layer.close(index);
}); - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
layer.confirm
语法：layer.confirm(content[, options], yes[, cancel]) 询问框
//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);
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
layer.propmt
语法：layer.prompt([options,] yes) 输入层/询问层
//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: '这里是title'
}, function(value, index, elem){
alert(value); //得到value
layer.close(index);
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
layer.open
语法：layer.open(options) 原始核心方法
基本上是露脸率最高的方法，不管是使用哪种方式创建层，都是走layer.open()，创建任何类型的弹层都会返回一个当前层索引，上述的options即是基础参数，另外，该文档统一采用options作为基础参数的标识
//example1:
var index = layer.open({
content: 'test'
});
//拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。
//example2
layer.open({
type: 1 //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
,title: 'title here'
,area: ['390px', '330px']
,shade: 0.4
,content: $("#test") //支持获取DOM元素
,btn: ['yes', 'close'] //按钮
,scrollbar: false //屏蔽浏览器滚动条
,yes: function(index){
//layer.msg('yes');
layer.close(index);
showToast();
}
,btn2: function(){
//layer.alert('aaa',{title:'msg title'});
layer.msg('bbb');
//layer.closeAll();
}
}); - 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
layer.load
语法：layer.load(icon, options) 加载层
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);- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
layer.tab
语法：layer.tab(options) tab层
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}]
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
demo.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>layer-更懂你的web弹窗解决方案</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script src="layer/extend/layer.ext.js"></script>
</head>
<body>
<script>
function func1() {
layer.alert('内容');
}
function func2() {
layer.alert('内容', {
icon: 1,
skin: 'layer-ext-moon'
});
}
function func3() {
//询问框
layer.confirm('您是如何看待前端开发？', {
btn: ['重要', '奇葩'] //按钮
}, function() {
layer.msg('的确很重要', { icon: 1 });
}, function() {
layer.msg('也可以这样', {
time: 2000, //2s后自动关闭
btn: ['明白了', '知道了']
});
});
}
function func4() {
//提示层
layer.msg('玩命提示中');
}
function func5() {
//墨绿深蓝风
layer.alert('墨绿风格，点击确认看深蓝', {
skin: 'layui-layer-molv' //样式类名
,
closeBtn: 0
}, function() {
layer.alert('偶吧深蓝style', {
skin: 'layui-layer-lan',
closeBtn: 0,
shift: 4 //动画类型
});
});
}
function func6() {
//捕获页
layer.open({
type: 1,
shade: false,
title: false, //不显示标题
content: $('.layer_notice'), //捕获的元素
cancel: function(index) {
layer.close(index);
this.content.show();
layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 2000, icon: 6 });
}
});
}
function func7() {
//页面层
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['420px', '240px'], //宽高
content: 'html内容'
});
}
function func8() {
//自定页
layer.open({
type: 1,
skin: 'layui-layer-demo', //样式类名
closeBtn: 0, //不显示关闭按钮
shift: 2,
area: ['420px', '240px'], //宽高
shadeClose: true, //开启遮罩关闭
content: '内容'
});
}
function func9() {
//tips层
layer.tips('Hi，我是tips', $("#tips"));
}
function func10() {
//iframe层
layer.open({
type: 2,
title: 'layer mobile页',
shadeClose: true,
shade: 0.8,
area: ['380px', '90%'],
content: 'http://m.baidu.com' //iframe的url
});
}
function func11() {
//iframe窗
layer.open({
type: 2,
title: false,
closeBtn: 0, //不显示关闭按钮
shade: [0],
area: ['340px', '215px'],
offset: 'auto', //右下角弹出
time: 2000, //2秒后自动关闭
shift: 2,
content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条
end: function() { //此处用于演示
layer.open({
type: 2,
title: '百度一下，你就知道',
shadeClose: true,
shade: false,
maxmin: true, //开启最大化最小化按钮
area: ['1150px', '650px'],
content: 'http://www.baidu.com'
});
}
});
}
function func12() {
//加载层
var index = layer.load(0, { shade: false }); //0代表加载的风格，支持0-2
}
function func13() {
//loading层
var index = layer.load(1, {
shade: [0.1, '#fff'] //0.1透明度的白色背景
});
}
function func14() {
//小tips
layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', $('#tips2'), {
tips: [1, '#3595CC'],
time: 4000
});
}
function func15() {
//prompt层
layer.prompt({
title: '输入任何口令，并确认',
formType: 1 //prompt风格，支持0-2
}, function(pass) {
layer.prompt({ title: '随便写点啥，并确认', formType: 2 }, function(text) {
layer.msg('演示完毕！您的口令：' + pass + ' 您最后写下了：' + text);
});
});
}
function func16() {
//tab层
layer.tab({
area: ['600px', '300px'],
tab: [
{
title: 'TAB1',
content: '内容1'
}, {
title: 'TAB2',
content: '内容2'
}, {
title: 'TAB3',
content: '内容3'
}
]
});
}
function openpage() {
layer.config({
extend: 'extend/layer.ext.js'
});
//页面一打开就执行，放入ready是为了layer所需配件（css、扩展模块）加载完毕
layer.ready(function() {
//官网欢迎页
layer.open({
type: 2,
skin: 'layui-layer-lan',
title: 'layer弹层组件',
fix: false,
shadeClose: true,
maxmin: true,
area: ['1000px', '500px'],
content: 'https://www.baidu.com'
});
layer.msg('欢迎使用layer');
});
}
</script>
<div class="layer_notice">hello,i'm layer!</div>
<button id="tips">tips</button>
<button id="tips2">tips2</button>
<button id="func1" onclick=" func1(); ">初体验</button>
<button id="func2" onclick=" func2(); ">皮肤</button>
<button id="func3" onclick=" func3(); ">询问框</button>
<button id="func4" onclick=" func4(); ">提示层</button>
<button id="func5" onclick=" func5(); ">蓝色风格</button>
<button id="func6" onclick=" func6(); ">捕捉页</button>
<button id="func7" onclick=" func7(); ">页面层</button>
<button id="func8" onclick=" func8(); ">自定义</button>
<button id="func9" onclick=" func9(); ">tips层</button>
<button id="func10" onclick=" func10(); ">iframe层</button>
<button id="func11" onclick=" func11(); ">iframe窗</button>
<button id="func12" onclick=" func12(); ">加载层</button>
<button id="func13" onclick=" func13(); ">loading层</button>
<button id="func14" onclick=" func14(); ">小tips</button>
<button id="func15" onclick=" func15(); ">prompt层</button>
<button id="func16" onclick=" func16(); ">tab层</button>
<button id="openpage" onclick=" openpage(); ">openpage</button>
</body>
</html>- 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
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
运行结果如图:
706
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
