jsasg/orico-official-website-old
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
jsasg
2024-10-29 14:04:59 +08:00
commit 48bf3e6f33
2839 changed files with 762707 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
public/frontend/layui-main/docs/layer/examples/alert.md Executable file
View File

@@ -0,0 +1,79 @@
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-alert">对话框带图标</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-confirm">询问框</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-msg-dark">深色提示框</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-msg-light">浅色提示框</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-alert-btn">自定义按钮</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-count-down">关闭倒计时</button>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var layer = layui.layer;
var util = layui.util;
// 事件
util.on('lay-on', {
"test-alert": function(){
// 示范对话框所有内置图标
var icon = 0;
(function changeIcon(){
layer.alert('点击确定，继续查看图标', {
icon: icon,
shadeClose: true,
title: 'icon: '+ icon
}, ++icon > 6 ? function(){
layer.msg('内置图标演示完毕', {icon: 1});
} : changeIcon);
}());
},
"test-confirm": function(){
layer.confirm('一个询问框的示例？', {icon: 3}, function(){
layer.msg('点击确定的回调', {icon: 1});
}, function(){
layer.msg('点击取消的回调');
});
},
"test-msg-dark": function(){
layer.msg('深色提示框的示例');
},
"test-msg-light": function(){
layer.msg('浅色提示框的示例', {icon: 0}, function(){
// layer.msg('提示框关闭后的回调');
});
},
"test-alert-btn": function(){
layer.alert('自定义按钮', {
btn: ['按钮一', '按钮二', '按钮三'],
btnAlign: 'c', // 按钮居中显示
btn1: function(){
layer.msg('按钮一的回调');
},
btn2: function(){
layer.msg('按钮二的回调');
},
btn3: function(){
layer.msg('按钮三的回调');
}
});
},
"test-count-down": function(){
layer.alert('在标题栏显示自动关闭倒计秒数', {
time: 5*1000,
success: function(layero, index){
var timeNum = this.time/1000, setText = function(start){
layer.title('<span class="layui-font-red">'+ (start ? timeNum : --timeNum) + '</span> 秒后自动关闭', index);
};
setText(!0);
this.timer = setInterval(setText, 1000);
if(timeNum <= 0) clearInterval(this.timer);
},
end: function(){
clearInterval(this.timer);
}
});
}
})
});
</script>

69
public/frontend/layui-main/docs/layer/examples/direction.md Executable file
View File

@@ -0,0 +1,69 @@
从页面四个边缘弹出（抽屉效果）：
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-t">从上往下</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-r">从右往左</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-b">从下往上</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset-l">从左往右</button>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var layer = layui.layer;
var util = layui.util;
var $ = layui.$;
// 事件
util.on('lay-on', {
'test-offset-t': function(){
layer.open({
type: 1,
offset: 't',
anim: 'slideDown', // 从上往下
area: ['100%', '160px'],
shade: 0.1,
shadeClose: true,
id: 'ID-demo-layer-direction-t',
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
});
},
'test-offset-r': function(){
layer.open({
type: 1,
offset: 'r',
anim: 'slideLeft', // 从右往左
area: ['320px', '100%'],
shade: 0.1,
shadeClose: true,
id: 'ID-demo-layer-direction-r',
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
});
},
'test-offset-b': function(){
layer.open({
type: 1,
offset: 'b',
anim: 'slideUp', // 从下往上
area: ['100%', '160px'],
shade: 0.1,
shadeClose: true,
id: 'ID-demo-layer-direction-b',
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
});
},
'test-offset-l': function(){
layer.open({
type: 1,
offset: 'l',
anim: 'slideRight', // 从左往右
area: ['320px', '100%'],
shade: 0.1,
shadeClose: true,
id: 'ID-demo-layer-direction-l',
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
});
}
});
});
</script>

75
public/frontend/layui-main/docs/layer/examples/iframe.md Executable file
View File

@@ -0,0 +1,75 @@
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-handle">
iframe 的父子操作
<span id="ID-test-iframe-mark"></span>
</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-video">弹出多媒体</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-overflow">禁止 iframe 滚动条</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-iframe-curl">弹出任意 URL 页面</button>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var $ = layui.$;
var layer = layui.layer;
var util = layui.util;
// 事件
util.on('lay-on', {
'test-iframe-handle': function(){
layer.open({
type: 2,
area: ['680px', '520px'],
content: '/layer/test/iframe.html',
fixed: false, // 不固定
maxmin: true,
shadeClose: true,
btn: ['获取表单值', '取消'],
btnAlign: 'c',
yes: function(index, layero){
// 获取 iframe 的窗口对象
var iframeWin = window[layero.find('iframe')[0]['name']];
var elemMark = iframeWin.$('#mark'); // 获得 iframe 中某个输入框元素
var value = elemMark.val();
if($.trim(value) === '') return elemMark.focus();
// 显示获得的值
layer.msg('获得 iframe 中的输入框标记值：'+ value);
}
});
},
'test-iframe-video': function(){
layer.open({
type: 2,
title: false,
area: ['630px', '360px'],
shade: 0.8,
closeBtn: 0,
shadeClose: true,
content: '//player.youku.com/embed/XMzI1NjQyMzkwNA==' // video 地址
});
layer.msg('点击遮罩区域可关闭');
},
'test-iframe-overflow': function(){
layer.open({
type: 2,
area: ['360px', '500px'],
skin: 'layui-layer-rim', // 加上边框
content: ['/layer/test/1.html', 'no'] // 数组第二个成员设为 no 即屏蔽 iframe 滚动条
});
},
'test-iframe-curl': function(){
layer.open({
type: 2,
title: 'iframe 任意 URL',
shadeClose: true,
maxmin: true, //开启最大化最小化按钮
area: ['900px', '600px'],
content: 'https://cn.bing.com/'
});
}
})
});
</script>

49
public/frontend/layui-main/docs/layer/examples/load.md Executable file
View File

@@ -0,0 +1,49 @@
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-load-1">风格1</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-load-2">风格2</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-load-3">风格3</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-load-4">风格4</button>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var layer = layui.layer;
var util = layui.util;
// 事件
util.on('lay-on', {
'test-load-1': function(){
var loadIndex = layer.load(0);
// 模拟关闭
setTimeout(function(){
layer.close(loadIndex)
}, 3000);
},
'test-load-2': function(){
var loadIndex = layer.load(1);
// 模拟关闭
setTimeout(function(){
layer.close(loadIndex)
}, 3000);
},
'test-load-3': function(){
var loadIndex = layer.load(2);
// 模拟关闭
setTimeout(function(){
layer.close(loadIndex)
}, 3000);
},
'test-load-4': function(){
var loadIndex = layer.msg('加载中', {
icon: 16,
shade: 0.01
});;
// 模拟关闭
setTimeout(function(){
layer.close(loadIndex)
}, 3000);
}
})
});
</script>

170
public/frontend/layui-main/docs/layer/examples/more.md Executable file
View 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>

43
public/frontend/layui-main/docs/layer/examples/offset.md Executable file
View File

@@ -0,0 +1,43 @@
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="t">上</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="r">右</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="b">下</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="l">左</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="rt">右上</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="rb">右下</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="lb">左下</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="lt">左上</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="auto">正中</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-offset" data-offset="">任意</button>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var layer = layui.layer;
var util = layui.util;
var $ = layui.$;
// 事件
util.on('lay-on', {
'test-offset': function(){
var othis = $(this);
var offset = othis.data('offset');
// 弹出位置
layer.open({
type: 1,
offset: offset || ['200px', '280px'], // 详细可参考 offset 属性
id: 'ID-demo-layer-offset-'+ offset, // 防止重复弹出
content: '<div style="padding: 16px;">'+ othis.text() +'</div>',
area: '240px',
btn: '关闭全部',
btnAlign: 'c', // 按钮居中
shade: 0, // 不显示遮罩
yes: function(){
layer.closeAll();
}
});
}
});
});
</script>

101
public/frontend/layui-main/docs/layer/examples/other.md Executable file
View File

@@ -0,0 +1,101 @@
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-tab">tab 层</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-prompt-0">prompt - 单行文本框层</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-prompt-1">prompt - 密令输入框层</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-prompt-2">prompt - 多行文本框层</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-photos-one">photos - 单张图片层</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-photos">photos - 多张相册层</button>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var layer = layui.layer;
var util = layui.util;
// 事件
util.on('lay-on', {
'test-tips-tab': function(){
layer.tab({
area: ['600px', '300px'],
tab: [{
title: 'Title 1',
content: '<div style="padding: 16px;">tabs content 111</div>'
}, {
title: 'Title 2',
content: '<div style="padding: 16px;">tabs content 222</div>'
}, {
title: 'Title 3',
content: '<div style="padding: 16px;">tabs content 333</div>'
}],
shadeClose: true
});
},
'test-tips-prompt-0': function(){
layer.prompt({title: '请输入文本'}, function(value, index, elem){
if(value === '') return elem.focus();
layer.msg('获得：'+ util.escape(value)); // 显示 value
// 关闭 prompt
layer.close(index);
});
},
'test-tips-prompt-1': function(){
layer.prompt({title: '请输入密令', formType: 1}, function(value, index, elem){
if(value === '') return elem.focus();
layer.msg('获得：'+ util.escape(value)); // 显示 value
// 关闭 prompt
layer.close(index);
});
},
'test-tips-prompt-2': function(){
layer.prompt({title: '请输入文本', formType: 2}, function(value, index, elem){
if(value === '') return elem.focus();
layer.msg('获得：'+ util.escape(value)); // 显示 value
// 关闭 prompt
layer.close(index);
});
},
'test-tips-photos-one': function(){
layer.photos({
photos: {
"title": "Photos Demo",
"start": 0,
"data": [
{
"alt": "浩瀚宇宙",
"pid": 5,
"src": "https://unpkg.com/outeres@0.1.1/demo/outer-space.jpg",
}
]
},
footer: false // 是否显示底部栏 --- 2.8.16+
});
},
'test-tips-photos': function(){
layer.photos({
photos: {
"title": "Photos Demo",
"start": 0,
"data": [
{
"alt": "layer",
"pid": 1,
"src": "https://unpkg.com/outeres@0.1.1/demo/layer.png",
},
{
"alt": "壁纸",
"pid": 3,
"src": "https://unpkg.com/outeres@0.1.1/demo/000.jpg",
},
{
"alt": "浩瀚宇宙",
"pid": 5,
"src": "https://unpkg.com/outeres@0.1.1/demo/outer-space.jpg",
}
]
}
});
}
})
});
</script>

151
public/frontend/layui-main/docs/layer/examples/page.md Executable file
View File

@@ -0,0 +1,151 @@
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-page">普通页面层</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-wrap">捕获层</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-title">剔除默认标题栏</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-move">绑定弹层的拖拽元素</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-page-custom">
<span class="layui-badge-dot"></span> 弹出任意自定义内容
</button>
</div>
<div id="ID-test-layer-wrapper" style="display: none;">
<div style="padding:16px;">
弹出已经存在于页面中的一段元素<br>
通常是放置在 &amp;lt;body&amp;gt; 根节点下
</div>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var $ = layui.$;
var layer = layui.layer;
var util = layui.util;
var form = layui.form;
// 事件
util.on('lay-on', {
'test-page': function(){
layer.open({
type: 1,
// area: ['420px', '240px'], // 宽高
content: '<div style="padding: 16px;">任意 HTML 内容</div>'
});
},
'test-page-wrap': function(){
layer.open({
type: 1,
shade: false, // 不显示遮罩
content: $('#ID-test-layer-wrapper'), // 捕获的元素
end: function(){
// layer.msg('关闭后的回调', {icon:6});
}
});
},
'test-page-title': function(){
layer.open({
type: 1,
area: ['420px', '240px'], // 宽高
title: false, // 不显示标题栏
closeBtn: 0,
shadeClose: true, // 点击遮罩关闭层
content: '<div style="padding: 16px;">任意 HTML 内容。可点击遮罩区域关闭。</div>'
});
},
'test-page-move': function(){
layer.open({
type: 1,
area: ['420px', '240px'], // 宽高
title: false,
content: ['<div style="padding: 11px;">',
'任意 HTML 内容',
'<div style="padding: 16px 0;">',
'<button class="layui-btn" id="ID-test-layer-move">拖拽此处移动弹层</button>',
'</div>',
'</div>'].join(''),
move: '#ID-test-layer-move'
});
},
'test-page-custom': function(){
layer.open({
type: 1,
area: '350px',
resize: false,
shadeClose: true,
title: 'demo : layer + form',
content: `
<div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
<div class="demo-login-container">
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-username"></i>
</div>
<input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-password"></i>
</div>
<input type="password" name="password" value="" lay-verify="required" placeholder="密 码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
</div>
</div>
<div class="layui-form-item">
<div class="layui-row">
<div class="layui-col-xs7">
<div class="layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-vercode"></i>
</div>
<input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
</div>
</div>
<div class="layui-col-xs5">
<div style="margin-left: 10px;">
<img src="https://www.oschina.net/action/user/captcha" onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
<a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
</div>
<div class="layui-form-item demo-login-other">
<label>社交账号登录</label>
<span style="padding: 0 21px 0 6px;">
<a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
</span>
或 <a href="#reg">注册帐号</a></span>
</div>
</div>
</div>
`,
success: function(){
// 对弹层中的表单进行初始化渲染
form.render();
// 表单提交事件
form.on('submit(demo-login)', function(data){
var field = data.field; // 获取表单字段值
// 显示填写结果，仅作演示用
layer.alert(JSON.stringify(field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
}
});
}
})
});
</script>

77
public/frontend/layui-main/docs/layer/examples/skin.md Executable file
View File

@@ -0,0 +1,77 @@
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-alert">
墨绿与深蓝主题
</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-win10">
Windows 10 风格信息框 <span class="layui-badge-dot"></span>
</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-win10-page">
Win10 风格页面层 <span class="layui-badge-dot"></span>
</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-skin-custom">自定义任意主题</button>
</div>
<style>
/* 自定义其他任意主题 */
.class-layer-demo-custom .layui-layer-title{background-color: #EDEFF2;}
.class-layer-demo-custom .layui-layer-btn{padding: 5px 10px 10px;}
.class-layer-demo-custom .layui-layer-btn a{background: #fff; border-color: #E9E7E7; color: #333;}
.class-layer-demo-custom .layui-layer-btn .layui-layer-btn0{border-color: #FA584D; background-color: #FA584D; color: #fff;}
</style>
<!-- import layui -->
<script>
layui.use(function(){
var layer = layui.layer;
var util = layui.util;
// 事件
util.on('lay-on', {
'test-skin-alert': function(){
layer.alert('墨绿风格，点击继续确认看深蓝', {
skin: 'layui-layer-molv' // 样式类名
}, function(){
layer.alert('深蓝', {
skin: 'layui-layer-lan'
});
});
},
'test-skin-win10': function(){
layer.alert('Windows 10 风格主题', {
skin: 'layui-layer-win10', // 2.8+
shade: 0.01,
btn: ['确定', '取消']
})
},
'test-skin-win10-page': function(){
// 此处以一个简单的 Win10 风格记事本为例
layer.open({
type: 1, // 页面层类型
skin: 'layui-layer-win10', // 2.8+
shade: 0.01,
area: ['50%', '60%'],
maxmin: true,
title: '*无标题 - 记事本',
content: [
'<div style="padding: 0 8px; height: 20px; line-height: 20px; border-bottom: 1px solid #F0F0F0; box-sizing: border-box; font-size: 12px;">',
// 自定义菜单，此处仅作样式演示，具体功能可自主实现
[
'<a href="javascript:;">文件(F)</a>',
'<a href="javascript:;" >编辑(E)</a> ',
'<a href="javascript:;" >格式(O)</a> ',
'<a href="javascript:;" >查看(V)</a> ',
'<a href="javascript:;" >帮助(H)</a> ',
].join('&nbsp;&nbsp;&nbsp;'),
'</div>',
'&lt;textarea style="position: absolute; top: 20px; width: 100%; height: calc(100% - 20px); padding: 6px; border: none; resize: none; overflow-y: scroll; box-sizing: border-box;">&lt;/textarea>'
].join('')
});
},
'test-skin-custom': function(){
layer.alert('自定义其他任意主题', {
skin: 'class-layer-demo-custom'
})
}
})
});
</script>

48
public/frontend/layui-main/docs/layer/examples/tips.md Executable file
View File

@@ -0,0 +1,48 @@
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-top">显示在上</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-right">显示在右</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-bottom">显示在下</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-left">显示在左</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-color">自定义背景色</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="test-tips-more">允许多个 tips</button>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var layer = layui.layer;
var util = layui.util;
// 事件
util.on('lay-on', {
'test-tips-top': function(){
layer.tips('向上', this, {
tips: 1
});
},
'test-tips-right': function(){
layer.tips('默认向右', this);
},
'test-tips-bottom': function(){
layer.tips('向下', this, {
tips: 3
});
},
'test-tips-left': function(){
layer.tips('向左', this, {
tips: 4
});
},
'test-tips-color': function(){
layer.tips('可自定义任意主题色', this, {
tips: [1, '#16b777']
});
},
'test-tips-more': function(){
layer.tips('不会关闭之前的 tips', this, {
tipsMore: true
});
}
})
});
</script>

105
public/frontend/layui-main/docs/layer/examples/type.md Executable file
View File

@@ -0,0 +1,105 @@
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-primary" lay-on="alert">Alert</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="confirm">Confirm</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="msg">Msg</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="page">Page</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="iframe">Iframe</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="load">Load</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="tips">Tips</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="prompt">Prompt</button>
<button type="button" class="layui-btn layui-btn-primary" lay-on="photots">Photots</button>
</div>
<!-- import layui -->
<script>
layui.use(function(){
var layer = layui.layer;
var util = layui.util;
// 批量事件
util.on('lay-on', {
alert: function(){
layer.alert('对话框内容');
},
confirm: function(){
layer.confirm('一个询问框的示例？', {
btn: ['确定', '关闭'] //按钮
}, function(){
layer.msg('第一个回调', {icon: 1});
}, function(){
layer.msg('第二个回调', {
time: 20000, // 20s 后自动关闭
btn: ['明白了', '知道了']
});
});
},
msg: function(){
layer.msg('一段提示信息');
},
page: function(){
// 页面层
layer.open({
type: 1,
area: ['420px', '240px'], // 宽高
content: '<div style="padding: 11px;">任意 HTML 内容</div>'
});
},
iframe: function(){
// iframe 层
layer.open({
type: 2,
title: 'iframe test',
shadeClose: true,
shade: 0.8,
area: ['380px', '80%'],
content: '/layer/test/1.html' // iframe 的 url
});
},
load: function(){
var index = layer.load(0, {shade: false});
setTimeout(function(){
layer.close(index); // 关闭 loading
}, 5000);
},
tips: function(){
layer.tips('一个 tips 层', this, {
tips: 1
});
},
prompt: function(){
layer.prompt({title: '密令输入框', formType: 1}, function(pass, index){
layer.close(index);
layer.prompt({title: '文本输入框', formType: 2}, function(text, index){
layer.close(index);
alert('您输入的密令：'+ pass +'；文本：'+ text);
});
});
},
photots: function(){
layer.photos({
photos: {
"title": "Photos Demo",
"start": 0,
"data": [
{
"alt": "layer",
"pid": 1,
"src": "https://unpkg.com/outeres@0.1.1/demo/layer.png",
},
{
"alt": "壁纸",
"pid": 3,
"src": "https://unpkg.com/outeres@0.1.1/demo/000.jpg",
},
{
"alt": "浩瀚宇宙",
"pid": 5,
"src": "https://unpkg.com/outeres@0.1.1/demo/outer-space.jpg",
}
]
}
});
}
});
});
</script>