init
This commit is contained in:
170
public/frontend/layui-main/docs/layer/examples/more.md
Executable file
170
public/frontend/layui-main/docs/layer/examples/more.md
Executable file
@@ -0,0 +1,170 @@
|
||||
<div class="layui-btn-container">
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-max">
|
||||
最大化弹出
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-scrollbar">
|
||||
弹出时屏蔽浏览器滚动条
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-lockscreen">
|
||||
页面锁屏 <span class="layui-badge-dot"></span>
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-shade">
|
||||
自定义遮罩颜色和透明度
|
||||
</button>
|
||||
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-more-stack">
|
||||
<span class="layui-badge-dot"></span> 多窗口模式 + 层叠置顶 + Esc 关闭
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.class-demo-layer-lockscreen{background: url(https://unpkg.com/outeres@0.0.12/img/wallpaper/001.jpg) #16b777; background-size: cover; color: rgba(255,255,255,1);}
|
||||
.class-demo-layer-lockscreen .layui-form{position: absolute; top: 50%; left: 50%; width: 300px; transform: translate(-50%, -50%);}
|
||||
.class-demo-layer-lockscreen .layui-form > div{margin-bottom: 8px;}
|
||||
.class-demo-layer-pin{width: 100%; height: 38px; padding: 0 8px; background-color: rgba(255,255,255,.8); border: none; border-radius: 3px; box-sizing: border-box;}
|
||||
.class-demo-layer-lockscreen .layui-input-suffix{pointer-events: auto; background-color: rgba(0,0,0,.5); border-radius: 0 3px 3px 0;}
|
||||
.class-demo-layer-lockscreen .layui-input-suffix .layui-icon-right{cursor: pointer; color: #fff;}
|
||||
</style>
|
||||
|
||||
<!-- import layui -->
|
||||
<script>
|
||||
layui.use(function(){
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
var form = layui.form;
|
||||
var $ = layui.$;
|
||||
|
||||
// 事件
|
||||
util.on('lay-on', {
|
||||
'test-more-max': function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
content: '<div style="padding: 16px;">任意 HTML 内容</div>',
|
||||
area: ['320px', '195px'], // 初始宽高
|
||||
maxmin: true,
|
||||
success: function(layero, index){
|
||||
layer.full(index); // 最大化
|
||||
}
|
||||
});
|
||||
},
|
||||
'test-more-scrollbar': function(){
|
||||
layer.open({
|
||||
content: '浏览器滚动条已暂时屏蔽，关闭弹层后自动恢复',
|
||||
scrollbar: false
|
||||
});
|
||||
},
|
||||
'test-more-lockscreen': function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: false, // 禁用标题栏
|
||||
closeBtn: false, // 禁用默认关闭按钮
|
||||
area: ['100%', '100%'],
|
||||
scrollbar: false, // 暂时屏蔽浏览器滚动条
|
||||
anim: -1, // 禁用弹出动画
|
||||
isOutAnim: false, // 禁用关闭动画
|
||||
id: 'ID-layer-demo-inst',
|
||||
skin: 'class-demo-layer-lockscreen', // className
|
||||
content: ['<div class="layui-form">',
|
||||
'<div class="layui-input-wrap">',
|
||||
'<input type="password" class="class-demo-layer-pin" lay-affix="eye">',
|
||||
'<div class="layui-input-suffix">',
|
||||
'<i class="layui-icon layui-icon-right" id="ID-layer-demo-unlock"></i>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div>输入 111111 后回车，即可退出锁屏示例</div>',
|
||||
'</div>'].join(''),
|
||||
success: function(layero, index){
|
||||
var input = layero.find('input');
|
||||
var PASS = '111111';
|
||||
|
||||
form.render(); // 表单组件渲染
|
||||
input.focus();
|
||||
|
||||
// 点击解锁按钮
|
||||
var elemUnlock = layero.find('#ID-layer-demo-unlock');
|
||||
elemUnlock.on('click', function(){
|
||||
if($.trim(input[0].value) === PASS){
|
||||
layer.close(index);
|
||||
layer.closeLast('dialog'); // 关闭最新打开的信息框
|
||||
} else {
|
||||
layer.msg('锁屏密码输入有误', {offset: '16px', anim: 'slideDown'})
|
||||
input.focus();
|
||||
}
|
||||
});
|
||||
|
||||
// 回车
|
||||
input.on('keyup', function(e){
|
||||
var elem = this;
|
||||
var keyCode = e.keyCode;
|
||||
if(keyCode === 13){
|
||||
elemUnlock.trigger('click');
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
'test-more-shade': function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
content: '<div style="padding: 16px;">任意 HTML 内容</div>',
|
||||
area: ['320px', '195px'], // 初始宽高
|
||||
shade: [0.9, '#000'],
|
||||
shadeClose: true // 点击遮罩区域，关闭弹层
|
||||
});
|
||||
},
|
||||
'test-more-stack': function(){
|
||||
var that = this;
|
||||
|
||||
// 多窗口模式 + 层叠置顶 + Esc 关闭
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '当你选择该窗体时，即会在最顶端',
|
||||
area: ['390px', '260px'],
|
||||
shade: 0,
|
||||
maxmin: true,
|
||||
offset: [ // 为了便于演示，此处采用随机坐标
|
||||
Math.random()*($(window).height()-300),
|
||||
Math.random()*($(window).width()-390)
|
||||
],
|
||||
content: '<div style="padding: 16px;">内容标记：'+ new Date().getTime() + '，按 ESC 键可关闭。<br><br>当你的页面有很多很多 layer 窗口，你需要像 Window 窗体那样，点击某个窗口，该窗体就置顶在上面，那么 layer.setTop() 可以来轻松实现。它采用巧妙的逻辑，以使这种置顶的性能达到最优。</div>',
|
||||
btn: ['继续弹出', '全部关闭'], //只是为了演示
|
||||
yes: function(){
|
||||
$(that).click();
|
||||
},
|
||||
btn2: function(){
|
||||
layer.closeAll();
|
||||
},
|
||||
zIndex: layer.zIndex, // 重点 1 --- 初始设置当前最高层叠顺序，
|
||||
success: function(layero, index){
|
||||
layer.setTop(layero); // 重点 2 --- 保持选中窗口置顶
|
||||
|
||||
// 记录索引，以便按 esc 键关闭。事件见代码最末尾处。
|
||||
layer.escIndex = layer.escIndex || [];
|
||||
layer.escIndex.unshift(index);
|
||||
// 选中当前层时，将当前层索引放置在首位
|
||||
layero.on('mousedown', function(){
|
||||
var _index = layer.escIndex.indexOf(index);
|
||||
if(_index !== -1){
|
||||
layer.escIndex.splice(_index, 1); //删除原有索引
|
||||
}
|
||||
layer.escIndex.unshift(index); //将索引插入到数组首位
|
||||
});
|
||||
},
|
||||
end: function(){
|
||||
//更新索引
|
||||
if(typeof layer.escIndex === 'object'){
|
||||
layer.escIndex.splice(0, 1);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 多窗口模式 - esc 键
|
||||
$(document).on('keyup', function(e){
|
||||
if(e.keyCode === 27){
|
||||
layer.close(layer.escIndex ? layer.escIndex[0] : 0);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user