mirror of https://github.com/layui/layui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
3.1 KiB
118 lines
3.1 KiB
|
|
|
|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> |
|
<title>layer 弹层 - layui</title> |
|
|
|
<link rel="stylesheet" href="../src/css/layui.css"> |
|
|
|
<style> |
|
body{padding: 100px;} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div class="layui-btn-container"> |
|
<button class="layui-btn layui-btn-primary demo" data-type="test">Alert</button> |
|
<button class="layui-btn demo" data-type="test2">Confirm</button> |
|
<button class="layui-btn demo" data-type="test3">Msg</button> |
|
<button class="layui-btn demo" data-type="test4">Tips</button> |
|
<button class="layui-btn demo" data-type="test5">Page</button> |
|
<button class="layui-btn demo" data-type="test6">Iframe</button> |
|
<button class="layui-btn demo" data-type="test7">Prompt</button> |
|
<button class="layui-btn demo" data-type="test8">Tab</button> |
|
<a href="http://layer.layui.com/" target="_blank" class="layui-btn demo">更多例子</a> |
|
</div> |
|
|
|
<div id="test11111" style="display: none;padding: 20px;"> |
|
123 |
|
</div> |
|
|
|
|
|
<script src="../src/layui.js"></script> |
|
<script> |
|
layui.use('layer', function(){ |
|
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句 |
|
|
|
|
|
var index = layer.msg('hello'); |
|
//layer.close(index); |
|
|
|
//触发事件 |
|
var active = { |
|
test: function(){ |
|
layer.alert('你好么，体验者'); |
|
} |
|
,test2: function(){ |
|
layer.confirm('您是如何看待前端开发？', { |
|
btn: ['重要','奇葩'] //按钮 |
|
}, function(){ |
|
layer.msg('的确很重要', {icon: 1}); |
|
}, function(){ |
|
layer.msg('也可以这样', { |
|
time: 20000, //20s后自动关闭 |
|
btn: ['明白了', '知道了'] |
|
}); |
|
}); |
|
} |
|
,test3: function(){ |
|
layer.msg('玩命提示中'); |
|
} |
|
,test4: function(){ |
|
layer.tips('Hi，我是一个小提示', this, {tips: 1}); |
|
} |
|
,test5: function(){ |
|
layer.open({ |
|
title:'更新论坛信息', |
|
type: 1, |
|
skin: 'layui-layer-rim', |
|
area: ['1000px', '580px'], |
|
content: $('#test11111') |
|
}); |
|
} |
|
,test6: function(){ |
|
layer.open({ |
|
type: 2 |
|
,content: 'https://www.aliyun.com/activity?userCode=ap0255is' |
|
,area: ['375px', '500px'] |
|
,maxmin: true |
|
}); |
|
} |
|
,test7: function(){ |
|
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){ |
|
layer.close(index); |
|
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){ |
|
layer.close(index); |
|
layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text); |
|
}); |
|
}); |
|
} |
|
,test8: function(){ |
|
layer.tab({ |
|
area: ['600px', '300px'], |
|
tab: [{ |
|
title: 'TAB1', |
|
content: '内容1' |
|
}, { |
|
title: 'TAB2', |
|
content: '内容2' |
|
}, { |
|
title: 'TAB3', |
|
content: '内容3' |
|
}] |
|
}); |
|
} |
|
|
|
}; |
|
|
|
$('.demo').on('click', function(){ |
|
var type = $(this).data('type'); |
|
active[type] ? active[type].call(this) : ''; |
|
}); |
|
}); |
|
</script> |
|
</body> |
|
</html>
|
|
|