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

103
public/frontend/layui-main/docs/layer/detail/demo.md Executable file
View File

@@ -0,0 +1,103 @@
<h2 lay-toc="{id: 'examples', level: 2, hot: true}" class="layui-hide">在线测试</h2>
<pre class="layui-code" lay-options="{preview: true, text: {preview: '在线测试'}, layout: ['preview']}">
<textarea>
{{- d.include("/layer/detail/run.md") }}
</textarea>
</pre>
<div class="ws-docs-showcase" style="margin-top: 16px;"></div>
<h3 id="type" lay-toc="{level: 2, hot: true}">弹层类型</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', text: {preview: '弹层类型'}, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/layer/examples/type.md") }}
</textarea>
</pre>
<h3 id="demo-alert" lay-toc="{level: 3}">信息框</h3>
信息框即 `dialog` 类型层，对应默认的 `type: 0`，该类型的弹层同时只能存在一个。更多说明详见：[#type](#options)
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/layer/examples/alert.md") }}
</textarea>
</pre>
<h3 id="demo-page" lay-toc="{level: 3}">页面层</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/layer/examples/page.md") }}
</textarea>
</pre>
<h3 id="demo-iframe" lay-toc="{level: 3}">iframe 层</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/layer/examples/iframe.md") }}
</textarea>
</pre>
<h3 id="demo-load" lay-toc="{level: 3}">加载层</h3>
为了不影响继续体验，以下每个 loading 示例均会在 3 秒后自动模拟关闭
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/layer/examples/load.md") }}
</textarea>
</pre>
<h3 id="demo-tips" lay-toc="{level: 3}">Tips 层</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/layer/examples/tips.md") }}
</textarea>
</pre>
<h3 id="demo-other" lay-toc="{level: 3}">其他层</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/layer/examples/other.md") }}
</textarea>
</pre>
<h3 id="demo-more" lay-toc="{level: 2, hot: true}">更多演示</h3>
<pre class="layui-code" lay-options="{preview: true, text: {preview: '弹出位置'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/layer/examples/offset.md") }}
</textarea>
</pre>
<pre class="layui-code" lay-options="{preview: true, text: {preview: '弹出方向 <sup>2.8+</sup>'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/layer/examples/direction.md") }}
</textarea>
</pre>
<pre class="layui-code" lay-options="{preview: true, text: {preview: '其他演示'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/layer/examples/more.md") }}
</textarea>
</pre>
<h3 id="demo-skin" lay-toc="{level: 2, hot: true}">主题风格</h3>
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("/layer/examples/skin.md") }}
</script>
</textarea>
</pre>
### 小贴士
> 事实上 layer 丰富的基础属性，可足够让您的弹出层变得千变万化，为了避免占用太多篇幅，就不做过多演示了。

882
public/frontend/layui-main/docs/layer/detail/options.md Executable file
View File

@@ -0,0 +1,882 @@
<table class="layui-table">
<colgroup>
<col width="150">
<col>
<col width="100">
<col width="100">
</colgroup>
<thead>
<tr>
<th>属性名</th>
<th>描述</th>
<th>类型</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>type</td>
<td>
弹层类型。 可选值有：
- `0` dialog 信息框（默认），*同时只能存在一个层*
- `1` page 页面层，*可同时存在多个层*
- `2` iframe 内联框架层，*可同时存在多个层*
- `3` loading 加载层，*同时只能存在一个层*
- `4` tips 贴士层，*可配置同时存在多个层*
`layer` 弹层由以上 5 种类型构成。 不同的类型代表不同的弹出形态，`layer` 提供的所有的弹出方式均由此衍生。
</td>
<td>number</td>
<td>
`0`
</td>
</tr>
<tr>
<td>title</td>
<td>
弹层标题。其值支持以下可选类型：
- 若为 `string` 类型 : 则表示为弹层的标题文本，如：
```
title: '标题'
```
- 若为 `array` 类型 : 则可设置标题文本和标题栏 CSS 样式：
```
title: ['标题', 'font-size: 18px;']
```
- 若为 `boolean` 类型 : 则可设为 `false` 不显示标题栏。
```
title: false // 不显示标题栏
```
</td>
<td>string<br>array<br>boolean</td>
<td>
`信息`
</td>
</tr>
<tr>
<td>
[content](#options.content)
</td>
<td colspan="3">
<div id="options.content" lay-pid="options" class="ws-anchor">
弹层内容。 可传入的值比较灵活，支持以下使用场景：
- 若 `type: 1`（页面层）: 则 `content` 可传入值如下：
```
// 普通字符
layer.open({
type: 1,
content: '传入任意文本或 HTML'
});
// 捕获页面已存在的 DOM 元素或 jQuery 对象
layer.open({
type: 1,
content: $('#id') // 捕获层
});
```
注意： 若采用捕获层，则捕获的元素必须存放在 `<body>` 根节点下，否则可能被父级容器的相对定位所影响。
</div>
- 若 `type: 2`（iframe 层）: 则 `content` 可传入值如下：
```
// iframe URL
layer.open({
type: 2,
content: 'http://cn.bing.com' // URL
});
// 是否屏蔽 iframe 滚动条
layer.open({
type: 2,
// 数组第二个成员设为 no，即屏蔽 iframe 滚动条
content: ['http://cn.bing.com', 'yes']
});
```
- 若为其他弹层类型，传入普通字符即可。
相关效果可参考：[#示例](#demo-page)
</td>
</tr>
<tr>
<td>
[area](#options.area)
</td>
<td>
<div id="options.area" lay-pid="options" class="ws-anchor">
设置弹层的宽高，其值支持以下可选类型：
</div>
- 若为 `array` 类型，则可同时设置宽高
- `area: ['520px', '320px']` 固定宽度和高度
- `area: ['auto', '320px']` 宽度自动，高度固定
- `area: ['520px', 'auto']` 宽度固定，高度自动
- 若为 `string` 类型，则可定义宽度和宽高均自适应：
- `area: '520px'` 宽度固定，高度自适应
- `area: 'auto'` 宽度和高度均自适应
</td>
<td>array<br>string</td>
<td>
`auto`
</td>
</tr>
<tr>
<td>maxWidth</td>
<td>
弹层的最大宽度。当 `area` 属性值为默认的 `auto'` 时有效。
</td>
<td>number</td>
<td>
`360`
</td>
</tr>
<tr>
<td>maxHeight</td>
<td>
弹层的最大高度。当 `area` 属设置高度自适应时有效。
</td>
<td>number</td>
<td>-</td>
</tr>
<tr>
<td>
[offset](#options.offset)
</td>
<td>
<div id="options.offset" lay-pid="options" class="ws-anchor">
弹层的偏移坐标。 支持以下可选值：
</div>
- `offset: 'auto'` 坐标始终垂直水平居中
- `offset: '16px'` 只设置垂直坐标，水平保持居中
- `offset: ['16px', '16px']` 设置垂直和水平坐标
- `offset: 't'` 上边缘
- `offset: 'r'` 右边缘
- `offset: 'b'` 下边缘
- `offset: 'l'` 左边缘
- `offset: 'rt'` 右上角
- `offset: 'rb'` 右下角
- `offset: 'lt'` 左上角
- `offset: 'lb'` 左下角
当设置边缘坐标时，可配合 `anim` 属性实现抽屉弹出效果。
</td>
<td>string<br>array</td>
<td>
`auto`
</td>
</tr>
<tr>
<td>
[anim](#options.anim)
</td>
<td>
<div id="options.anim" lay-pid="options" class="ws-anchor">
弹层的出场动画。支持以下可选值：
</div>
- `anim: 0` 平滑放大。默认
- `anim: 1` 从上掉落
- `anim: 2` 从最底部往上滑入
- `anim: 3` 从左滑入
- `anim: 4` 从左翻滚
- `anim: 5` 渐显
- `anim: 6` 抖动
边缘抽屉动画 <sup>2.8+</sup>：
- `anim: 'slideDown'` 从上边缘往下
- `anim: 'slideLeft'` 从右边缘往左
- `anim: 'slideUp'` 从下边缘往上
- `anim: 'slideRight'` 从左边缘往右
抽屉动画一般配合 `offset` 属性实现边缘弹出。[#详见示例](#demo-more)
</td>
<td>number<br>string</td>
<td>
`0`
</td>
</tr>
<tr>
<td>isOutAnim</td>
<td>
是否开启弹层关闭时的动画。
</td>
<td>boolean</td>
<td>
`true`
</td>
</tr>
<tr>
<td>maxmin</td>
<td>
是否开启标题栏的最大化和最小化图标。
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td>
[closeBtn](#options.closeBtn)
</td>
<td>
<div id="options.closeBtn" lay-pid="options" class="ws-anchor">
是否开启标题栏的关闭图标，或设置关闭图标风格。
</div>
- `closeBtn: 0` 不显示关闭图标
- `closeBtn: 1` 关闭图标默认风格
- `closeBtn: 2` 关闭图标风格二
</td>
<td>number</td>
<td>
`1`
</td>
</tr>
<tr>
<td>
[icon](#options.icon)
</td>
<td>
<div id="options.icon" lay-pid="options" class="ws-anchor">
提示图标。 信息框和加载层的私有参数。
</div>
- 若为信息框，支持传入 `0-6` 的可选值。<br>默认为 `-1`，即不显示图标。
- 若为加载层，支持传入 `0-2` 的可选值
```
// eg1
layer.alert('成功提示', {icon: 1});
// eg2
layer.msg('开心表情', {icon: 6});
// eg3
layer.load(1); // 加载层风格一
```
</td>
<td>number</td>
<td>
`-1`
</td>
</tr>
<tr>
<td>
[btn](#options.btn)
</td>
<td>
<div id="options.btn" lay-pid="options" class="ws-anchor">
自定义按钮。 页面层默认不开启。 按钮可无限数量，每一个按钮均会按照数组顺序生成对应的回调函数，如：
</div>
```
// eg1
layer.confirm('询问框？', {
btn: ['按钮1', '按钮2', '按钮3']
});
// eg2
layer.open({
content: 'test',
btn: ['按钮1', '按钮2', '按钮3'],
// 按钮1 的回调
btn1: function(index, layero, that){},
btn2: function(index, layero, that){
// 按钮2 的回调
// return false // 点击该按钮后不关闭弹层
},
btn3: function(index, layero, that){
// 按钮3 的回调
// return false // 点击该按钮后不关闭弹层
}
});
```
</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>
[btnAlign](#options.btnAlign)
</td>
<td>
<div id="options.btnAlign" lay-pid="options" class="ws-anchor">
按钮水平对其方式。支持以下可选值：
</div>
- `btnAlign: 'l'` 按钮左对齐
- `btnAlign: 'c'` 按钮水平居中对齐
- `btnAlign: 'r'` 按钮右对齐。默认值，不用设置
</td>
<td>string</td>
<td>
`r`
</td>
</tr>
<tr>
<td>
[skin](#options.skin)
</td>
<td>
<div id="options.skin" lay-pid="options" class="ws-anchor">
弹层的主题风格。通过赋值对应的 className，实现对主题样式的定制。除了默认主题风格，还支持以下可选主题：
</div>
- `layui-layer-molv` 墨绿主题
- `layui-layer-lan` 深蓝主题
- `layui-layer-win10` Windows 10 主题 <sup>2.8+</sup>
还可传入其他任意 className 来自定义主题。 参考：[#示例](#demo-skin)
</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>
[shade](#options.shade)
</td>
<td>
<div id="options.shade" lay-pid="options" class="ws-anchor">
弹层的遮罩。 支持以下写法：
</div>
- `shade: 0.3` 设置遮罩深色背景的透明度
- `shade: [0.3, '#FFF']` 设置遮罩透明度和颜色值
- `shade: 0` 不显示遮罩
</td>
<td>number<br>array</td>
<td>
`0.3`
</td>
</tr>
<tr>
<td>shadeClose</td>
<td>
是否点击遮罩时关闭弹层。当遮罩存在时有效。
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td>id</td>
<td>
弹层的唯一索引值。 一般用于页面层或 iframe 层弹出时的状态识别，设置该属性可防止弹层的重复弹出。
</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>hideOnClose <sup>2.8.3+</sup></td>
<td>
关闭弹层时，是否将弹层设置为隐藏状态（而非移除），当再次打开，直接显示原来的弹层。 若设为 `true`，则必须同时设置 `id` 属性方可有效。
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td>time</td>
<td>
弹层自动关闭所需的毫秒数。 如 `time: 3000` ，即代表 3 秒后自动关闭。 提示框、加载层、Tips 层三种弹出模式默认开启。
</td>
<td>number</td>
<td>
`0`
</td>
</tr>
<tr>
<td>fixed</td>
<td>
弹层是否固定定位，即始终显示在页面可视区域。
</td>
<td>boolean</td>
<td>
`true`
</td>
</tr>
<tr>
<td>zIndex</td>
<td>
弹层的初始层叠顺序值。
</td>
<td>number</td>
<td>
`19891014`
</td>
</tr>
<tr>
<td>resize</td>
<td>
是否允许拖拽弹层右下角拉伸尺寸。 该属性对加载层和 tips 层无效。
</td>
<td>boolean</td>
<td>
`true`
</td>
</tr>
<tr>
<td>scrollbar</td>
<td>
打开弹层时，是否允许浏览器出现滚动条。
</td>
<td>boolean</td>
<td>
`true`
</td>
</tr>
<tr>
<td>minStack <sup>2.6+</sup></td>
<td>
点击标题栏的最小化时，是否从页面左下角堆叠排列。
</td>
<td>boolean</td>
<td>
`true`
</td>
</tr>
<tr>
<td>removeFocus <sup>2.8+</sup></td>
<td>
是否移除弹层触发元素的焦点，避免按回车键时重复弹出。
</td>
<td>boolean</td>
<td>
`true`
</td>
</tr>
<tr>
<td>move</td>
<td>
绑定弹层的拖拽元素。 默认为触发弹层的标题栏进行拖拽。也可以设置 `move: false` 禁止拖拽。
用法参考：[#示例](#demo-page)
</td>
<td>string<br>DOM<br>boolean</td>
<td>-</td>
</tr>
<tr>
<td>moveOut</td>
<td>
否允许拖拽到窗口外
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td>tips</td>
<td>
设置 tips 层的吸附位置和背景色，tips 层的私有属性。
- 若为 `number` 类型，则支持 `1-4` 的可选值，分别代表*上右下左*的吸附位置。如： `tips: 1`
- 若为 `array` 类型，则支持设置吸附位置和背景色，如：
```
tips: [1, '#000'] // 吸附在上的深色贴士层
```
</td>
<td>number<br>array</td>
<td>
`2`
</td>
</tr>
<tr>
<td>tipsMore</td>
<td>
是否允许同时存在多个 tips 层，即不销毁上一个 tips。
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center">
<div id="options.callback" lay-pid="options" class="ws-anchor">
[回调函数](#options.callback)
</div>
</td>
</tr>
<tr>
<td>
[success](#options.success)
</td>
<td colspan="3">
<div id="options.success" class="ws-anchor">
打开弹层成功后的回调函数。返回的参数如下：
</div>
```
layer.open({
type: 1,
content: '内容',
success: function(layero, index, that){
// 弹层的最外层元素的 jQuery 对象
console.log(layero);
// 弹层的索引值
console.log(index);
// 弹层内部原型链中的 this --- 2.8+
console.log(that);
}
});
```
</td>
</tr>
<tr>
<td>
[yes](#options.yes)
</td>
<td colspan="3">
<div id="options.yes" lay-pid="options" class="ws-anchor">
点击「确定」按钮的回调函数。返回的参数同 `success`
</div>
```
layer.open({
content: '内容',
yes: function(index, layero, that){
// do something
layer.close(index); // 关闭弹层
}
});
```
</td>
</tr>
<tr>
<td>
[cancel](#options.cancel)
</td>
<td colspan="3">
<div id="options.cancel" lay-pid="options" class="ws-anchor">
点击标题栏关闭按钮的回调函数。返回的参数同 `success`
</div>
```
layer.open({
content: '内容',
cancel: function(index, layero, that){
if(confirm('确定要关闭么')){
layer.close(index);
}
return false; // 阻止默认关闭行为
}
});
```
</td>
</tr>
<tr>
<td>
[end](#options.end)
</td>
<td colspan="3">
<div id="options.end" lay-pid="options" class="ws-anchor">
弹层被关闭且销毁后的回调函数。
</div>
```
layer.open({
content: '内容',
end: function(){
console.log('弹层已被移除');
}
});
```
</td>
</tr>
<tr>
<td>
[moveEnd](#options.moveEnd)
</td>
<td colspan="3">
<div id="options.moveEnd" lay-pid="options" class="ws-anchor">
弹层拖拽完毕后的回调函数。
</div>
```
layer.open({
type: 1,
content: '内容',
moveEnd: function(layero){
console.log('拖拽完毕');
}
});
```
</td>
</tr>
<tr>
<td>
[resizing](#options.resizing)
</td>
<td colspan="3">
<div id="options.resizing" lay-pid="options" class="ws-anchor">
弹层拉伸过程中的回调函数
</div>
```
layer.open({
type: 1,
content: '内容',
resizing: function(layero){
console.log('拉伸中');
}
});
```
</td>
</tr>
<tr>
<td>
[full](#options.full)
</td>
<td colspan="3">
<div id="options.full" lay-pid="options" class="ws-anchor">
弹层最大化后的回调函数。返回的参数同 `success`
</div>
```
layer.open({
type: 1,
content: '内容',
full: function(layero, index, that){
console.log('弹层已最大化');
}
});
```
</td>
</tr>
<tr>
<td>
[min](#options.min)
</td>
<td colspan="3">
<div id="options.min" lay-pid="options" class="ws-anchor">
弹层最小化后的回调函数。返回的参数同 `success`
</div>
```
layer.open({
type: 1,
content: '内容',
min: function(layero, index, that){
// do something
// return false; // 阻止默认最小化
}
});
```
</td>
</tr>
<tr>
<td>
[restore](#options.restore)
</td>
<td colspan="3">
<div id="options.restore" lay-pid="options" class="ws-anchor">
弹层被还原后的回调函数。返回的参数同 `success`
</div>
```
layer.open({
type: 1,
content: '内容',
restore: function(layero, index, that){
console.log('弹层已还原');
}
});
```
</td>
</tr>
</tbody>
</table>

35
public/frontend/layui-main/docs/layer/detail/run.md Executable file
View File

@@ -0,0 +1,35 @@
<div class="layui-form">
<div class="layui-form-item">
&lt;textarea class="layui-textarea ws-demo-editor" id="ID-demo-editor" &gt;
// 在此处输入 layer 的任意代码
layer.open({
type: 1, // page 层类型
area: ['500px', '300px'],
title: 'Hello layer',
shade: 0.6, // 遮罩透明度
shadeClose: true, // 点击遮罩区域，关闭弹层
maxmin: true, // 允许全屏最小化
anim: 0, // 0-6 的动画形式，-1 不开启
content: '<div style="padding: 32px;">一个普通的页面层，传入了自定义的 HTML</div>'
});&lt;/textarea&gt;
</div>
<div>
<button type="button" class="layui-btn" id="ID-demo-run">运行效果</button>
</div>
</div>
<script>
layui.use(function(){
var $ = layui.$;
var layer = layui.layer;
$('#ID-demo-run').on('click', function(){
var code = $('#ID-demo-editor').val();
try {
new Function(code)();
} catch(e) {
layer.alert('语句异常：'+ e.message, {icon: 2})
}
});
});
</script>

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>

610
public/frontend/layui-main/docs/layer/index.md Executable file
View File

@@ -0,0 +1,610 @@
---
title: 通用弹出层组件 layer
toc: true
---
# 弹出层组件 🔥
> 弹出层组件 `layer` 是 `Layui` 最古老的组件，也是使用覆盖面最广泛的代表性组件。 `layer` 集众多弹层功能为一体，灵活而多样，是许多开发者的网页弹出层的首选交互方案，在各类业务场景都能发挥重要作用。
<h2 id="examples" lay-toc="{anchor: null}">示例</h2>
点击下述按钮，查看每个示例对应的弹层效果。
<div>
{{- d.include("/layer/detail/demo.md") }}
</div>
<h2 id="api" lay-toc="{hot: true, bold: true}">API</h2>
| API | 描述 |
| --- | --- |
| var layer = layui.layer | 获得 `layer` 模块。 |
| 弹出 : | - |
| [layer.open(options)](#open) | 打开弹层，核心方法。下述所有弹出方式均为该方法的二次封装 |
| [layer.alert(content, options, yes)](#alert) | 弹出 `dialog` 类型信息框。 |
| [layer.confirm(content, options, yes, cancel)](#confirm) | 弹出 `dialog` 类型询问框。 |
| [layer.msg(content, options, end)](#msg) | 弹出 `dialog` 类型提示框。 |
| [layer.load(icon, options)](#load) | 弹出 `loading` 类型加载层。 |
| [layer.tips(content, elem, options)](#tips) | 弹出 `tips` 类型贴士层。 |
| [layer.prompt(options, yes)](#prompt) | 弹出 `page` 类型输入框层。 |
| [layer.photos(options)](#photos) | 弹出 `page` 类型图片层。 |
| [layer.tab(options)](#tab) | 弹出 `page` 类型标签页层。 |
| 关闭 : | - |
| [layer.close(index)](#close) | 关闭对应的层，核心方法。 |
| [layer.closeAll(type)](#closeAll) | 关闭所有对应类型的层。 |
| [layer.closeLast(type)](#closeLast) <sup>2.8+</sup> | 关闭最近打开的对应类型的层。 |
| 其他 : | - |
| [layer.config(options)](#config) | 全局配置默认属性。 |
| [layer.ready(callback)](#ready) | 样式初始化就绪。 |
| [layer.style(index, css)](#set-style) | 重新设置弹层样式。 |
| [layer.title(title, index)](#set-title) | 设置弹层的标题。 |
| [layer.getChildFrame(selector, index)](#getChildFrame) | 获取 iframe 页中的元素。 |
| [layer.getFrameIndex(window.name)](#getFrameIndex) | 在 iframe 页中获取弹层索引。 |
| [layer.iframeAuto(index)](#iframeAuto) | 设置 iframe 层高度自适应。 |
| [layer.iframeSrc(index, url)](#iframeSrc) | 重新设置 iframe 层 URL。 |
| layer.index | 获取最新弹出层的索引 |
| layer.zIndex | 获取最新弹出层的层叠顺序 |
| [layer.setTop(layero)](#setTop) | 将对应弹层的层叠顺序为置顶。 |
| [layer.full(index)](#full) | 设置弹层最大化尺寸。 |
| [layer.min(index)](#min) | 设置弹层最小化尺寸。 |
| [layer.restore(index)](#restore) | 还原弹层尺寸。 |
<h2 id="open" lay-toc="{level: 2}">打开弹层</h2>
`layer.open(options);`
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
打开弹层的核心方法，其他不同类型的弹出方法均为该方法的二次封装。
```
// 该方法返回当前层的唯一索引，以便其他方法对该弹层进行相关操作
var index = layer.open({
type: 1, // page 层类型，其他类型详见「基础属性」
content: '<div style="padding: 16px;">test</div>'
});
```
<h2 id="options" lay-toc="{level: 2, hot: true}">基础属性</h2>
<div>
{{- d.include("/layer/detail/options.md") }}
</div>
<h2 id="alert" lay-pid="api" class="ws-anchor ws-bold">弹出信息框</h2>
`layer.alert(content, options, yes);`
- 参数 `content` : 弹出内容
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
- 参数 `yes` : 点击确定后的回调函数
该方法用于弹出 `dialog` 类型信息框（`type: 0`），参数自动向左补位。
```
// eg1
layer.alert('一个简单的信息框');
// eg2
layer.alert('开启图标', {icon: 1}, function(index){
// do something
// …
layer.close(index);
});
// eg3
layer.alert('不开启图标', function(index){
// do something
// …
layer.close(index);
});
```
<h2 id="confirm" lay-pid="api" class="ws-anchor ws-bold">弹出询问框</h2>
`layer.confirm(content, options, yes, cancel);`
- 参数 `content` : 弹出内容
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
- 参数 `yes` : 点击确定后的回调函数
- 参数 `cancel` : 点击第二个按钮（默认「取消」）后的回调函数
该方法用于弹出 `dialog` 类型询问框（`type: 0`），参数自动向左补位。
```
// eg1
layer.confirm('确定吗?', {icon: 3, title:'提示'}, function(index){
// do something
// …
layer.close(index);
});
// eg2
layer.confirm('确定吗?', function(index){
// do something
// …
layer.close(index);
});
```
<h2 id="msg" lay-pid="api" class="ws-anchor ws-bold">弹出提示框</h2>
`layer.msg(content, options, end);`
- 参数 `content` : 弹出内容
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
- 参数 `end` : 提示框关闭后的回调函数
该方法用于弹出 `dialog` 类型提示框（`type: 0`），默认 `3` 秒后自动关闭。参数自动向左补位。
```
// eg1
layer.msg('普通提示');
// eg2
layer.msg('带 icon 的提示', {icon: 6});
// eg3
layer.msg('关闭后想做些什么', function(){
// do something
});
// eg
layer.msg('提示框', {
icon: 1,
time: 2000 // 设置 2 秒后自动关闭
}, function(){
// do something
});
```
<h2 id="load" lay-pid="api" class="ws-anchor ws-bold">弹出加载层</h2>
`layer.load(icon, options);`
- 参数 `icon` : 加载图标风格，支持 `0-2` 可选值
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
该方法用于弹出 `load` 类型加载层（`type: 3`）。
```
// eg1
var index = layer.load(); // 默认加载图标风格
// eg2
var index = layer.load(1); // 加载图标风格 1
// eg3
var index = layer.load(2, {time: 10*1000}); // 加载图标风格，并设置最长等待 10 秒
// 关闭加载层
layer.close(index);
```
<h2 id="tips" lay-pid="api" class="ws-anchor ws-bold">弹出贴士层</h2>
`layer.tips(content, elem, options);`
- 参数 `content` : 弹出内容
- 参数 `elem` : 吸附的目标元素选择器或对象
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
该方法用于弹出 `tips` 类型贴士层（`type: 4`），默认 `3` 秒后自动关闭。
```
// eg1
layer.tips('小贴士', '#id');
// eg2
$('#id').on('click', function(){
var elem = this;
layer.tips('小贴士', elem); //在元素的事件回调体中，follow直接赋予this即可
});
// eg3
layer.tips('显示在目标元素上方', '#id', {
tips: 1 // 支持 1-4 可选值，更多详见基础属性中的 tips 介绍
});
```
<h2 id="prompt" lay-pid="api" class="ws-anchor ws-bold">弹出输入框</h2>
`layer.prompt(options, yes);`
- 参数 `options` : 基础属性配置项。除了支持 [基础属性](#options) 之外，还支持下表私有属性：
| 私有属性 | 描述 | 类型 | 默认值 |
| --- | --- | --- | --- |
| formType | 输入框类型。支持以下可选值：<ul><li> `0` 文本输入框 </li><li> `1` 密令输入框 </li><li> `2` 多行文本输入框 </li></ul> | number | `0` |
| value | 输入框初始值 | string | - |
| maxlength | 可输入的最大字符长度 | number | `500` |
| placeholder | 输入框内容为空时的占位符 | string | - |
- 参数 `yes` : 点击确定后的回调函数
该方法用于弹出输入框层，基于 `type: 1`（即 `page` 层）的自定义内容。 效果参考： [#示例](#demo-other)
```
// eg1
layer.prompt(function(value, index, elem){
alert(value); // 得到 value
layer.close(index); // 关闭层
});
// eg2
layer.prompt({
formType: 2,
value: '初始值',
title: '请输入值',
area: ['800px', '350px'] // 自定义文本域宽高
}, function(value, index, elem){
alert(value); // 得到 value
layer.close(index); // 关闭层
});
```
<h2 id="photos" lay-pid="api" class="ws-anchor ws-bold">弹出图片层</h2>
`layer.photos(options);`
- 参数 `options` : 基础属性配置项。除了支持 [基础属性](#options) 之外，还支持下表私有属性：
| 私有属性 | 描述 | 类型 | 默认值 |
| --- | --- | --- | --- |
| photos | 图片层的数据源，格式详见下述示例。 | object | - |
| toolbar <sup>2.8.16+</sup> | 是否显示顶部工具栏 | boolean | `true` |
| footer <sup>2.8.16+</sup> | 是否隐藏底部栏 | boolean | `true` |
| tab | 图片层切换后的回调函数，返回的参数见下述示例 | function | - |
该方法用于弹出图片层，基于 `type: 1`（即 `page` 层）的自定义内容。
**用法一：直接赋值图片数据**。 效果参考： [#示例](#demo-other)
```
layer.photos({
photos: { // 图片层的数据源
"title": "", // 相册标题
"id": 123, // 相册 id
"start": 0, // 初始显示的图片序号，默认 0
"data": [ // 相册包含的图片，数组格式
{
"alt": "图片名",
"pid": 666, // 图片id
"src": "", // 原图地址
"thumb": "" // 缩略图地址
},
// …
]
},
tab: function(data, layero){ // 图片层切换后的回调
console.log(data); // 当前图片数据信息
console.log(layero); // 图片层的容器对象
}
});
```
**用法二：绑定页面图片元素**。点击图片时，弹出对应的图片层。
<pre class="layui-code" lay-options="{preview: true, layout: ['code', 'preview'], tools: ['full']}">
<textarea>
<style>
.class-photos-demo img{width: 160px; height: 100px; cursor: pointer;}
</style>
<div id="ID-photos-demo" class="class-photos-demo">
<!-- <img src="缩略图" layer-src="大图地址" layer-pid="图片id，可不写" alt="图片名"> -->
<img src="https://unpkg.com/outeres/demo/layer.png" layer-src="https://unpkg.com/outeres/demo/layer.png" layer-pid="" alt="layer">
<img src="https://unpkg.com/outeres/demo/000.jpg" layer-src="https://unpkg.com/outeres/demo/000.jpg" layer-pid="" alt="壁纸">
<img src="https://unpkg.com/outeres/demo/outer-space.jpg" layer-src="https://unpkg.com/outeres/demo/outer-space.jpg" layer-pid="" alt="星空如此深邃">
</div>
<!-- import layui -->
<script>
layui.use(function(){
var layer = layui.layer;
// 图片层
layer.photos({
photos: '#ID-photos-demo'
});
});
</script>
</textarea>
</pre>
<h2 id="tab" lay-pid="api" class="ws-anchor ws-bold">弹出标签层</h2>
`layer.tab(options);`
- 参数 `options` : 基础属性配置项。除了支持 [基础属性](#options) 之外，还支持下表私有属性：
| 私有属性 | 描述 | 类型 | 默认值 |
| --- | --- | --- | --- |
| tab | 标签层的数据源，格式详见下述示例。 | array | - |
该方法用于弹出标签层，基于 `type: 1`（即 `page` 层）的自定义内容。 效果参考： [#示例](#demo-other)
```
layer.tab({
area: ['600px', '300px'],
tab: [{ // 标签层的数据源
title: '标题 1',
content: '内容 1'
}, {
title: '标题 2',
content: '内容 2'
}, {
title: '标题 3',
content: '内容 3'
}]
});
```
<h2 id="close" lay-toc="{level: 2}">关闭弹层</h2>
`layer.close(index);`
- 参数 `index` : 打开弹层时返回的唯一索引
该方法用于关闭对应的弹层。
```
// 每一种弹层调用方式，都会返回一个 index
var index1 = layer.open();
var index2 = layer.alert();
var index3 = layer.load();
var index4 = layer.tips();
// 关闭对应的弹层
layer.close(index1);
```
在 iframe 弹层页面中关闭自身
```
var index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
parent.layer.close(index); // 再执行关闭
```
<h2 id="closeAll" lay-pid="api" class="ws-anchor ws-bold">关闭所有层</h2>
`layer.closeAll(type);`
- 参数 `type` : 弹层的类型。可选值：`dialog,page,iframe,loading,tips`
该方法用于关闭所有同类型的弹层。
```
layer.closeAll(); // 关闭所有类型的层
layer.closeAll('dialog'); // 关闭所有的信息框
layer.closeAll('page'); // 关闭所有的页面层
layer.closeAll('iframe'); // 关闭所有的 iframe 层
layer.closeAll('loading'); // 关闭所有的加载层
layer.closeAll('tips'); // 关闭所有的 tips 层
```
<h2 id="closeLast" lay-pid="api" class="ws-anchor ws-bold">关闭最近一次打开的层 <sup>2.8+</sup></h2>
`layer.closeLast(type);`
- 参数 `type` : 弹层的类型。可选值：`dialog,page,iframe,loading,tips`
该方法用于关闭最近一次打开的对应类型的层。
```
layer.closeLast('dialog'); // 关闭最近一次打开的信息框
layer.closeLast('page'); // 关闭最近一次打开的页面层
layer.closeLast('iframe'); // 关闭最近一次打开的 iframe 层
layer.closeLast('loading'); // 关闭最近一次打开的加载层
layer.closeLast('tips'); // 关闭最近一次打开的 tips 层
```
<h2 id="config" lay-pid="api" class="ws-anchor ws-bold">全局配置默认属性</h2>
`layer.config(options);`
- 参数 `options` : 基础属性配置项。[#详见属性](#options)
该方法用于全局设置弹层的默认基础属性。
```
layer.config({
title: '默认标题',
skin: '', // 设置默认主题
// … 其他任意基础属性
})
```
<h2 id="ready" lay-pid="api" class="ws-anchor ws-bold">样式初始化就绪</h2>
`layer.ready(callback);`
- 参数 `callback` : 初始化完毕后的回调函数
该方法一般是在源码方式引入 `layui.js`，且要在页面初始即弹出层时使用，以确保弹层所依赖的样式文件先行加载。 而引入 release 版的 `layui.js` 则无需使用该方法，因为弹层样式已经统一合并到 `layui.css` 中。
```
// 页面初始弹出层
layer.ready(function(){
layer.alert('对话框内容');
});
```
<h2 id="set-style" lay-pid="api" class="ws-anchor ws-bold">重新设置弹层样式</h2>
`layer.style(index, css);`
- 参数 `index` : 打开弹层时返回的唯一索引
- 参数 `css` : 要设置的 `css` 属性
该方法对 `loading` 层和 `tips` 层无效。
```
// 打开弹层
var index = layer.open({
type: 1,
content: '内容'
});
// 重新给对应层设定 width、top 等
layer.style(index, {
width: '1000px',
top: '10px'
});
```
<h2 id="set-title" lay-pid="api" class="ws-anchor ws-bold">设置弹层的标题</h2>
`layer.title(title, index);`
- 参数 `title` : 标题
- 参数 `index` : 打开弹层时返回的唯一索引
```
// 打开弹层
var index = layer.open({
type: 1,
content: '内容'
});
// 重新设置标题
layer.title('新标题', index)
```
<h2 id="getChildFrame" lay-pid="api" class="ws-anchor ws-bold">获取 iframe 页中的元素</h2>
`layer.getChildFrame(selector, index);`
- 参数 `selector` : iframe 子页面的选择器或元素对象
- 参数 `index` : 打开弹层时返回的唯一索引
该方法用于在父页面获取 iframe 子页面中的元素
```
layer.open({
type: 2, // iframe 层
content: '/layer/test/iframe.html',
success: function(layero, index){
// 获取 iframe 中 body 元素的 jQuery 对象
var body = layer.getChildFrame('body', index);
// 给 iframe 页中的某个输入框赋值
body.find('input').val('Hello layer.');
}
});
```
<h2 id="getFrameIndex" lay-pid="api" class="ws-anchor ws-bold">在 iframe 页中获取弹层索引</h2>
`layer.getFrameIndex(window.name);`
- 参数 `window.name` : 当前 iframe 窗口的 `name` 属性值
该方法用于在 iframe 页面内部获取当前 iframe 弹层的索引，以便关闭自身。
```
var index = parent.layer.getFrameIndex(window.name); // 获取当前 iframe 层的索引
parent.layer.close(index); // 关闭当前 iframe 弹层
```
<h2 id="iframeAuto" lay-pid="api" class="ws-anchor ws-bold">设置 iframe 层高度自适应</h2>
`layer.iframeAuto(index);`
- 参数 `index` : 打开弹层时返回的唯一索引
该方法可让 iframe 高度跟随内容自适应
```
layer.open({
type: 2, // iframe 层
content: '/layer/test/iframe.html',
area: '600px', // 弹层初始宽度
success: function(layero, index, that){
layer.iframeAuto(index); // 让 iframe 高度自适应
that.offset(); // 重新自适应弹层坐标
}
});
```
<h2 id="iframeSrc" lay-pid="api" class="ws-anchor ws-bold">重新设置 iframe 层 URL</h2>
`layer.iframeSrc(index, url);`
- 参数 `index` : 打开弹层时返回的唯一索引
- 参数 `url` : URL 地址
```
// 打开弹层
var index = layer.open({
type: 2, // iframe 层
content: '/layer/test/iframe.html'
});
// 重置 iframe 页面 URL
layer.iframeSrc(index, 'https://cn.bing.com/');
```
<h2 id="setTop" lay-pid="api" class="ws-anchor ws-bold">置顶弹层</h2>
`layer.setTop(layero);`
- 参数 `layero` : layer 最外层容器的元素对象，一般可通过各个回调函数返回的参数获取。
该方法一般用于多弹层模式时，实现点击某个弹层让其层叠顺序置顶。效果参考：[#示例](#demo-more)
```
// 多弹层模式的层叠顺序置顶
layer.open({
type: 1, // 页面层
shade: false,
area: ['520px', '320px'],
maxmin: true,
content: '<div style="padding: 16px;">多弹层模式的层叠顺序置顶</div>',
zIndex: layer.zIndex, // 重点 1 --- 初始设置当前最高层叠顺序，
success: function(layero){
layer.setTop(layero); // 重点 2 --- 保持选中窗口置顶
}
});
```
<h2 id="full" lay-pid="api" class="ws-anchor ws-bold">设置弹层最大化</h2>
`layer.full(index);`
- 参数 `index` : 打开弹层时返回的唯一索引
```
// 打开弹窗
var index = layer.open({
type: 1, // 页面层
content: '弹层内容'
});
// 设置弹层最大化
layer.full(index);
```
<h2 id="min" lay-pid="api" class="ws-anchor ws-bold">设置弹层最小化</h2>
`layer.min(index);`
- 参数 `index` : 打开弹层时返回的唯一索引
```
// 打开弹窗
var index = layer.open({
type: 1, // 页面层
content: '弹层内容'
});
// 设置弹层最大化
layer.min(index);
```
<h2 id="restore" lay-pid="api" class="ws-anchor ws-bold">还原弹层</h2>
`layer.restore(index);`
- 参数 `index` : 打开弹层时返回的唯一索引
当弹层最大化或最小化状态时，执行该方法可还原弹层。
## 贴士
> layer 曾经可作为单独组件使用，鉴于维护成本的考量，目前 layer 组件已完全集成到 Layui 中，而单独版本已不做同步维护。 因此，建议直接使用 layui 中 layer 即可。