floraachy/layui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1253 from layui/2.x

Browse Source 
release v2.8.3
This commit is contained in:
贤心 2023-05-15 11:48:13 +08:00 committed by GitHub
commit 0096ee3e14
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
84 changed files with 942 additions and 834 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -65,13 +65,13 @@ Layui 是一套开源免费的 Web UI 组件库，采用自身轻量级模块化
## 破旧立新 🌱
2016年10月14日，Layui 发布了 `1.0.0` 首版，此后多年被广泛应用在不计其数的 Web 平台。
2016年10月14日，Layui 发布了 `1.0.0` 首版，此后多年被广泛应用于众多 Web 平台。
2021年10月13日，Layui 发布了原官网下线的公告（<a href="https://unpkg.com/outeres@0.0.7/img/layui/notice-2021.png" target="_blank">导读</a>），并将文档站点切换到了 Gitee Pages，社区及日常维护亦全面转移到了 Gitee 和 Github 平台，以此呼吁大家拥抱其他更好的主流框架，导致大家误以为 Layui 停更了。事实上，自那以后，Layui 仍然在 Github 和 Gitee 保持活跃，并不存在所谓的停止更新，从当时的 `2.6.8` 一直连续迭代到如今的最新版本。
2023年4月24日，Layui 发布了 `2.8.0` 正式版，并上线了[新的文档站点](https://layui.dev)，这是一次朴实的回归，更是情怀的延续。 但我们仍然坚持两年前那则公告中的观点， _即仍然推荐大家去拥抱主流，始终保持对前沿技术的无限热爱，是开发者们都应具备的思维属性_。 **而 Layui 所做的，是为填补主流之外的那些略显狭小的空隙**。Layui 虽不是前端主流，但也早已不是作者个人的 Layui，而是所有仍在坚持使用它的人的 Layui，它仍然支撑着许多项目，也代表着许多人的工作。作为开源创作者，应该要为这些坚持者而守望。
未来，Layui 会持续陪伴着所有为之热爱的人们，共同去探索和论证 Layui 开发模式的可行性。
未来，Layui 会持续陪伴着所有为之热爱的人们，共同去论证 Layui 开发模式的可行性。
## 开源许可

2
dist/css/layui.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/layui.js vendored
View File

File diff suppressed because one or more lines are too long

4
docs/.layui/index.md
View File

@ -10,7 +10,7 @@ toc: true
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
<div>
{{- d.include("docs/MOD_NAME/detail/demo.md") }}
{{- d.include("/MOD_NAME/detail/demo.md") }}
</div>
<h2 id="api" lay-toc="{}">API</h2>
@ -30,5 +30,5 @@ toc: true
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
<div>
{{- d.include("docs/MOD_NAME/detail/options.md") }}
{{- d.include("/MOD_NAME/detail/options.md") }}
</div>

34
docs/@note/2.8/news.md
View File

@ -1,34 +0,0 @@
---
title: 🚀 Layui 2.8.0 正式发布，全新文档站朴实归来
toc: false
---
# 🚀 Layui 2.8.0 正式发布，全新文档站朴实归来
<p style="text-align: center;">
<span class="layui-badge-rim">发布：2023-04-24</span>
</p>
我们终于迎来了 Layui `2.8.0` 的正式版本，以及全新的文档站。
在 Layui 过往七年的开源历程中，从未用多达**二十个预览版**去为一个正式版而引路。 显然，`2.8.0` 是 Layui 一次朴实的回归，更是情怀的延续。但却并不是想以此呼吁人们重新去选择它，我们仍然坚持两年前那则《[Layui 原官网下线公告](https://unpkg.com/outeres@0.0.7/img/layui/notice-2021.png)》中的观点， _即仍然推荐大家去拥抱主流，始终保持对前沿技术的无限热爱，是开发者们都应具备的思维属性_。 **而 Layui 所做的，是为填补主流之外的那些略显狭小的空隙**。
Layui 虽不是前端主流，但也早已不是作者个人的 Layui，而是所有仍在坚持使用它的人的 Layui，它仍然支撑着许多项目，也代表着许多人的工作，作为开源创作者的我们，应该要为这些坚持者而守望。
### 新文档站
2021 年 Layui 原官网下线后，互联网出现了许多第三方的 Layui 文档镜像站，这在当时，给大家能继续阅读文档确实提供了便利，但原官网的下线，只是单纯一个网站自身生命周期的结束，它并不意味着 Layui 这样一个开源项目的停更，这在公告中也有清晰的阐述。但或许是由于那则公告的用词过于「悲壮」，使得各大自媒体有所误读，从而让大家都以为是 Layui 停更了。 事实上，自那以后，Layui 仍然在 Github 和 Gitee 保持活跃，并不存在所谓的停止更新，甚至从 `2.6.9` 一直迭代到今天的最新版本，而现存的第三方文档镜像站点的内容却仍然定格在 Layui `2.6.8` 的版本，已严重滞后于 Layui 的当前版本，显然是不利于开发者们对 Layui 的应用。 两年来，Layui 始终处于没有中心文档的窘迫境地，虽然也一度以 **Gitee Pages** 为文档的承载，但似乎很难形成一个焦点和归属感。 随着 `2.8.0` 正式版本的发布，它所包含的上百项的内容更新，使得全新的文档站呼之欲出。
此次上线的新版文档站，旨在为朴实归来的 Layui 提供一个新的精神「基站」，它基于 laytpl 和 markdown 驱动，在版面上进行了大量优化，内容重新编写、力求精简，以辅助大家更好地使用 Layui。 同时，Layui 文档也已和 Layui 本身一同开源在项目中，以供大家在线和离线都能阅读以及协同维护。
- **文档协作:** https://github.com/layui/layui/tree/main/docs
- **文档阅读:** https://layui.dev
---
<div class="layui-btn-container">
<a class="layui-btn" href="https://gitee.com/layui/layui/issues/I6Y8EN" target="_blank">我要评论</a>
<a class="layui-btn layui-btn-primary" href="../../versions.html#2.8.x">
<i class="layui-icon layui-icon-left"></i> 更新日志
</a>
</div>

54
docs/@note/2.8/upgrade-guide.md
View File

@ -1,54 +0,0 @@
---
title: 📑 Layui 2.8 《升级指南》
toc: false
---
# 📑 Layui 2.8 《升级指南》
Layui `2.8` 总体向下兼容，但仍有以下变更需要注意：
1. `2.8` 剔除了 ~~layedit~~ 组件，若是之前用到该组件的，注意采用第三方成熟富文本组件替换，详见：#I5JSE3
1. `2.8` 调整了 `table` 的 `page,limit` 属性，当 `page` 未开启时，则默认不再向后端传递这两个参数
1. `2.8` 调整了 `table` 的特定属性名。序号: `LAY_INDEX` → `LAY_NUM`；下标: `LAY_TABLE_INDEX` → `LAY_INDEX`，若是之前用到这几个特定属性，需更换为新版名称。
1. `2.8` 调整了 `checkbox` 的 `lay-skin` 属性默认为原始风格，原来的标签风格可通过 `lay-skin="tag"` 来设置。
1. `2.8` 调整了 `checkbox` 的私有属性 `lay-text`，采用统一的 `title` 属性替代
1. `2.8` 调整了 `util.fixbar` 的 `showHeight` 属性名称为 `margin`
### 2.7.6 升级到 2.8
`2.8` 对 `2.7.6` 最友好，可直接覆盖升级，只需按照上述提到的几点进行适配即可。
### 2.6.x 升级到 2.8
该跨度相对较大，主要是中间的 `2.6.11` 和 `2.7.x` 的几处调整要适配，包括：
1. **重要**：`2.6.11` 调整了 `laytpl` 的 `{{ d.field }}` 标签的输出为默认开启编码。即与 {{= d.field }} 等同。因此，若输出内容包含 `HTML` 且需要正常渲染的，需采用 `{{- d.field }}` 的标签语句。详细可参考：#I5AXSP
1. `2.6.11` 调整了 `table` 组件的 `escape` 属性默认为 `true`，即默认开启编码功能（之前默认为 `false`）
1. `2.7.5` 调整了 `table` 表头的 `edit` 属性，支持函数写法，且单元格是否编辑不再以 `<td>` 标签上的 `data-edit` 属性为准，而是统一以 `cols` 属性中的 `edit` 属性为准，详细可参考新版文档关于 `edit` 的用法：https://layui.dev/docs/table/#cols.edit
### 2.6.0 以下版本 升级到 2.8
若当前用的版本低于 `2.6.0`，一般不建议升级。但如果非升级不可，除了结合上述提到的变更外，还要重点参考 `2.6.0` 的更新日志中提到的「重要提示」进行适配：https://layui.dev/2.7/docs/base/changelog.html#2.6.0
同时，还要特别注意，`2.6.0` 之前的版本是按需加载内置组件，从 `2.6.0` 开始，统一构建到 `layui.js` 中。因此，要注意下之前引入的 `JS` 业务代码的放置位置，若是放在 `<head>` 区域，需调整放置到 `<body>` 标签内部的尾端。
### layuiAdmin 主题升级 Layui 到 2.8
主要还是根据当前主题中所用的 Layui 的版本，进行对应的适配，尤其是单页版中的动态模板，需按照前面提到的 `laytpl` 的调整进行修改。具体也可以参考：#I65D80
### 其他细节
若按照以上调整后仍然存在兼容性问题，也可以详细阅读过往所有版本的更新日志：
https://layui.dev/docs/versions.html
或新建 `Issue` 进行详细反馈。
---
<div class="layui-btn-container">
<a class="layui-btn" href="https://gitee.com/layui/layui/issues/" target="_blank" style="word-spacing: normal;">前往 Issues</a>
<a class="layui-btn layui-btn-primary" href="../../versions.html#2.8.x">
<i class="layui-icon layui-icon-left"></i> 更新日志
</a>
</div>

2
docs/base.md
View File

@ -157,6 +157,8 @@ if(device.MYAPP){
| layui.onevent(modName, events, callback) | 增加自定义模块事件，一般在内置组件中使用。 |
| layui.event(modName, events, params) | 执行自定义模块事件，搭配 onevent 使用。注<sup>2.8+</sup>：当 events 参数中未设定 filter 时则可重复执行该事件，否则只会执行一次最新添加的事件。 |
| layui.off(events, modName) <sup>2.5.7+</sup> | 用于移除模块相关事件，如：`layui.off('select(filter)', 'form')`，那么`form.on('select(filter)', callback)`事件将会被移除 |
| layui.debounce(fn, wait) <sup>2.8.3+</sup> | 防抖，函数按指定毫秒延时执行 |
| layui.throttle(fn, wait) <sup>2.8.3+</sup> | 节流，限制函数在指定毫秒内不重复执行 |
| layui.factory(modName) | 用于获取模块对应的 `layui.define()` 的回调函数 |
| var lay = layui.lay | 基础模块，提供了更多基础 API，一般供 Layui 内置组件中使用 |

4
docs/carousel/detail/options.md
View File

@ -187,7 +187,7 @@
<td colspan="4" style="text-align: center">
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
<div id="options.callback" class="ws-anchor">
[回调函数](#options.callback)
@ -199,7 +199,7 @@
<td>change <sup>2.7+</sup></td>
<td colspan="3">
<div id="options.change", class="ws-anchor">
<div id="options.change" lay-pid="options" class="ws-anchor">
轮播切换后的回调函数，返回一个对象参数。
</div>

4
docs/carousel/index.md
View File

@ -17,7 +17,7 @@ div[carousel-item]>*:nth-child(2n+1){background-color: #16baaa;}
</style>
<div>
{{- d.include("docs/carousel/detail/demo.md") }}
{{- d.include("/carousel/detail/demo.md") }}
</div>
<h2 id="api" lay-toc="{}">API</h2>
@ -60,7 +60,7 @@ inst.reload(options); // 轮播重载
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
<div>
{{- d.include("docs/carousel/detail/options.md") }}
{{- d.include("/carousel/detail/options.md") }}
</div>

45
docs/code/detail/options.md
View File

@ -127,8 +127,9 @@ layout: ['code', 'preview']
用于开启 `preview` 属性后的面板头部右侧区域工具栏图标，值为一个数组，内置成员：
- `full` 最大化显示
- `window` 在新窗口预览。一般当 `layout: 'iframe'` 时开启，且 code 中须包含完整的 HTML 方可在新窗口正常预览。
- `copy` <sup>2.8.2+</sup> : 代码复制
- `full` : 最大化显示
- `window` : 在新窗口预览。一般当 `layout: 'iframe'` 时开启，且 code 中须包含完整的 HTML 方可在新窗口正常预览。
工具图标将根据数组的排列顺序来显示，如：
@ -162,6 +163,20 @@ toolsEvent: function(othis, type){
<td>-</td>
</tr>
<tr>
<td>copy <sup>2.8.2+</sup></td>
<td>
用于开启代码复制功能图标。若开启 `priview`，则自动放置在 `tools` 属性中，复制图标将显示在容器右上角工具栏；若未开启 `priview`，则显示在 code 区域右上角。
</td>
<td>boolean</td>
<td>
`true`
</td>
</tr>
<tr>
<td>text <sup>2.8+</sup></td>
<td>
@ -233,13 +248,13 @@ Code 容器的风格，可选值有：
<td>encode</td>
<td>
是否对 Code 区域自动转义 html 标签
是否对 code 中的 html 进行编码（转义）。
</td>
<td>boolean</td>
<td>
`false`
`true`
</td>
</tr>
@ -251,7 +266,7 @@ Code 容器的风格，可选值有：
</td>
<td colspan="3">
<div id="options.done" class="ws-anchor">
<div id="options.done" lay-pid="options" class="ws-anchor">
组件渲染完毕的回调函数，函数返回一个 object 类型参数
</div>
@ -262,6 +277,26 @@ done: function(obj){
}
```
</td>
</tr>
<tr>
<td>
[onCopy](#options.onCopy) <sup>2.8.2+</sup>
</td>
<td colspan="3">
<div id="options.onCopy" lay-pid="options" class="ws-anchor">
点击复制图标时的回调函数。 该回调一旦设定，则不再执行内置的复制操作。
</div>
```
onCopy: function(code){
console.log(code); // 得到当前 code 内容
}
```
</td>
</tr>
</tbody>

2
docs/code/index.md
View File

@ -39,5 +39,5 @@ layui.use(function(){
<h2 id="options" lay-toc="{hot: true}">属性</h2>
<div>
{{- d.include("docs/code/detail/options.md") }}
{{- d.include("/code/detail/options.md") }}
</div>

8
docs/color/index.md
View File

@ -24,7 +24,7 @@ toc: true
</div>
<div class="layui-col-sm4">
<div class="layui-bg-blue">
<p>#1e9fff<p>
<p>#1e9fff</p>
<p>经典蓝</p>
</div>
</div>
@ -38,7 +38,7 @@ Layui 选取以象征清新与包容的「蓝绿色」作为主色调，它介
<div class="layui-row layui-col-space15 ws-docs-color">
<div class="layui-col-sm3">
<div class="layui-bg-red">
<p>#ff5722<p>
<p>#ff5722</p>
<p>错误 - Danger</p>
</div>
</div>
@ -70,7 +70,7 @@ Layui 选取以象征清新与包容的「蓝绿色」作为主色调，它介
<div class="layui-row ws-docs-color ws-docs-necolor">
<div class="layui-col-md6">
<div style="background-color: #FAFAFA;">
<p>#fafafa<p>
<p>#fafafa</p>
</div>
</div>
<div class="layui-col-md6">
@ -136,4 +136,4 @@ Layui 的色调基础，除了前面提到的主辅中色之外，还建立在
## 标语
> 不热衷于视觉设计的开发者不是一个好作家。 —— 贤心
> 不热衷于视觉设计的开发者不是一个好作家。 —— 贤心

2
docs/colorpicker/detail/options.md
View File

@ -105,7 +105,7 @@
<td colspan="4" style="text-align: center">
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
<div id="options.callback" lay-pid="options" class="ws-anchor">
[回调函数](#options.callback)

4
docs/colorpicker/index.md
View File

@ -10,7 +10,7 @@ toc: true
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
<div>
{{- d.include("docs/colorpicker/detail/demo.md") }}
{{- d.include("/colorpicker/detail/demo.md") }}
</div>
<p></p>
@ -54,7 +54,7 @@ layui.use(function(){
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
<div>
{{- d.include("docs/colorpicker/detail/options.md") }}
{{- d.include("/colorpicker/detail/options.md") }}
</div>
## 兼容性

14
docs/dropdown/detail/demo.md
View File

@ -2,7 +2,7 @@
<pre class="layui-code" lay-options="{preview: true, text: {preview: '基础用法'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/dropdown/examples/base.md") }}
{{- d.include("/dropdown/examples/base.md") }}
</textarea>
</pre>
@ -10,7 +10,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/dropdown/examples/complex.md") }}
{{- d.include("/dropdown/examples/complex.md") }}
</textarea>
</pre>
@ -18,7 +18,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/dropdown/examples/table.md") }}
{{- d.include("/dropdown/examples/table.md") }}
</textarea>
</pre>
@ -26,7 +26,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/dropdown/examples/on.md") }}
{{- d.include("/dropdown/examples/on.md") }}
</textarea>
</pre>
@ -34,7 +34,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/dropdown/examples/contextmenu.md") }}
{{- d.include("/dropdown/examples/contextmenu.md") }}
</textarea>
</pre>
@ -42,7 +42,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/dropdown/examples/align.md") }}
{{- d.include("/dropdown/examples/align.md") }}
</textarea>
</pre>
@ -52,6 +52,6 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/dropdown/examples/content.md") }}
{{- d.include("/dropdown/examples/content.md") }}
</textarea>
</pre>

4
docs/dropdown/detail/options.md
View File

@ -211,7 +211,7 @@ templet: function(d){
<td colspan="4" style="text-align: center">
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
<div id="options.callback" lay-pid="options" class="ws-anchor">
[回调函数](#options.callback)
@ -242,7 +242,7 @@ ready: function(elemPanel, elem){
</td>
<td colspan="3">
<div id="options.click" class="ws-anchor">
<div id="options.click" lay-pid="options" class="ws-anchor">
菜单项被点击时的回调函数。返回的参数如下：
</div>

2
docs/dropdown/examples/table.md
View File

@ -14,7 +14,7 @@ layui.use(function(){
// dropdown 在表格中的应用
table.render({
elem: '#ID-dropdown-demo-table',
url: '{{d.root}}/static/json/table/demo5.json',
url: '/static/2.8/json/table/demo5.json',
title: '用户数据表',
cols: [[
{type: 'checkbox', fixed: 'left'},

10
docs/dropdown/index.md
View File

@ -10,7 +10,7 @@ toc: true
<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
<div>
{{- d.include("docs/dropdown/detail/demo.md") }}
{{- d.include("/dropdown/detail/demo.md") }}
</div>
在 `content` 属性中传入任意的 html 内容，可替代默认的下拉菜单结构，从而实现更丰富的弹出内容。
@ -62,13 +62,13 @@ layui.use(function(){
<h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
<div>
{{- d.include("docs/dropdown/detail/options.md") }}
{{- d.include("/dropdown/detail/options.md") }}
</div>
<h3 id="options.data" lay-toc="{level: 3, hot: true}">data 格式</h3>
<div>
{{- d.include("docs/dropdown/detail/options.data.md") }}
{{- d.include("/dropdown/detail/options.data.md") }}
</div>
@ -95,7 +95,7 @@ layui.use(function(){
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/dropdown/examples/reload.md") }}
{{- d.include("/dropdown/examples/reload.md") }}
</textarea>
</pre>
@ -109,7 +109,7 @@ layui.use(function(){
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/dropdown/examples/reloadData.md") }}
{{- d.include("/dropdown/examples/reloadData.md") }}
</textarea>
</pre>

4
docs/fixbar/index.md
View File

@ -10,7 +10,7 @@ toc: true
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
<div>
{{- d.include("docs/fixbar/detail/demo.md") }}
{{- d.include("/fixbar/detail/demo.md") }}
</div>
<h2 id="api" lay-toc="{}">API</h2>
@ -29,5 +29,5 @@ toc: true
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
<div>
{{- d.include("docs/fixbar/detail/options.md") }}
{{- d.include("/fixbar/detail/options.md") }}
</div>

2
docs/flow/detail/options.md
View File

@ -106,7 +106,7 @@ layui.each(data, function(index, item){
<td>done</td>
<td colspan="3">
<div id="options.done" class="ws-anchor">
<div id="options.done" lay-pid="options" class="ws-anchor">
滚动条到达临界点触发加载的回调函数。函数返回的参数如下：
</div>

4
docs/flow/index.md
View File

@ -18,7 +18,7 @@ toc: true
</style>
<div>
{{- d.include("docs/flow/detail/demo.md") }}
{{- d.include("/flow/detail/demo.md") }}
</div>
<h2 id="api" lay-toc="{}">API</h2>
@ -40,7 +40,7 @@ toc: true
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
<div>
{{- d.include("docs/flow/detail/options.md") }}
{{- d.include("/flow/detail/options.md") }}
</div>
<h2 id="lazyimg" lay-toc="{level: 2}">图片懒加载</h2>

40
docs/form/checkbox.md
View File

@ -57,8 +57,11 @@ toc: true
<textarea>
<div class="layui-form">
<input type="checkbox" name="AAA" lay-skin="switch">
<br>
<input type="checkbox" name="BBB" title="ON|OFF" lay-skin="switch" checked>
<input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch">
<br>
<input type="checkbox" name="CCC" title="开启|关闭" lay-skin="switch">
<br>
<input type="checkbox" name="DDD" lay-skin="switch" disabled>
</div>
@ -69,6 +72,41 @@ toc: true
在 `title` 属性中通过 `|` 分隔符可设置两种状态下的不同标题
<h2 id="title" lay-toc="{hot: true}">标题模板 <sup>2.8.3+</sup></h2>
在 `checkbox` 元素后的相邻元素设置特定属性 `lay-checkbox`，可以与 `checkbox` 标题进行绑定。
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
<div class="layui-form">
<div class="layui-form-item">
<input type="checkbox" name="AAA" value="0">
<div lay-checkbox>
自定义<a href="#target-url"><ins>标题模板</ins></a>
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="BBB" value="1" lay-skin="tag">
<div lay-checkbox>
<i class="layui-icon layui-icon-heart"></i> 标题模板</span>
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="CCC" value="2" lay-skin="switch">
<div lay-checkbox>
<i class="layui-icon layui-icon-moon"></i> |
<i class="layui-icon layui-icon-light"></i>
</div>
</div>
</div>
<!-- import layui -->
</textarea>
</pre>
<h2 id="on" lay-toc="{hot: true}">复选框事件</h2>
`form.on('checkbox(filter)', callback);`

2
docs/form/examples/form.demo.md
View File

@ -42,7 +42,7 @@
<div class="layui-form-item">
<label class="layui-form-label">自定义验证</label>
<div class="layui-input-inline layui-input-wrap">
<input type="password" name="password" lay-verify="pass" placeholder="请输入" autocomplete="off" lay-affix="eye" class="layui-input">
<input type="password" name="password" lay-verify="required|pass" placeholder="请输入" autocomplete="off" lay-affix="eye" class="layui-input">
</div>
<div class="layui-form-mid layui-text-em">6 到 12 位字符</div>
</div>

16
docs/form/index.md
View File

@ -15,7 +15,7 @@ toc: true
obj.render()
}}">
<textarea>
{{- d.include('docs/form/examples/form.demo.md') }}
{{- d.include("/form/examples/form.demo.md") }}
</textarea>
</pre>
@ -25,7 +25,7 @@ toc: true
obj.render()
}}">
<textarea>
{{- d.include('docs/form/examples/form.pane.md') }}
{{- d.include("/form/examples/form.pane.md") }}
</textarea>
</pre>
@ -35,7 +35,7 @@ toc: true
obj.render()
}}">
<textarea>
{{- d.include('docs/form/examples/form.login.md') }}
{{- d.include("/form/examples/form.login.md") }}
</textarea>
</pre>
@ -45,7 +45,7 @@ toc: true
obj.render()
}}">
<textarea>
{{- d.include('docs/form/examples/form.reg.md') }}
{{- d.include("/form/examples/form.reg.md") }}
</textarea>
</pre>
@ -74,7 +74,7 @@ form 还可以借助*栅格*实现更灵活的响应式布局。
obj.render()
}}">
<textarea>
{{- d.include('docs/form/examples/form.grid.md') }}
{{- d.include("/form/examples/form.grid.md") }}
</textarea>
</pre>
@ -232,7 +232,7 @@ Layui 对表单做了相对巧妙的支持，只需在表单元素上设置 `lay
obj.render()
}}">
<textarea>
{{- d.include('docs/form/examples/form.verify.md') }}
{{- d.include("/form/examples/form.verify.md") }}
</textarea>
</pre>
@ -252,7 +252,7 @@ Layui 对表单做了相对巧妙的支持，只需在表单元素上设置 `lay
obj.render()
}}">
<textarea>
{{- d.include('docs/form/examples/form.validate.md') }}
{{- d.include("/form/examples/form.validate.md") }}
</textarea>
</pre>
@ -268,7 +268,7 @@ Layui 对表单做了相对巧妙的支持，只需在表单元素上设置 `lay
obj.render()
}}">
<textarea>
{{- d.include('docs/form/examples/form.val.md') }}
{{- d.include("/form/examples/form.val.md") }}
</textarea>
</pre>

6
docs/form/input.md
View File

@ -66,7 +66,7 @@ toc: true
obj.render();
}}">
<textarea>
{{- d.include('docs/form/examples/input.group.md') }}
{{- d.include("/form/examples/input.group.md") }}
</textarea>
</pre>
@ -91,7 +91,7 @@ toc: true
obj.render();
}}">
<textarea>
{{- d.include('docs/form/examples/input.pre.suf.md') }}
{{- d.include("/form/examples/input.pre.suf.md") }}
</textarea>
</pre>
@ -175,7 +175,7 @@ input 放在前后缀容器中：
obj.render();
}}">
<textarea>
{{- d.include('docs/form/examples/input.affix.custom.md') }}
{{- d.include("/form/examples/input.affix.custom.md") }}
</textarea>
</pre>

6
docs/index.md
View File

@ -30,7 +30,7 @@ toc: true
### 🌕 官网下载
您可以在我们的 [官网首页](/) 下载到 Layui 当前版本，它经过了自动化构建，更适合用于生产环境。目录结构如下：
您可以在 [官网首页](/) 或 [更新日志](./versions.html) 页面下载到 Layui，它经过了自动化构建，更适合用于生产环境。目录结构如下：
```
layui/
@ -70,11 +70,11 @@ npm i layui
```
<!-- 引入 layui.css -->
<link href="//unpkg.com/layui@{{= d.layui._v }}/dist/css/layui.css" rel="stylesheet">
<link href="//unpkg.com/layui@{{= d.layui.v }}/dist/css/layui.css" rel="stylesheet">
```
```
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@{{= d.layui._v }}/dist/layui.js">
<script src="//unpkg.com/layui@{{= d.layui.v }}/dist/layui.js">
```
<h2 id="quickstart" lay-toc="{}">快速上手</h2>

22
docs/laydate/detail/demo.md
View File

@ -2,7 +2,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', text: {preview: '常规用法'}, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/laydate/examples/normal.md") }}
{{- d.include("/laydate/examples/normal.md") }}
</textarea>
</pre>
@ -12,7 +12,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/laydate/examples/type.md") }}
{{- d.include("/laydate/examples/type.md") }}
</textarea>
</pre>
@ -20,7 +20,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/laydate/examples/range.md") }}
{{- d.include("/laydate/examples/range.md") }}
</textarea>
</pre>
@ -28,7 +28,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/laydate/examples/shortcut.md") }}
{{- d.include("/laydate/examples/shortcut.md") }}
</textarea>
</pre>
@ -37,7 +37,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/laydate/examples/format.md") }}
{{- d.include("/laydate/examples/format.md") }}
</textarea>
</pre>
@ -46,7 +46,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/laydate/examples/mark.md") }}
{{- d.include("/laydate/examples/mark.md") }}
</textarea>
</pre>
@ -55,7 +55,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/laydate/examples/limit.md") }}
{{- d.include("/laydate/examples/limit.md") }}
</textarea>
</pre>
@ -64,7 +64,7 @@
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/laydate/examples/elem.md") }}
{{- d.include("/laydate/examples/elem.md") }}
</textarea>
</pre>
@ -75,7 +75,7 @@
obj.render();
}}">
<textarea>
{{- d.include("docs/laydate/examples/more.md") }}
{{- d.include("/laydate/examples/more.md") }}
</textarea>
</pre>
@ -84,7 +84,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/laydate/examples/theme.md") }}
{{- d.include("/laydate/examples/theme.md") }}
</textarea>
</pre>
@ -92,6 +92,6 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/laydate/examples/static.md") }}
{{- d.include("/laydate/examples/static.md") }}
</textarea>
</pre>

26
docs/laydate/detail/options.md
View File

@ -32,7 +32,7 @@
</td>
<td>
<div id="options.type" class="ws-anchor">
<div id="options.type" lay-pid="options" class="ws-anchor">
组件面板选择类型。支持以下可选值：
</div>
@ -60,7 +60,7 @@
</td>
<td>
<div id="options.range" class="ws-anchor">
<div id="options.range" lay-pid="options" class="ws-anchor">
开启左右面板的范围选择，将会根据 `type` 类型呈现对应的范围选择面板。该属性值支持以下类型：
@ -123,7 +123,7 @@ range: ['#start', '#end']
</td>
<td colspan="3">
<div id="options.format" class="ws-anchor">
<div id="options.format" lay-pid="options" class="ws-anchor">
自定义日期和时间值的返回格式,默认值： `yyyy-MM-dd`。 其格式符规则如下：
@ -167,7 +167,7 @@ format: '北京时间 H 点 m 分'
</td>
<td>
<div id="options.value" class="ws-anchor">
<div id="options.value" lay-pid="options" class="ws-anchor">
初始值。值支持以下类型：
</div>
@ -213,7 +213,7 @@ value: new Date(1534766888000) // 参数即为：2018-08-20 20:08:08 的毫秒
</td>
<td>
<div id="options.shortcuts" class="ws-anchor">
<div id="options.shortcuts" lay-pid="options" class="ws-anchor">
用于开启面板左侧的快捷选择栏。其值配置规则如下：
</div>
@ -279,7 +279,7 @@ weekStart: 1 // 设置周一为起始周
</td>
<td colspan="3">
<div id="options.min" class="ws-anchor">
<div id="options.min" lay-pid="options" class="ws-anchor">
限制可供选择的最小或最大日期时间值。默认值：
@ -373,7 +373,7 @@ max: 7 // 最大日期为 7 天后
<td>
<div id="options.shade" class="ws-anchor">
<div id="options.shade" lay-pid="options" class="ws-anchor">
用于开启弹出日期面板时的遮罩。值支持以下可选类型：
</div>
@ -463,7 +463,7 @@ btns: ['clear', 'confirm']
</td>
<td>
<div id="options.theme" class="ws-anchor">
<div id="options.theme" lay-pid="options" class="ws-anchor">
设置组件面板主题。除了默认主题，还内置主题： `molv` `grid` `circle`<sup>2.8+</sup> ，且支持直接传入自定义的主题色。
@ -507,7 +507,7 @@ theme: ['grid', '#FF5722']
</td>
<td>
<div id="options.mark" class="ws-anchor">
<div id="options.mark" lay-pid="options" class="ws-anchor">
自定义日期标记。该属性是对 `calendar` 属性的进一步延伸，灵活度更高。属性可批量设置多个日期标记，如：
@ -563,7 +563,7 @@ holidays: [
<td colspan="4" style="text-align: center">
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
<div id="options.callback" lay-pid="options" class="ws-anchor">
[回调函数](#options.callback)
@ -579,7 +579,7 @@ holidays: [
</td>
<td colspan="3">
<div id="options.ready" class="ws-anchor">
<div id="options.ready" lay-pid="options" class="ws-anchor">
组件面板初始打开的回调函数。返回的参数如下：
</div>
@ -609,7 +609,7 @@ ready: function(date){
</td>
<td colspan="3">
<div id="options.change" class="ws-anchor">
<div id="options.change" lay-pid="options" class="ws-anchor">
日期时间被切换后的回调函数。返回的参数如下：
</div>
@ -631,7 +631,7 @@ change: function(value, date, endDate){
</td>
<td colspan="3">
<div id="options.done" class="ws-anchor">
<div id="options.done" lay-pid="options" class="ws-anchor">
日期时间选择完毕的回调函数，点击清空、现在、确定也均会触发。返回的参数如下：
</div>

9
docs/laydate/examples/mark.md
View File

@ -55,12 +55,11 @@ layui.use(function(){
// 节假日和补班日标注
laydate.render({
elem: '#ID-laydate-holidays',
value: '2022-5-21',
value: '2023-05-08',
holidays: [ // v2.7.3 新增
// 2022 年的节假日，可参见国家每年公布的法定节假日安排
['2022-1-1', '2022-1-2', '2022-1-3', '2022-1-31', '2022-2-1', '2022-2-2', '2022-2-3', '2022-2-4', '2022-2-5', '2022-2-6', '2022-4-3', '2022-4-4', '2022-4-5', '2022-4-30', '2022-5-1', '2022-5-2', '2022-5-3', '2022-5-4', '2022-6-3', '2022-6-4', '2022-6-5', '2022-9-10', '2022-9-11', '2022-9-12', '2022-10-1', '2022-10-2', '2022-10-3', '2022-10-4', '2022-10-5', '2022-10-6', '2022-10-7'],
// 2022 年的补班日
['2022-1-29', '2022-1-30', '2022-4-2', '2022-4-24', '2022-5-7', '2022-10-8', '2022-10-9']
['2022-12-31', '2023-1-1', '2023-1-2', '2023-1-21', '2023-1-22', '2023-1-23', '2023-1-24', '2023-1-25', '2023-1-26', '2023-1-27', '2023-4-5', '2023-4-29', '2023-4-30', '2023-5-1', '2023-5-2', '2023-5-3', '2023-6-22', '2023-6-23', '2023-6-24', '2023-9-29', '2023-9-30', '2023-10-1', '2023-10-2', '2023-10-3', '2023-10-4', '2023-10-5', '2023-10-6'],
// 2023 年的补班日
['2023-1-28', '2023-1-29', '2023-4-23', '2023-5-6', '2023-6-25', '2023-10-7', '2023-10-8']
]
});
});

4
docs/laydate/index.md
View File

@ -21,7 +21,7 @@ toc: true
</style>
<div class="ws-demo-laydate">
{{- d.include("docs/laydate/detail/demo.md") }}
{{- d.include("/laydate/detail/demo.md") }}
</div>
<p></p>
@ -69,7 +69,7 @@ layui.use(function(){
<h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
<div>
{{- d.include("docs/laydate/detail/options.md") }}
{{- d.include("/laydate/detail/options.md") }}
</div>
<h3 id="hint" lay-pid="api" class="ws-anchor ws-bold">弹出提示 <sup>2.8+</sup></h3>

24
docs/layer/detail/demo.md
View File

@ -2,7 +2,7 @@
<pre class="layui-code" lay-options="{preview: true, text: {preview: '在线测试'}, layout: ['preview']}">
<textarea>
{{- d.include("docs/layer/detail/run.md") }}
{{- d.include("/layer/detail/run.md") }}
</textarea>
</pre>
@ -10,7 +10,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', text: {preview: '弹层类型'}, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/layer/examples/type.md") }}
{{- d.include("/layer/examples/type.md") }}
</textarea>
</pre>
@ -18,7 +18,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/layer/examples/alert.md") }}
{{- d.include("/layer/examples/alert.md") }}
</textarea>
</pre>
@ -26,7 +26,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/layer/examples/page.md") }}
{{- d.include("/layer/examples/page.md") }}
</textarea>
</pre>
@ -34,7 +34,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/layer/examples/iframe.md") }}
{{- d.include("/layer/examples/iframe.md") }}
</textarea>
</pre>
@ -44,7 +44,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/layer/examples/load.md") }}
{{- d.include("/layer/examples/load.md") }}
</textarea>
</pre>
@ -52,7 +52,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/layer/examples/tips.md") }}
{{- d.include("/layer/examples/tips.md") }}
</textarea>
</pre>
@ -60,7 +60,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/layer/examples/other.md") }}
{{- d.include("/layer/examples/other.md") }}
</textarea>
</pre>
@ -68,19 +68,19 @@
<pre class="layui-code" lay-options="{preview: true, text: {preview: '弹出位置'}, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/layer/examples/offset.md") }}
{{- 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("docs/layer/examples/direction.md") }}
{{- 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("docs/layer/examples/more.md") }}
{{- d.include("/layer/examples/more.md") }}
</textarea>
</pre>
@ -89,7 +89,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/layer/examples/skin.md") }}
{{- d.include("/layer/examples/skin.md") }}
</script>
</textarea>
</pre>

74
docs/layer/detail/options.md
View File

@ -76,7 +76,7 @@ title: false // 不显示标题栏
</td>
<td colspan="3">
<div id="options.content" class="ws-anchor">
<div id="options.content" lay-pid="options" class="ws-anchor">
弹层内容。 可传入的值比较灵活，支持以下使用场景：
@ -129,7 +129,7 @@ layer.open({
</td>
<td>
<div id="options.area" class="ws-anchor">
<div id="options.area" lay-pid="options" class="ws-anchor">
设置弹层的宽高，其值支持以下可选类型：
</div>
@ -181,7 +181,7 @@ layer.open({
</td>
<td>
<div id="options.offset" class="ws-anchor">
<div id="options.offset" lay-pid="options" class="ws-anchor">
弹层的偏移坐标。 支持以下可选值：
</div>
@ -215,7 +215,7 @@ layer.open({
</td>
<td>
<div id="options.anim" class="ws-anchor">
<div id="options.anim" lay-pid="options" class="ws-anchor">
弹层的出场动画。支持以下可选值：
</div>
@ -266,7 +266,7 @@ layer.open({
是否开启标题栏的最大化和最小化图标。
</td>
<td>array</td>
<td>boolean</td>
<td>
`false`
@ -281,7 +281,7 @@ layer.open({
</td>
<td>
<div id="options.closeBtn" class="ws-anchor">
<div id="options.closeBtn" lay-pid="options" class="ws-anchor">
是否开启标题栏的关闭图标，或设置关闭图标风格。
</div>
@ -305,7 +305,7 @@ layer.open({
</td>
<td>
<div id="options.icon" class="ws-anchor">
<div id="options.icon" lay-pid="options" class="ws-anchor">
提示图标。 信息框和加载层的私有参数。
</div>
@ -339,7 +339,7 @@ layer.load(1); // 加载层风格一
</td>
<td>
<div id="options.btn" class="ws-anchor">
<div id="options.btn" lay-pid="options" class="ws-anchor">
自定义按钮。 页面层默认不开启。 按钮可无限数量，每一个按钮均会按照数组顺序生成对应的回调函数，如：
</div>
@ -377,7 +377,7 @@ layer.open({
</td>
<td>
<div id="options.btnAlign" class="ws-anchor">
<div id="options.btnAlign" lay-pid="options" class="ws-anchor">
按钮水平对其方式。支持以下可选值：
</div>
@ -402,7 +402,7 @@ layer.open({
</td>
<td>
<div id="options.skin" class="ws-anchor">
<div id="options.skin" lay-pid="options" class="ws-anchor">
弹层的主题风格。通过赋值对应的 className，实现对主题样式的定制。除了默认主题风格，还支持以下可选主题：
</div>
@ -425,7 +425,7 @@ layer.open({
</td>
<td>
<div id="options.shade" class="ws-anchor">
<div id="options.shade" lay-pid="options" class="ws-anchor">
弹层的遮罩。 支持以下写法：
</div>
@ -453,6 +453,30 @@ layer.open({
`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>
@ -470,16 +494,6 @@ layer.open({
</td>
</tr>
<tr>
<td>id</td>
<td>
弹层的 ID 值。一般用于防止页面层或 iframe 层的重复弹出。
</td>
<td>string</td>
<td>-</td>
</tr>
<tr>
<td>fixed</td>
<td>
@ -627,7 +641,7 @@ tips: [1, '#000'] // 吸附在上的深色贴士层
<td colspan="4" style="text-align: center">
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
<div id="options.callback" lay-pid="options" class="ws-anchor">
[回调函数](#options.callback)
@ -672,7 +686,7 @@ layer.open({
</td>
<td colspan="3">
<div id="options.yes" class="ws-anchor">
<div id="options.yes" lay-pid="options" class="ws-anchor">
点击「确定」按钮的回调函数。返回的参数同 `success`
@ -698,7 +712,7 @@ layer.open({
</td>
<td colspan="3">
<div id="options.cancel" class="ws-anchor">
<div id="options.cancel" lay-pid="options" class="ws-anchor">
点击标题栏关闭按钮的回调函数。返回的参数同 `success`
</div>
@ -724,7 +738,7 @@ layer.open({
</td>
<td colspan="3">
<div id="options.end" class="ws-anchor">
<div id="options.end" lay-pid="options" class="ws-anchor">
弹层被关闭且销毁后的回调函数。
</div>
@ -747,7 +761,7 @@ layer.open({
</td>
<td colspan="3">
<div id="options.moveEnd" class="ws-anchor">
<div id="options.moveEnd" lay-pid="options" class="ws-anchor">
弹层拖拽完毕后的回调函数。
</div>
@ -771,7 +785,7 @@ layer.open({
</td>
<td colspan="3">
<div id="options.resizing" class="ws-anchor">
<div id="options.resizing" lay-pid="options" class="ws-anchor">
弹层拉伸过程中的回调函数
</div>
@ -795,7 +809,7 @@ layer.open({
</td>
<td colspan="3">
<div id="options.full" class="ws-anchor">
<div id="options.full" lay-pid="options" class="ws-anchor">
弹层最大化后的回调函数。返回的参数同 `success`
@ -821,7 +835,7 @@ layer.open({
</td>
<td colspan="3">
<div id="options.min" class="ws-anchor">
<div id="options.min" lay-pid="options" class="ws-anchor">
弹层最小化后的回调函数。返回的参数同 `success`
@ -848,7 +862,7 @@ layer.open({
</td>
<td colspan="3">
<div id="options.restore" class="ws-anchor">
<div id="options.restore" lay-pid="options" class="ws-anchor">
弹层被还原后的回调函数。返回的参数同 `success`
</div>

4
docs/layer/index.md
View File

@ -13,7 +13,7 @@ toc: true
点击下述按钮，查看每个示例对应的弹层效果。
<div>
{{- d.include("docs/layer/detail/demo.md") }}
{{- d.include("/layer/detail/demo.md") }}
</div>
<h2 id="api" lay-toc="{hot: true, bold: true}">API</h2>
@ -71,7 +71,7 @@ var index = layer.open({
<h2 id="options" lay-toc="{level: 2, hot: true}">基础属性</h2>
<div>
{{- d.include("docs/layer/detail/options.md") }}
{{- d.include("/layer/detail/options.md") }}
</div>
<h2 id="alert" lay-pid="api" class="ws-anchor ws-bold">弹出信息框</h2>

4
docs/laypage/detail/options.md
View File

@ -201,7 +201,7 @@
<td colspan="4" style="text-align: center">
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
<div id="options.callback" lay-pid="options" class="ws-anchor">
[回调函数](#options.callback)
@ -217,7 +217,7 @@
</td>
<td colspan="3">
<div id="options.jump" class="ws-anchor">分页跳转后的回调函数。函数返回两个参数：</div>
<div id="options.jump" lay-pid="options" class="ws-anchor">分页跳转后的回调函数。函数返回两个参数：</div>
- 参数 `obj` : 当前分页相关的所有选项值
- 参数 `first` : 是否首次渲染，一般用于初始加载的判断

4
docs/laypage/index.md
View File

@ -10,7 +10,7 @@ toc: true
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
<div class="ws-detail">
{{- d.include("docs/laypage/detail/demo.md") }}
{{- d.include("/laypage/detail/demo.md") }}
</div>
<h2 id="api" lay-toc="{}">API</h2>
@ -29,7 +29,7 @@ toc: true
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
<div>
{{- d.include("docs/laypage/detail/options.md") }}
{{- d.include("/laypage/detail/options.md") }}
</div>
## 小贴士

4
docs/laytpl/index.md
View File

@ -12,7 +12,7 @@ toc: true
在以下*模板*或*数据*中进行编辑，下方*视图*将呈现对应结果。
<div>
{{- d.include("docs/laytpl/detail/demo.md") }}
{{- d.include("/laytpl/detail/demo.md") }}
</div>
<h2 id="api" lay-toc="{}">API</h2>
@ -95,7 +95,7 @@ compile.render(data, callback); // 模板渲染
<h2 id="grammar" lay-toc="{level: 2, hot: true}">标签语法</h2>
<div>
{{- d.include("docs/laytpl/detail/options.md") }}
{{- d.include("/laytpl/detail/options.md") }}
</div>

2
docs/menu/index.md
View File

@ -11,7 +11,7 @@ toc: true
<pre class="layui-code" lay-options="{preview: 'iframe', style: 'height: 535px;', layout: ['preview', 'code'], tools: ['full', 'window']}">
<textarea>
{{- d.include("docs/menu/examples/demo.md") }}
{{- d.include("/menu/examples/demo.md") }}
</textarea>
</pre>

8
docs/nav/index.md
View File

@ -87,7 +87,7 @@ toc: true
<h3 id="align-theme" lay-toc="{level: 2}" class="ws-bold">导航主题</h3>
给导航容器追加任意背景色 `class`，内置背景色参考：[#背景色公共类](../class.html)
给导航容器追加任意背景色 `class`，内置背景色参考：[#背景色公共类](../class/#bg)
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render();
@ -207,7 +207,7 @@ toc: true
<pre class="layui-code" lay-options="{preview: 'iframe', style: 'height: 525px;', layout: ['code', 'preview'], tools: ['full', 'window']}">
<textarea>
{{- d.include("docs/nav/examples/side.md") }}
{{- d.include("/nav/examples/side.md") }}
</textarea>
</pre>
@ -307,8 +307,8 @@ layui.use(function(){
<h3>默认面包屑</h3>
<span class="layui-breadcrumb">
<a href="{{d.root}}/">首页</a>
<a href="{{d.root}}/demo/">演示</a>
<a href="">首页</a>
<a href="">演示</a>
<a><cite>导航元素</cite></a>
</span>

4
docs/rate/index.md
View File

@ -10,7 +10,7 @@ toc: true
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
<div>
{{- d.include("docs/rate/detail/demo.md") }}
{{- d.include("/rate/detail/demo.md") }}
</div>
<p></p>
@ -53,5 +53,5 @@ layui.use(function(){
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
<div>
{{- d.include("docs/rate/detail/options.md") }}
{{- d.include("/rate/detail/options.md") }}
</div>

2
docs/slider/detail/options.md
View File

@ -201,7 +201,7 @@
<td colspan="4" style="text-align: center">
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
<div id="options.callback" lay-pid="options" class="ws-anchor">
[回调函数](#options.callback)

4
docs/slider/index.md
View File

@ -14,7 +14,7 @@ toc: true
.demo-slider-container .layui-code-item-preview > div{margin: 24px 0;}
</style>
<div class="demo-slider-container">
{{- d.include("docs/slider/detail/demo.md") }}
{{- d.include("/slider/detail/demo.md") }}
</div>
<h2 id="api" lay-toc="{}">API</h2>
@ -89,5 +89,5 @@ ins1.setValue(60, 1) // 设置结尾值
<h2 id="options" lay-toc="{level: 2, hot: true}">属性</h2>
<div>
{{- d.include("docs/slider/detail/options.md") }}
{{- d.include("/slider/detail/options.md") }}
</div>

2
docs/tab/index.md
View File

@ -11,7 +11,7 @@ toc: true
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
<div class="ws-detail">
{{- d.include("docs/tab/detail/demo.md") }}
{{- d.include("/tab/detail/demo.md") }}
</div>
<h2 id="skin" lay-toc="{hot: true}">风格</h2>

30
docs/table/detail/demo.md
View File

@ -15,7 +15,7 @@
}
}}">
<textarea>
{{- d.include('docs/table/examples/demo.md') }}
{{- d.include("/table/examples/demo.md") }}
</textarea>
</pre>
@ -25,7 +25,7 @@
<pre class="layui-code" lay-options="{preview: true, style: 'height: 335px; overflow: auto;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include('docs/table/examples/static.md') }}
{{- d.include("/table/examples/static.md") }}
</textarea>
</pre>
@ -41,7 +41,7 @@
}
}}">
<textarea>
{{- d.include('docs/table/examples/autoRender.md') }}
{{- d.include("/table/examples/autoRender.md") }}
</textarea>
</pre>
@ -49,7 +49,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include('docs/table/examples/init.md') }}
{{- d.include("/table/examples/init.md") }}
</textarea>
</pre>
@ -63,7 +63,7 @@
}
}}">
<textarea>
{{- d.include('docs/table/examples/data.md') }}
{{- d.include("/table/examples/data.md") }}
</textarea>
</pre>
@ -77,7 +77,7 @@
}
}}">
<textarea>
{{- d.include('docs/table/examples/templet.md') }}
{{- d.include("/table/examples/templet.md") }}
</textarea>
</pre>
@ -85,7 +85,7 @@
<pre class="layui-code" lay-options="{preview: 'iframe', style: 'height: 538px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include('docs/table/examples/css.md') }}
{{- d.include("/table/examples/css.md") }}
</textarea>
</pre>
@ -99,7 +99,7 @@
}
}}">
<textarea>
{{- d.include('docs/table/examples/page.md') }}
{{- d.include("/table/examples/page.md") }}
</textarea>
</pre>
@ -114,7 +114,7 @@
}
}}">
<textarea>
{{- d.include('docs/table/examples/search.md') }}
{{- d.include("/table/examples/search.md") }}
</textarea>
</pre>
@ -124,7 +124,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include('docs/table/examples/editable.md') }}
{{- d.include("/table/examples/editable.md") }}
</textarea>
</pre>
@ -136,7 +136,7 @@
}
}}">
<textarea>
{{- d.include('docs/table/examples/editModes.md') }}
{{- d.include("/table/examples/editModes.md") }}
</textarea>
</pre>
@ -148,7 +148,7 @@
}
}}">
<textarea>
{{- d.include('docs/table/examples/parse.md') }}
{{- d.include("/table/examples/parse.md") }}
</textarea>
</pre>
@ -162,7 +162,7 @@
}
}}">
<textarea>
{{- d.include('docs/table/examples/filter.md') }}
{{- d.include("/table/examples/filter.md") }}
</textarea>
</pre>
@ -174,7 +174,7 @@
}
}}">
<textarea>
{{- d.include('docs/table/examples/setRowChecked.md') }}
{{- d.include("/table/examples/setRowChecked.md") }}
</textarea>
</pre>
@ -189,7 +189,7 @@
}
}}">
<textarea>
{{- d.include('docs/table/examples/theads.md') }}
{{- d.include("/table/examples/theads.md") }}
</textarea>
</pre>

14
docs/table/detail/options.cols.md
View File

@ -328,6 +328,20 @@ edit: function(d){
`false`
</td>
</tr>
<tr>
<td>ignoreExport <sup>2.8.3+</sup></td>
<td>
是否导出时忽略该列
</td>
<td>boolean</td>
<td>
`false`
</td>
</tr>
<tr>

2
docs/table/examples/autoRender.md
View File

@ -1,4 +1,4 @@
<table class="layui-table" lay-data="{height:315, url:'{{d.root}}/static/json/table/user.json', page:true}" id="ID-table-demo-init">
<table class="layui-table" lay-data="{height:315, url:'/static/2.8/json/table/user.json', page:true}" id="ID-table-demo-init">
<thead>
<tr>
<th lay-data="{field:'id', width:80, sort: true}">ID</th>

2
docs/table/examples/css.md
View File

@ -49,7 +49,7 @@
// 创建渲染实例
table.render({
elem: '#ID-table-demo-css',
url:'{{d.root}}/static/json/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
url:'/static/2.8/json/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
page: true,
height: 'full-35',
lineStyle: 'height: 151px;', // 定义表格的多行样式

2
docs/table/examples/demo.md
View File

@ -64,7 +64,7 @@ layui.use(['table', 'dropdown'], function(){
// 创建渲染实例
table.render({
elem: '#test',
url:'{{d.root}}/static/json/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
url:'/static/2.8/json/table/demo1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
toolbar: '#toolbarDemo',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',

28
docs/table/examples/editModes.md
View File

@ -49,7 +49,7 @@ layui.use(function(){
// 渲染
table.render({
elem: '#ID-table-demo-editmodes',
url: '{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
url: '/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
page: true,
css: [ // 设置单元格样式
// 取消默认的溢出隐藏，并设置适当高度
@ -68,7 +68,7 @@ layui.use(function(){
]],
done: function(res, curr, count){
var options = this;
// 获取当前行数据
table.getRowData = function(elem){
var index = $(elem).closest('tr').data('index');
@ -80,6 +80,9 @@ layui.use(function(){
var value = this.value; // 获取选中项 value
var data = table.getRowData(this); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
// 更新数据中对应的字段
data.city = value;
// 显示 - 仅用于演示
layer.msg('选中值: '+ value +'<br>当前行数据：'+ JSON.stringify(data));
});
@ -90,6 +93,9 @@ layui.use(function(){
// 获取当前行数据(如 id 等字段，以作为数据修改的索引)
var data = table.getRowData(obj.elem);
// 更新数据中对应的字段
data.city = value;
console.log(data);
});
@ -113,6 +119,9 @@ layui.use(function(){
this.elem.find('span').html(obj.title);
// 更新数据中对应的字段
data.sex = obj.title;
// 显示 - 仅用于演示
layer.msg('选中值: '+ obj.title +'<br>当前行数据：'+ JSON.stringify(data));
}
@ -123,6 +132,9 @@ layui.use(function(){
elem: '.laydate-demo',
done: function(value, date, endDate){
var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
// 更新数据中对应的字段
data.date = value;
// 显示 - 仅用于演示
layer.msg('选中值: '+ value +'<br>当前行数据：'+ JSON.stringify(data));
@ -134,21 +146,29 @@ layui.use(function(){
elem: '.colorpicker-demo',
done: function(value){
var data = table.getRowData(this.elem); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
// 更新数据中对应的字段
data.color = value;
// 显示 - 仅用于演示
layer.msg('选中值: '+ value +'<br>当前行数据：'+ JSON.stringify(data));
}
});
// 单元格普通编辑事件
table.on('edit(ID-table-demo-editmodes)', function(obj){
var value = obj.value // 得到修改后的值
var data = obj.data // 得到所在行所有键值
var field = obj.field; // 得到字段
// 更新数据中对应的字段
var update = {};
update[field] = value;
obj.update(update);
// 编辑后续操作，如提交更新请求，以完成真实的数据更新
// …
// 显示 - 仅用于演示
layer.msg('编辑值: '+ value +'<br>当前行数据：'+ JSON.stringify(data));
});

2
docs/table/examples/editable.md
View File

@ -14,7 +14,7 @@ layui.use(function(){
// 创建表格实例
table.render({
elem: '#ID-table-demo-editable',
url: '{{d.root}}/static/json/table/edit.json', // 此处为静态模拟数据，实际使用时需换成真实接口
url: '/static/2.8/json/table/edit.json', // 此处为静态模拟数据，实际使用时需换成真实接口
page: true,
//,editTrigger: 'dblclick' // 触发编辑的事件类型（默认 click ）。 v2.7.0 新增，之前版本固定为单击触发
css: [

2
docs/table/examples/filter.md
View File

@ -9,7 +9,7 @@ layui.use(function(){
// 渲染
table.render({
elem: '#ID-table-demo-filter',
url:'{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
url:'/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
toolbar: 'default',
height: 315,
cols: [function(){

2
docs/table/examples/onrowContextmenu.md
View File

@ -11,7 +11,7 @@ layui.use(['table', 'dropdown', 'util'], function(){
table.render({
elem: '#ID-table-onrowContextmenu',
defaultContextmenu: false, // 是否在 table 行中允许默认的右键菜单
url: '{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
url: '/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
page: true,
cols: [[
{field:'id', title:'ID', width:80, fixed: 'left', unresize: true},

2
docs/table/examples/page.md
View File

@ -14,7 +14,7 @@ layui.use('table', function(){
// 创建渲染实例
table.render({
elem: '#ID-table-demo-page',
url:'{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
url:'/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局
//curr: 5, //设定初始在第 5 页

4
docs/table/examples/parse.md
View File

@ -1,4 +1,4 @@
> 假设这是一段数据源：<a href="{{d.root}}/static/json/table/demo3.json" target="_blank">{{d.root}}/static/json/table/demo3.json</a><br>
> 假设这是一段数据源：<a href="/static/2.8/json/table/demo3.json" target="_blank">/static/2.8/json/table/demo3.json</a><br>
尽管它并不符合 table 组件默认规定的数据格式（[#详见](#options-async-data)），但可以通过 parseData 回调将其进行转换。
<table class="layui-hide" id="ID-table-demo-parse"></table>
@ -11,7 +11,7 @@ layui.use('table', function(){
// 渲染
table.render({
elem: '#ID-table-demo-parse',
url:'{{d.root}}/static/json/table/demo3.json',
url:'/static/2.8/json/table/demo3.json',
page: true,
response: {
statusCode: 200 // 重新规定成功的状态码为 200，table 组件默认为 0

2
docs/table/examples/search.md
View File

@ -38,7 +38,7 @@ layui.use(function(){
// 创建表格实例
table.render({
elem: '#ID-table-demo-search',
url: '{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
url: '/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
cols: [[
{checkbox: true, fixed: true},
{field:'id', title: 'ID', width:80, sort: true, fixed: true},

2
docs/table/examples/setRowChecked.md
View File

@ -13,7 +13,7 @@ layui.use('table', function(){
// 渲染
table.render({
elem: '#ID-table-demo-setRowChecked',
url: '{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
url: '/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
page: true,
cols: [[
{type: 'radio', fixed: 'left'},

2
docs/table/examples/templet.md
View File

@ -27,7 +27,7 @@ layui.use(['table'], function(){
// 创建渲染实例
table.render({
elem: '#ID-table-demo-templet',
url:'{{d.root}}/static/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
url:'/static/2.8/json/table/user.json', // 此处为静态模拟数据，实际使用时需换成真实接口
page: true,
height: '315px',
cols: [[

4
docs/table/examples/theads.md
View File

@ -1,6 +1,6 @@
常用两级表头：
<table class="layui-table" lay-data="{url:'{{d.root}}/static/json/table/demo2.json?v=2', page: true, limit: 6, limits:[6]}" id="ID-table-demo-theads-1">
<table class="layui-table" lay-data="{url:'/static/2.8/json/table/demo2.json?v=2', page: true, limit: 6, limits:[6]}" id="ID-table-demo-theads-1">
<thead>
<tr>
<th lay-data="{checkbox:true}" rowspan="2"></th>
@ -19,7 +19,7 @@
更多级表头（支持无限极）：
<table class="layui-table" lay-data="{url:'{{d.root}}/static/json/table/demo2.json?v=3', cellMinWidth: 80, page: true}" id="ID-table-demo-theads-2">
<table class="layui-table" lay-data="{url:'/static/2.8/json/table/demo2.json?v=3', cellMinWidth: 80, page: true}" id="ID-table-demo-theads-2">
<thead>
<tr>
<th lay-data="{field:'username', fixed:'left', width:80}" rowspan="3">联系人</th>

15
docs/table/index.md
View File

@ -12,7 +12,7 @@ toc: true
以下所有示例中演示的数据均为「静态模拟数据」，实际使用时换成您的真实接口即可。
<div>
{{- d.include("docs/table/detail/demo.md") }}
{{- d.include("/table/detail/demo.md") }}
</div>
<h2 id="api" lay-toc="{bold: true, hot: true}">API</h2>
@ -160,7 +160,7 @@ table 的属性众多，我们大致分为以下几种：
<h3 id="options" lay-toc="{level: 3, hot: true}" class="ws-bold">基础属性</h3>
<div>
{{- d.include("docs/table/detail/options.md") }}
{{- d.include("/table/detail/options.md") }}
</div>
<h3 id="options.ajax" lay-toc="{level: 3, hot: true}" class="ws-bold">异步属性</h3>
@ -168,7 +168,7 @@ table 的属性众多，我们大致分为以下几种：
异步属性本质也是基础属性，当开启 `url` 属性时才有效，由于相关属性成员较多，所以单独提取介绍。
<div>
{{- d.include("docs/table/detail/options.ajax.md") }}
{{- d.include("/table/detail/options.ajax.md") }}
</div>
<h3 id="options.cols" lay-toc="{level: 3, hot: true}" class="ws-bold">表头属性</h3>
@ -176,7 +176,7 @@ table 的属性众多，我们大致分为以下几种：
表头属性是基础属性 `cols` 的子集，其使用频率甚至超过基础属性本身。
<div>
{{- d.include("docs/table/detail/options.cols.md") }}
{{- d.include("/table/detail/options.cols.md") }}
</div>
<h3 id="reload" lay-toc="{level: 2}" class="ws-anchor ws-bold">重载</h3>
@ -677,7 +677,7 @@ table.on('row(test)', function(obj){
}
}}">
<textarea>
{{- d.include('docs/table/examples/onrowContextmenu.md') }}
{{- d.include("/table/examples/onrowContextmenu.md") }}
</textarea>
</pre>
@ -748,8 +748,8 @@ layui.use(function(){
// 渲染
table.render({
elem: '#test'
,cols: [[
elem: '#test',
cols: [[
{title: '操作', width: 200, templet: '#toolEventDemo'}
]]
// … // 其他属性
@ -762,6 +762,7 @@ layui.use(function(){
var layEvent = obj.event; // 获得元素对应的 lay-event 属性值
var tr = obj.tr; // 得到当前行 <tr> 元素的 jQuery 对象
var options = obj.config; // 获取当前表格基础属性配置项
var col = obj.getCol(); // 得到当前列的表头配置属性 -- v2.8.3 新增
console.log(obj); // 查看对象所有成员
// 根据 lay-event 的值执行不同操作

6
docs/transfer/detail/options.md
View File

@ -136,7 +136,7 @@ text: {
<td colspan="4" style="text-align: center">
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
<div id="options.callback" lay-pid="options" class="ws-anchor">
[回调函数](#options.callback)
@ -173,8 +173,8 @@ onchange: function(data, index){
</td>
<td colspan="3">
<div id="options.parseData" class="ws-anchor">
数据格式解析的回调函数，用于将返回的任意数据格式解析成 transfer 组件规定的 <a href="#options.data" style="pointer-events: auto;">data 格式</a>
<div id="options.parseData" lay-pid="options" class="ws-anchor">
数据格式解析的回调函数，用于将返回的任意数据格式解析成 transfer 组件规定的 <a href="#options.data">data 格式</a>
</div>
```

6
docs/transfer/index.md
View File

@ -10,7 +10,7 @@ toc: true
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
<div>
{{- d.include("docs/transfer/detail/demo.md") }}
{{- d.include("/transfer/detail/demo.md") }}
</div>
<h2 id="api" lay-toc="{hot: true}">API</h2>
@ -32,13 +32,13 @@ toc: true
<h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
<div>
{{- d.include("docs/transfer/detail/options.md") }}
{{- d.include("/transfer/detail/options.md") }}
</div>
<h3 id="options.data" lay-toc="{level: 3, hot: true}">data 格式</h3>
<div>
{{- d.include("docs/transfer/detail/options.data.md") }}
{{- d.include("/transfer/detail/options.data.md") }}
</div>
<h3 id="reload" lay-toc="{level: 2}">重载</h3>

2
docs/tree/detail/demo.md
View File

@ -19,7 +19,7 @@ layui.use(function(){
var util = layui.util;
// 模拟数据
var data = [{title:'一级1',id:1,field:'name1',checked:true,spread:true,children:[{title:'二级1-1 可允许跳转',id:3,field:'name11',href:'{{d.root}}/',children:[{title:'三级1-1-3',id:23,field:'',children:[{title:'四级1-1-3-1',id:24,field:'',children:[{title:'五级1-1-3-1-1',id:30,field:''},{title:'五级1-1-3-1-2',id:31,field:''}]}]},{title:'三级1-1-1',id:7,field:'',children:[{title:'四级1-1-1-1 可允许跳转',id:15,field:'',href:'{{d.root}}/docs/'}]},{title:'三级1-1-2',id:8,field:'',children:[{title:'四级1-1-2-1',id:32,field:''}]}]},{title:'二级1-2',id:4,spread:true,children:[{title:'三级1-2-1',id:9,field:'',disabled:true},{title:'三级1-2-2',id:10,field:''}]},{title:'二级1-3',id:20,field:'',children:[{title:'三级1-3-1',id:21,field:''},{title:'三级1-3-2',id:22,field:''}]}]},{title:'一级2',id:2,field:'',spread:true,children:[{title:'二级2-1',id:5,field:'',spread:true,children:[{title:'三级2-1-1',id:11,field:''},{title:'三级2-1-2',id:12,field:''}]},{title:'二级2-2',id:6,field:'',children:[{title:'三级2-2-1',id:13,field:''},{title:'三级2-2-2',id:14,field:'',disabled:true}]}]},{title:'一级3',id:16,field:'',children:[{title:'二级3-1',id:17,field:'',fixed:true,children:[{title:'三级3-1-1',id:18,field:''},{title:'三级3-1-2',id:19,field:''}]},{title:'二级3-2',id:27,field:'',children:[{title:'三级3-2-1',id:28,field:''},{title:'三级3-2-2',id:29,field:''}]}]}];
var data = [{title:'一级1',id:1,field:'name1',checked:true,spread:true,children:[{title:'二级1-1 可允许跳转',id:3,field:'name11',href:'',children:[{title:'三级1-1-3',id:23,field:'',children:[{title:'四级1-1-3-1',id:24,field:'',children:[{title:'五级1-1-3-1-1',id:30,field:''},{title:'五级1-1-3-1-2',id:31,field:''}]}]},{title:'三级1-1-1',id:7,field:'',children:[{title:'四级1-1-1-1 可允许跳转',id:15,field:'',href:''}]},{title:'三级1-1-2',id:8,field:'',children:[{title:'四级1-1-2-1',id:32,field:''}]}]},{title:'二级1-2',id:4,spread:true,children:[{title:'三级1-2-1',id:9,field:'',disabled:true},{title:'三级1-2-2',id:10,field:''}]},{title:'二级1-3',id:20,field:'',children:[{title:'三级1-3-1',id:21,field:''},{title:'三级1-3-2',id:22,field:''}]}]},{title:'一级2',id:2,field:'',spread:true,children:[{title:'二级2-1',id:5,field:'',spread:true,children:[{title:'三级2-1-1',id:11,field:''},{title:'三级2-1-2',id:12,field:''}]},{title:'二级2-2',id:6,field:'',children:[{title:'三级2-2-1',id:13,field:''},{title:'三级2-2-2',id:14,field:'',disabled:true}]}]},{title:'一级3',id:16,field:'',children:[{title:'二级3-1',id:17,field:'',fixed:true,children:[{title:'三级3-1-1',id:18,field:''},{title:'三级3-1-2',id:19,field:''}]},{title:'二级3-2',id:27,field:'',children:[{title:'三级3-2-1',id:28,field:''},{title:'三级3-2-2',id:29,field:''}]}]}];
// 渲染
tree.render({

8
docs/tree/detail/options.md
View File

@ -153,7 +153,7 @@ text: {
<td colspan="4" style="text-align: center">
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
<div id="options.callback" lay-pid="options" class="ws-anchor">
[回调函数](#options.callback)
@ -165,7 +165,7 @@ text: {
<td>click</td>
<td colspan="3">
<div id="options.click" class="ws-anchor">
<div id="options.click" lay-pid="options" class="ws-anchor">
节点被点击的回调函数。返回的参数如下：
</div>
@ -185,7 +185,7 @@ click: function(obj){
<td>oncheck</td>
<td colspan="3">
<div id="options.oncheck" class="ws-anchor">
<div id="options.oncheck" lay-pid="options" class="ws-anchor">
点击复选框时的回调函数，返回的参数如下：
</div>
@ -203,7 +203,7 @@ oncheck: function(obj){
<td>operate</td>
<td colspan="3">
<div id="options.operate" class="ws-anchor">
<div id="options.operate" lay-pid="options" class="ws-anchor">
点击节点的右侧操作图标的回调函数，返回的参数如下：
</div>

6
docs/tree/index.md
View File

@ -10,7 +10,7 @@ toc: true
<h2 id="examples" lay-toc="{anchor: null}" style="margin-bottom: 0;">示例</h2>
<div>
{{- d.include("docs/tree/detail/demo.md") }}
{{- d.include("/tree/detail/demo.md") }}
</div>
<h2 id="api" lay-toc="{hot: true}">API</h2>
@ -32,13 +32,13 @@ toc: true
<h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
<div>
{{- d.include("docs/tree/detail/options.md") }}
{{- d.include("/tree/detail/options.md") }}
</div>
<h3 id="options.data" lay-toc="{level: 3, hot: true}">data 格式</h3>
<div>
{{- d.include("docs/tree/detail/options.data.md") }}
{{- d.include("/tree/detail/options.data.md") }}
</div>

2
docs/treeTable/detail/demo.md
View File

@ -8,7 +8,7 @@
}
}}">
<textarea>
{{- d.include('docs/treeTable/examples/demo.md') }}
{{- d.include("/treeTable/examples/demo.md") }}
</textarea>
</pre>

10
docs/treeTable/detail/options.md
View File

@ -46,7 +46,7 @@ treeTable.render({
<td>tree.customName</td>
<td>
<div id="options.tree.customName" class="ws-anchor">
<div id="options.tree.customName" lay-pid="options" class="ws-anchor">
自定义属性名的集合，包含以下成员：
@ -66,7 +66,7 @@ treeTable.render({
<td>tree.view</td>
<td>
<div id="options.tree.view" class="ws-anchor">
<div id="options.tree.view" lay-pid="options" class="ws-anchor">
视图相关的属性集合，包含以下成员：
@ -91,7 +91,7 @@ treeTable.render({
<td>tree.data</td>
<td>
<div id="options.tree.data" class="ws-anchor">
<div id="options.tree.data" lay-pid="options" class="ws-anchor">
数据相关的属性集合，包含以下成员：
@ -108,7 +108,7 @@ treeTable.render({
<td>tree.async</td>
<td>
<div id="options.tree.async" class="ws-anchor">
<div id="options.tree.async" lay-pid="options" class="ws-anchor">
异步相关的属性集合，包含以下成员：
@ -130,7 +130,7 @@ treeTable.render({
<td>tree.callback</td>
<td>
<div id="options.tree.callback" class="ws-anchor">
<div id="options.tree.callback" lay-pid="options" class="ws-anchor">
事件回调相关的属性集合，包含以下成员：

4
docs/treeTable/examples/demo.md
View File

@ -24,13 +24,13 @@ layui.use(function(){
// 渲染
var inst = treeTable.render({
elem: '#ID-treeTable-demo',
url: '{{d.root}}/static/json/treeTable/demo-1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
url: '/static/2.8/json/treeTable/demo-1.json', // 此处为静态模拟数据，实际使用时需换成真实接口
tree: {
/*
// 异步加载子节点
async: {
enable: true,
url: '{{d.root}}/static/json/treeTable/demo-async.json', // 此处为静态模拟数据，实际使用时需换成真实接口
url: '/static/2.8/json/treeTable/demo-async.json', // 此处为静态模拟数据，实际使用时需换成真实接口
autoParam: ["parentId=id"]
}
*/

4
docs/treeTable/index.md
View File

@ -12,7 +12,7 @@ toc: true
以下所有示例中演示的数据均为「静态模拟数据」，实际使用时换成您的真实接口即可。
<div>
{{- d.include("docs/treeTable/detail/demo.md") }}
{{- d.include("/treeTable/detail/demo.md") }}
</div>
<p></p>
@ -51,7 +51,7 @@ toc: true
`table` 组件的所有基础属性均适用于 `treeTable` 组件。在此基础上，`treeTable` 还专门提供了 `tree` 属性集：
<div>
{{- d.include("docs/treeTable/detail/options.md") }}
{{- d.include("/treeTable/detail/options.md") }}
</div>
<h3 id="reload" lay-toc="{level: 2}">重载</h3>

14
docs/upload/detail/demo.md
View File

@ -4,7 +4,7 @@
obj.render();
}}">
<textarea>
{{- d.include("docs/upload/examples/image.md") }}
{{- d.include("/upload/examples/image.md") }}
</script>
</textarea>
</pre>
@ -13,7 +13,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/upload/examples/files.table.md") }}
{{- d.include("/upload/examples/files.table.md") }}
</textarea>
</pre>
@ -22,7 +22,7 @@
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 535px;', layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/upload/examples/accept.md") }}
{{- d.include("/upload/examples/accept.md") }}
</textarea>
</pre>
@ -31,7 +31,7 @@
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/upload/examples/size.md") }}
{{- d.include("/upload/examples/size.md") }}
</textarea>
</pre>
@ -39,7 +39,7 @@
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/upload/examples/auto.md") }}
{{- d.include("/upload/examples/auto.md") }}
</textarea>
</pre>
@ -48,7 +48,7 @@
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/upload/examples/drag.md") }}
{{- d.include("/upload/examples/drag.md") }}
</textarea>
</pre>
@ -57,6 +57,6 @@
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
<textarea>
{{- d.include("docs/upload/examples/form.file.md") }}
{{- d.include("/upload/examples/form.file.md") }}
</textarea>
</pre>

24
docs/upload/detail/options.md
View File

@ -56,7 +56,7 @@
</td>
<td>
<div id="options.data" class="ws-anchor">
<div id="options.data" lay-pid="options" class="ws-anchor">
传递给上传接口的额外参数，支持静态赋值和动态赋值两种写法。
</div>
@ -100,7 +100,7 @@ data: {
</td>
<td>
<div id="options.accept" class="ws-anchor">
<div id="options.accept" lay-pid="options" class="ws-anchor">
指定允许上传时校验的文件类型。可选值有：
</div>
@ -142,7 +142,7 @@ acceptMime: 'image/jpeg, image/png` // 只筛选 jpg,png 格式图片
</td>
<td>
<div id="options.exts" class="ws-anchor">
<div id="options.exts" lay-pid="options" class="ws-anchor">
允许上传的文件后缀。一般结合 `accept` 属性来设定。
@ -257,7 +257,7 @@ acceptMime: 'image/jpeg, image/png` // 只筛选 jpg,png 格式图片
<td colspan="4" style="text-align: center">
<div id="options.callback" class="ws-anchor" style="pointer-events: auto;">
<div id="options.callback" lay-pid="options" class="ws-anchor">
[回调函数](#options.callback)
@ -273,7 +273,7 @@ acceptMime: 'image/jpeg, image/png` // 只筛选 jpg,png 格式图片
</td>
<td colspan="3">
<div id="option.choose" class="ws-anchor">
<div id="options.choose" lay-pid="options" class="ws-anchor">
选择文件后的回调函数。返回的参数如下
</div>
@ -310,7 +310,7 @@ choose: function(obj){
</td>
<td colspan="3">
<div id="option.before" class="ws-anchor">
<div id="options.before" lay-pid="options" class="ws-anchor">
文件提交上传前的回调函数。返回的参数同 choose
</div>
@ -332,12 +332,12 @@ before: function(obj){ // obj 参数同 choose
<tr>
<td>
[progress](#option.progress)
[progress](#options.progress)
</td>
<td colspan="3">
<div id="option.progress" class="ws-anchor">
<div id="options.progress" lay-pid="options" class="ws-anchor">
执行上传请求后的回调函数。返回的参数如下：
</div>
@ -361,12 +361,12 @@ progress: progress: function(n, elem, res, index){
<tr>
<td>
[done](#option.done)
[done](#options.done)
</td>
<td colspan="3">
<div id="option.done" class="ws-anchor">
<div id="options.done" lay-pid="options" class="ws-anchor">
执行单次文件上传请求后的回调函数。返回的参数如下：
</div>
@ -392,12 +392,12 @@ done: function(res, index, upload){
<tr>
<td>
[allDone](#option.allDone)
[allDone](#options.allDone)
</td>
<td colspan="3">
<div id="option.allDone" class="ws-anchor">
<div id="options.allDone" lay-pid="options" class="ws-anchor">
当开启多文件 (`multiple: true` ) 且所有文件均上传完毕后的状态回调函数。

8
docs/upload/index.md
View File

@ -12,7 +12,7 @@ toc: true
以下示例的部分上传接口由第三方网站 `https://httpbin.org` 提供，它可以模拟各类 HTTP 请求。若未配置上传接口的，每次上传都会报「请求上传接口出现异常」的提示，这属于正常现象。
<div>
{{- d.include("docs/upload/detail/demo.md") }}
{{- d.include("/upload/detail/demo.md") }}
</div>
<p></p>
@ -88,7 +88,7 @@ var inst = upload.render({
});
```
<h3 id="render" lay-toc="{level: 2}">重载</h3>
<h3 id="reload" lay-toc="{level: 2}">重载</h3>
`inst.reload(options);`
@ -113,10 +113,10 @@ inst.reload({
<h3 id="options" lay-toc="{level: 2, hot: true}">属性</h3>
<div>
{{- d.include("docs/upload/detail/options.md") }}
{{- d.include("/upload/detail/options.md") }}
</div>
<h2 id="options" lay-toc="{}">跨域方案</h2>
<h2 id="cors-upload" lay-toc="{}">跨域方案</h2>
`upload` 组件支持跨域上传，一般有以下两种场景

2
docs/util/index.md
View File

@ -10,7 +10,7 @@ toc: true
<h2 id="examples" lay-toc="{hot: true}" style="margin-bottom: 0;">示例</h2>
<div>
{{- d.include("docs/util/detail/demo.md") }}
{{- d.include("/util/detail/demo.md") }}
</div>
<p></p>

2
docs/versions.md
View File

@ -5,7 +5,7 @@ toc: true
# 更新日志
> 导读：📑 [Layui 2.8 《升级指南》](./@note/2.8/upgrade-guide.html) · 📑 [Layui 新版文档站上线初衷](./@note/2.8/news.html)
> 导读：📑 [Layui 2.8 《升级指南》](/notes/2.8/upgrade-guide.html) · 📑 [Layui 新版文档站上线初衷](/notes/2.8/news.html)
<h2 id="2.8.2" lay-toc="{title: '2.8.2'}">

14
examples/layer.html
View File

@ -145,8 +145,8 @@ layui.use(['layer', 'util'], function(layer, util){
content: $('#test11111'),
maxmin: true,
shade: false,
minStack: false, //最小化不堆叠在左下角
id: 'page1', //定义 ID，防止重复弹出
minStack: false, // 最小化不堆叠在左下角
id: 'page-1', // 定义 ID，防止重复弹出
min: function(layero, index){
layer.msg('阻止了默认的最小化');
layer.style(index, {top: 'auto', bottom: 0});
@ -156,10 +156,12 @@ layui.use(['layer', 'util'], function(layer, util){
}
,test6: function(){
layer.open({
type: 2
,content: 'https://www.aliyun.com/activity?userCode=ap0255is'
,area: ['375px', '500px']
,maxmin: true
type: 2,
content: 'https://www.aliyun.com/activity?userCode=ap0255is',
area: ['375px', '500px'],
id: 'iframe-1',
hideOnClose: true, // 关闭时是否隐藏弹层容器，下次打开时直接显示原来的弹层
maxmin: true
});
}
,testLoading: function(){

104
examples/xingzuo.html
View File

@ -1,104 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>星座配对</title>
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<style>
*{margin: 0; padding: 0;}
.anim-box{ position: relative; width: 80%; height: 500px; margin: 50px auto; background-color: #000; color: #000;}
.anim-box>*{position: absolute;}
.anim-box span{width: 80px; height: 80px; line-height: 80px; text-align: center; border-radius: 100%; background-color: #fff; color: #000; z-index: 999;}
.anim-box span{-webkit-transition: .8s; transition: .8s;}
.anim-box ul{ bottom: 50px; left: 20px; font-size: 0;}
.anim-box ul li{display: inline-block; width: 80px; height: 80px; line-height: 80px; margin: 20px 20px 0 0; text-align: center; border-radius: 100%; background-color: #c00; color: #fff; font-size: 14px;}
@-webkit-keyframes beam{
0%{
box-shadow:0 0 0px rgba(255,255,255,0);
opacity: 0.3;
}
50%{
box-shadow: 0 0 100px rgba(255,255,255, 1);
opacity: 1;
}
100%{
box-shadow:0 0 0px rgba(255,255,255,0);
opacity: 0.3;
background-color: #fff;
}
}
@keyframes beam{
0%{
box-shadow:0 0 0px rgba(255,255,255, 0);
opacity: 0.3;
}
50%{
box-shadow:0 0 100px rgba(255,255,255, 1);
opacity: 1;
}
100%{
box-shadow:0 0 0px 0px rgba(255,255,255, 0);
opacity: 0.3;
background-color: #fff;
}
}
.beam{animation: beam 1s infinite ; -webkit-animation: beam 1s infinite ; }
</style>
</head>
<body>
<section class="anim-box">
<span id="me">你</span>
<ul class="xingzuo">
<li>天秤座</li>
<li>处女座</li>
<li>水瓶座</li>
<li>双子座</li>
<li>双鱼座</li>
<li>白羊座</li>
</ul>
</section>
<script>
;!function(){
var find = function(index){
var me = document.getElementById('me');
var ul = document.querySelectorAll('.xingzuo')[0];
var xzs = ul.querySelectorAll('li');
var x = xzs[index].offsetLeft + ul.offsetLeft;
var y = xzs[index].offsetTop + ul.offsetTop;
me.style['-webkit-transform'] = 'translate3d('+ x +'px, '+ y +'px, 0px) scale(0.5)';
me.style['transform'] = 'translate3d('+ x +'px, '+ y +'px, 0px) scale(0.5)';
me.style.opacity = 0.5;
setTimeout(function(){
xzs[index].className = 'beam';
setTimeout(function(){
me.removeAttribute('style');
}, 500);
}, 800);
};
setTimeout(function(){
find(Math.random()*5|0) //模拟匹配
}, 1000);
}();
</script>
</body>
</html>

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "layui",
"version": "2.8.2",
"version": "2.8.3",
"description": "Classic modular Front-End UI library",
"main": "dist/layui.js",
"license": "MIT",
@ -9,7 +9,7 @@
"type": "git",
"url": "git+ssh://git@github.com/layui/layui.git"
},
"homepage": "https://github.com/layui/layui/",
"homepage": "https://layui.dev",
"devDependencies": {
"gulp": "^4.0.2",
"gulp-uglify": "^3.0.2",

80
src/css/layui.css
View File

@ -817,55 +817,63 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-select-disabled .layui-disabled{border-color: #eee !important;}
.layui-select-disabled .layui-edge{border-top-color: #d2d2d2}
/* 复选框 */.layui-form-checkbox{position: relative; display: inline-block; vertical-align: middle; height: 30px; line-height: 30px; margin-right: 10px; padding-right: 30px; background-color: #fff; cursor: pointer; font-size: 0; -webkit-transition: .1s linear; transition: .1s linear; box-sizing: border-box;}
/* 复选框 */
.layui-form-checkbox{position: relative; display: inline-block; vertical-align: middle; height: 30px; line-height: 30px; margin-right: 10px; padding-right: 30px; background-color: #fff; cursor: pointer; font-size: 0; -webkit-transition: .1s linear; transition: .1s linear; box-sizing: border-box;}
.layui-form-checkbox:hover{}
.layui-form-checkbox *{display: inline-block; vertical-align: middle;}
.layui-form-checkbox span{padding: 0 10px; height: 100%; font-size: 14px; border-radius: 2px 0 0 2px; background-color: #d2d2d2; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.layui-form-checkbox:hover span{background-color: #c2c2c2;}
.layui-form-checkbox i{position: absolute; right: 0; top: 0; width: 30px; height: 28px; border: 1px solid #d2d2d2; border-left: none; border-radius: 0 2px 2px 0; color: #fff; color: rgba(255,255,255,0); font-size: 20px; text-align: center;}
.layui-form-checkbox:hover i{border-color: #c2c2c2; color: #c2c2c2;}
.layui-form-checked, .layui-form-checked:hover{border-color: #16b777;}
.layui-form-checked span, .layui-form-checked:hover span{background-color: #16b777;}
.layui-form-checked i, .layui-form-checked:hover i{color: #16b777;}
.layui-form-checkbox > *{display: inline-block; vertical-align: middle;}
.layui-form-checkbox > div{padding: 0 11px; height: 100%; font-size: 14px; border-radius: 2px 0 0 2px; background-color: #d2d2d2; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.layui-form-checkbox:hover > div{background-color: #c2c2c2;}
.layui-form-checkbox > i{position: absolute; right: 0; top: 0; width: 30px; height: 100%; border: 1px solid #d2d2d2; border-left: none; border-radius: 0 2px 2px 0; color: #fff; color: rgba(255,255,255,0); font-size: 20px; text-align: center; box-sizing: border-box;}
.layui-form-checkbox:hover > i{border-color: #c2c2c2; color: #c2c2c2;}
.layui-form-checked,
.layui-form-checked:hover{border-color: #16b777;}
.layui-form-checked > div,
.layui-form-checked:hover > div{background-color: #16b777;}
.layui-form-checked > i,
.layui-form-checked:hover > i{color: #16b777;}
.layui-form-item .layui-form-checkbox{margin-top: 4px;}
.layui-form-checkbox.layui-checkbox-disabled > div{background-color: #eee !important;}
.layui-form *[lay-checkbox]{display: none;}
/* 复选框-默认风格 */.layui-form-checkbox[lay-skin="primary"]{height: auto!important; line-height: normal!important; min-width: 18px; min-height: 18px; border: none!important; margin-right: 0; padding-left: 28px; padding-right: 0; background: none;}
.layui-form-checkbox[lay-skin="primary"] span{padding-left: 0; padding-right: 15px; line-height: 18px; background: none; color: #5F5F5F;}
.layui-form-checkbox[lay-skin="primary"] i{right: auto; left: 0; width: 16px; height: 16px; line-height: 16px; border: 1px solid #d2d2d2; font-size: 12px; border-radius: 2px; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;}
.layui-form-checkbox[lay-skin="primary"]:hover i{border-color: #16b777; color: #fff;}
.layui-form-checked[lay-skin="primary"] i{border-color: #16b777 !important; background-color: #16b777; color: #fff;}
.layui-checkbox-disabled[lay-skin="primary"] span{background: none!important; color: #c2c2c2!important;}
.layui-form-checked.layui-checkbox-disabled[lay-skin="primary"] i{background: #eee!important; border-color: #eee!important;}
.layui-checkbox-disabled[lay-skin="primary"]:hover i{border-color: #d2d2d2;}
/* 复选框-默认风格 */
.layui-form-checkbox[lay-skin="primary"]{height: auto!important; line-height: normal!important; min-width: 18px; min-height: 18px; border: none!important; margin-right: 0; padding-left: 24px; padding-right: 0; background: none;}
.layui-form-checkbox[lay-skin="primary"] > div{margin-top: -1px; padding-left: 0; padding-right: 15px; line-height: 18px; background: none; color: #5F5F5F;}
.layui-form-checkbox[lay-skin="primary"] > i{right: auto; left: 0; width: 16px; height: 16px; line-height: 16px; border: 1px solid #d2d2d2; font-size: 12px; border-radius: 2px; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;}
.layui-form-checkbox[lay-skin="primary"]:hover > i{border-color: #16b777; color: #fff;}
.layui-form-checked[lay-skin="primary"] > i{border-color: #16b777 !important; background-color: #16b777; color: #fff;}
.layui-checkbox-disabled[lay-skin="primary"] > div{background: none!important;}
.layui-form-checked.layui-checkbox-disabled[lay-skin="primary"] > i{background: #eee!important; border-color: #eee!important;}
.layui-checkbox-disabled[lay-skin="primary"]:hover > i{border-color: #d2d2d2;}
.layui-form-item .layui-form-checkbox[lay-skin="primary"]{margin-top: 10px;}
.layui-form-checkbox[lay-skin="primary"] .layui-icon-indeterminate{border-color: #16b777;}
.layui-form-checkbox[lay-skin="primary"] .layui-icon-indeterminate:before{content: ''; display: inline-block; vertical-align: middle; position: relative; width: 50%; height: 1px; margin: -1px auto 0; background-color: #16b777;}
.layui-form-checkbox[lay-skin="primary"] > .layui-icon-indeterminate{border-color: #16b777;}
.layui-form-checkbox[lay-skin="primary"] > .layui-icon-indeterminate:before{content: ''; display: inline-block; vertical-align: middle; position: relative; width: 50%; height: 1px; margin: -1px auto 0; background-color: #16b777;}
/* 复选框-开关风格 */.layui-form-switch{position: relative; display: inline-block; vertical-align: middle; height: 22px; line-height: 22px; min-width: 35px; padding: 0 5px; margin-top: 8px; border: 1px solid #d2d2d2; border-radius: 20px; cursor: pointer; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;}
.layui-form-switch i{position: absolute; left: 5px; top: 3px; width: 16px; height: 16px; border-radius: 20px; background-color: #d2d2d2; -webkit-transition: .1s linear; transition: .1s linear;}
.layui-form-switch em{position: relative; top: 0; width: 25px; margin-left: 21px; padding: 0!important; text-align: center!important; color: #999!important; font-style: normal!important; font-size: 12px;}
/* 复选框-开关风格 */
.layui-form-switch{position: relative; display: inline-block; vertical-align: middle; height: 22px; line-height: 22px; min-width: 35px; padding: 0 5px; margin-top: 8px; border: 1px solid #d2d2d2; border-radius: 20px; cursor: pointer; background-color: #fff; -webkit-transition: .1s linear; transition: .1s linear;}
.layui-form-switch > i{position: absolute; left: 5px; top: 3px; width: 16px; height: 16px; border-radius: 20px; background-color: #d2d2d2; -webkit-transition: .1s linear; transition: .1s linear;}
.layui-form-switch > div{position: relative; top: 0; margin-left: 21px; padding: 0!important; text-align: center!important; color: #999!important; font-style: normal!important; font-size: 12px;}
.layui-form-onswitch{border-color: #16b777; background-color: #16b777;}
.layui-form-onswitch i{left: 100%; margin-left: -21px; background-color: #fff;}
.layui-form-onswitch em{margin-left: 0; margin-right: 21px; color: #fff!important;}
.layui-form-onswitch > i{left: 100%; margin-left: -21px; background-color: #fff;}
.layui-form-onswitch > div{margin-left: 0; margin-right: 21px; color: #fff!important;}
.layui-checkbox-disabled{border-color: #eee !important;}
.layui-checkbox-disabled span{background-color: #eee !important;}
.layui-checkbox-disabled i{border-color: #eee !important;}
.layui-checkbox-disabled em{color: #d2d2d2 !important;}
.layui-checkbox-disabled:hover i{color: #fff !important;}
.layui-checkbox-disabled > div{color: #c2c2c2!important;}
.layui-checkbox-disabled > i{border-color: #eee !important;}
.layui-checkbox-disabled:hover > i{color: #fff !important;}
/* 单选框 */
*[lay-radio]{display: none;}
.layui-form-radio{display: inline-block; vertical-align: middle; line-height: 28px; margin: 6px 10px 0 0; padding-right: 10px; cursor: pointer; font-size: 0;}
.layui-form-radio *{display: inline-block; vertical-align: middle; font-size: 14px;}
.layui-form-radio>i{margin-right: 8px; font-size: 22px; color: #c2c2c2;}
.layui-form-radio > *{display: inline-block; vertical-align: middle; font-size: 14px;}
.layui-form-radio > i{margin-right: 8px; font-size: 22px; color: #c2c2c2;}
.layui-form-radioed,
.layui-form-radioed>i,
.layui-form-radio:hover *{color: #16b777;}
.layui-radio-disabled>i{color: #eee !important;}
.layui-radio-disabled *{color: #c2c2c2!important;}
.layui-form-radioed > i,
.layui-form-radio:hover > *{color: #16b777;}
.layui-radio-disabled > i{color: #eee !important;}
.layui-radio-disabled > *{color: #c2c2c2!important;}
.layui-form *[lay-radio]{display: none;}
/* 表单方框风格 */.layui-form-pane .layui-form-label{width: 110px; padding: 8px 15px; height: 38px; line-height: 20px; border-width: 1px; border-style: solid; border-radius: 2px 0 0 2px; text-align: center; background-color: #fafafa; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box;}
/* 表单方框风格 */
.layui-form-pane .layui-form-label{width: 110px; padding: 8px 15px; height: 38px; line-height: 20px; border-width: 1px; border-style: solid; border-radius: 2px 0 0 2px; text-align: center; background-color: #fafafa; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box;}
.layui-form-pane .layui-input-inline{margin-left: -1px;}
.layui-form-pane .layui-input-block{margin-left: 110px; left: -1px;}
.layui-form-pane .layui-input{border-radius: 0 2px 2px 0;}

2
src/css/modules/code.css
View File

@ -50,7 +50,7 @@ html #layuicss-skincodecss{display:none; position: absolute; width:1989px;}
.layui-code-copy:hover .layui-icon{color: #16b777;}
.layui-code-view:hover > .layui-code-copy{display: block;}
.layui-code-copy-offset{margin-right: 17px;}
.layui-code-preview .layui-code-copy{display: none !important;}
.layui-code-preview > .layui-code-view > .layui-code-copy{display: none !important;}
/* 全屏风格 */
.layui-code-full{position: fixed; left: 0; top: 0; z-index: 1111111; width: 100%; height: 100%; background-color: #fff;}

35
src/layui.js
View File

@ -16,7 +16,7 @@
};
var Layui = function(){
this.v = '2.8.2'; // Layui 版本号
this.v = '2.8.3'; // Layui 版本号
};
// 识别预先可能定义的指定全局对象
@ -787,9 +787,38 @@
var that = this;
return that.event.call(that, modName, events, EV_REMOVE);
};
// 防抖
Layui.prototype.debounce = function (func, wait) {
var timeout;
return function () {
var context = this;
var args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function () {
func.apply(context, args);
}, wait);
}
};
// 节流
Layui.prototype.throttle = function (func, wait) {
var cooldown = false;
return function () {
var context = this;
var args = arguments;
if (!cooldown) {
func.apply(context, args);
cooldown = true;
setTimeout(function () {
cooldown = false;
}, wait);
}
}
};
// exports layui
win.layui = new Layui();
}(window); // gulp build: layui-footer

2
src/modules/code.js
View File

@ -98,7 +98,7 @@ layui.define(['lay', 'util', 'element', 'form'], function(exports){
event: function(el, type){
typeof options.onCopy === 'function' ? options.onCopy(finalCode) : function(){
try {
navigator.clipboard.writeText(finalCode).then(function(){
navigator.clipboard.writeText(util.unescape(finalCode)).then(function(){
layer.msg('已复制', {
icon: 1
});

180
src/modules/form.js
View File

@ -16,36 +16,37 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var Form = function(){
this.config = {
// 内置的验证规则
verify: {
required: [
/[\S]+/
,'必填项不能为空'
/[\S]+/,
'必填项不能为空'
],
phone: [
/^1\d{10}$/,
'请输入正确的手机号'
],
email: [
/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
'邮箱格式不正确'
],
url: [
/^(#|(http(s?)):\/\/|\/\/)[^\s]+\.[^\s]+$/,
'链接格式不正确'
],
number: function(value){
if(isNaN(value)) return '只能填写数字';
},
date: [
/^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/,
'日期格式不正确'
],
identity: [
/(^\d{15}$)|(^\d{17}(x|X|\d)$)/,
'请输入正确的身份证号'
]
,phone: [
/^1\d{10}$/
,'请输入正确的手机号'
]
,email: [
/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
,'邮箱格式不正确'
]
,url: [
/^(#|(http(s?)):\/\/|\/\/)[^\s]+\.[^\s]+$/
,'链接格式不正确'
]
,number: function(value){
if(!value || isNaN(value)) return '只能填写数字'
}
,date: [
/^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/
,'日期格式不正确'
]
,identity: [
/(^\d{15}$)|(^\d{17}(x|X|\d)$)/
,'请输入正确的身份证号'
]
}
,autocomplete: null // 全局 autocomplete 状态。null 表示不干预
},
autocomplete: null // 全局 autocomplete 状态。 null 表示不干预
};
};
@ -639,29 +640,43 @@ layui.define(['lay', 'layer', 'util'], function(exports){
// 勾选
reElem.on('click', function(){
var othis = $(this);
var filter = check.attr('lay-filter') // 获取过滤器
var title = (check.attr('title')||'').split('|');
var title = (
othis.next('*[lay-checkbox]')[0]
? othis.next().html()
: check.attr('title') || ''
);
var skin = check.attr('lay-skin') || 'primary';
// 开关
title = skin === 'switch' ? title.split('|') : [title];
// 禁用
if(check[0].disabled) return;
// 半选
if (check[0].indeterminate) {
check[0].indeterminate = false;
reElem.find(CLASS.SUBTRA).removeClass(CLASS.SUBTRA).addClass('layui-icon-ok')
}
// 开关
check[0].checked ? (
check[0].checked = false
,reElem.removeClass(RE_CLASS[1]).find('em').text(title[1])
check[0].checked = false,
reElem.removeClass(RE_CLASS[1]),
skin === 'switch' && reElem.children('div').html(title[1])
) : (
check[0].checked = true
,reElem.addClass(RE_CLASS[1]).find('em').text(title[0])
check[0].checked = true,
reElem.addClass(RE_CLASS[1]),
skin === 'switch' && reElem.children('div').html(title[0])
);
// 事件
layui.event.call(check[0], MOD_NAME, RE_CLASS[2]+'('+ filter +')', {
elem: check[0]
,value: check[0].value
,othis: reElem
elem: check[0],
value: check[0].value,
othis: reElem
});
});
};
@ -670,11 +685,16 @@ layui.define(['lay', 'layer', 'util'], function(exports){
checks.each(function(index, check){
var othis = $(this);
var skin = othis.attr('lay-skin') || 'primary';
var title = $.trim(check.title || function(){ // 向下兼容 lay-text 属性
var title = util.escape($.trim(check.title || function(){ // 向下兼容 lay-text 属性
return check.title = othis.attr('lay-text') || '';
}());
}()));
var disabled = this.disabled;
// 若存在标题模板，则优先读取标题模板
if(othis.next('[lay-checkbox]')[0]){
title = othis.next().html() || '';
}
// 若为开关，则对 title 进行分隔解析
title = skin === 'switch' ? title.split('|') : [title];
@ -684,27 +704,26 @@ layui.define(['lay', 'layer', 'util'], function(exports){
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
// 替代元素
var hasRender = othis.next('.' + RE_CLASS[0])
,reElem = $(['<div class="layui-unselect '+ RE_CLASS[0]
,(check.checked ? (' '+ RE_CLASS[1]) : '') // 选中状态
,(disabled ? ' layui-checkbox-disabled '+ DISABLED : '') // 禁用状态
,'"'
,(skin ? ' lay-skin="'+ skin +'"' : '') // 风格
,'>'
,function(){ // 不同风格的内容
var hasRender = othis.next('.' + RE_CLASS[0]);
var reElem = $(['<div class="layui-unselect '+ RE_CLASS[0],
(check.checked ? (' '+ RE_CLASS[1]) : ''), // 选中状态
(disabled ? ' layui-checkbox-disabled '+ DISABLED : ''), // 禁用状态
'"',
(skin ? ' lay-skin="'+ skin +'"' : ''), // 风格
'>',
function(){ // 不同风格的内容
var type = {
// 复选框
"checkbox": [
(title[0] ? ('<span>'+ util.escape(title[0]) +'</span>') : '')
,'<i class="layui-icon '+(skin === 'primary' && !check.checked && othis.get(0).indeterminate ? CLASS.SUBTRA : 'layui-icon-ok')+'"></i>'
(title[0] ? ('<div>'+ title[0] +'</div>') : (skin === 'primary' ? '' : '<div></div>')),
'<i class="layui-icon '+(skin === 'primary' && !check.checked && othis.get(0).indeterminate ? CLASS.SUBTRA : 'layui-icon-ok')+'"></i>'
].join(''),
// 开关
"switch": '<em>'+ ((check.checked ? title[0] : title[1]) || '') +'</em><i></i>'
"switch": '<div>'+ ((check.checked ? title[0] : title[1]) || '') +'</div><i></i>'
};
return type[skin] || type['checkbox'];
}()
,'</div>'].join(''));
}(),
'</div>'].join(''));
hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
othis.after(reElem);
@ -714,11 +733,14 @@ layui.define(['lay', 'layer', 'util'], function(exports){
// 单选框
,radio: function(elem){
var CLASS = 'layui-form-radio', ICON = ['&#xe643;', '&#xe63f;']
,radios = elem || elemForm.find('input[type=radio]')
var CLASS = 'layui-form-radio';
var ICON = ['layui-icon-radio', 'layui-icon-circle'];
var radios = elem || elemForm.find('input[type=radio]');
,events = function(reElem){
var radio = $(this), ANIM = 'layui-anim-scaleSpring';
// 事件
var events = function(reElem){
var radio = $(this);
var ANIM = 'layui-anim-scaleSpring';
reElem.on('click', function(){
var name = radio[0].name, forms = radio.parents(ELEM);
@ -728,44 +750,45 @@ layui.define(['lay', 'layer', 'util'], function(exports){
if(radio[0].disabled) return;
layui.each(sameRadio, function(){
var next = $(this).next('.'+CLASS);
var next = $(this).next('.' + CLASS);
this.checked = false;
next.removeClass(CLASS+'ed');
next.find('.layui-icon').removeClass(ANIM).html(ICON[1]);
next.removeClass(CLASS + 'ed');
next.find('.layui-icon').removeClass(ANIM + ' ' + ICON[0]).addClass(ICON[1]);
});
radio[0].checked = true;
reElem.addClass(CLASS+'ed');
reElem.find('.layui-icon').addClass(ANIM).html(ICON[0]);
reElem.addClass(CLASS + 'ed');
reElem.find('.layui-icon').addClass(ANIM + ' ' + ICON[0]);
layui.event.call(radio[0], MOD_NAME, 'radio('+ filter +')', {
elem: radio[0]
,value: radio[0].value
,othis: reElem
elem: radio[0],
value: radio[0].value,
othis: reElem
});
});
};
// 初始渲染
radios.each(function(index, radio){
var othis = $(this), hasRender = othis.next('.' + CLASS), disabled = this.disabled;
var othis = $(this), hasRender = othis.next('.' + CLASS);
var disabled = this.disabled;
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
// 替代元素
var reElem = $(['<div class="layui-unselect '+ CLASS
,(radio.checked ? (' '+CLASS+'ed') : '') // 选中状态
,(disabled ? ' layui-radio-disabled '+DISABLED : '') +'">' // 禁用状态
,'<i class="layui-anim layui-icon">'+ ICON[radio.checked ? 0 : 1] +'</i>'
,'<div>'+ function(){
var reElem = $(['<div class="layui-unselect '+ CLASS,
(radio.checked ? (' '+ CLASS +'ed') : ''), // 选中状态
(disabled ? ' layui-radio-disabled '+DISABLED : '') +'">', // 禁用状态
'<i class="layui-anim layui-icon '+ ICON[radio.checked ? 0 : 1] +'"></i>',
'<div>'+ function(){
var title = util.escape(radio.title || '');
if(typeof othis.next().attr('lay-radio') === 'string'){
if(othis.next('[lay-radio]')[0]){
title = othis.next().html();
// othis.next().remove();
}
return title
}() +'</div>'
,'</div>'].join(''));
return title;
}() +'</div>',
'</div>'].join(''));
othis.after(reElem);
events.call(this, reElem);
@ -838,7 +861,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var verifyStr = othis.attr('lay-verify') || '';
var vers = verifyStr.split('|');
var verType = othis.attr('lay-vertype'); // 提示方式
var value = othis.val();
var value = $.trim(othis.val());
othis.removeClass(DANGER); // 移除警示样式
@ -861,12 +884,13 @@ layui.define(['lay', 'layer', 'util'], function(exports){
errorText = errorText || rule[1];
// 获取自定义必填项提示文本
if(thisVer === 'required'){
errorText = othis.attr('lay-reqtext') || errorText;
}
// 若为必填项或者非空命中校验，则阻止提交，弹出提示
if(isTrue){
if(isTrue && (thisVer === 'required' || (value && thisVer !== 'required'))){
// 提示层风格
if(verType === 'tips'){
layer.tips(errorText, function(){
@ -881,7 +905,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
layer.alert(errorText, {title: '提示', shadeClose: true});
}
// 若返回的为字符或数字，则自动弹出默认提示框；否则由 verify 方法中处理提示
else if(/\bstring|number\b/.test(typeof errorText)){
else if(/\b(string|number)\b/.test(typeof errorText)){
layer.msg(errorText, {icon: 5, shift: 6});
}

241
src/modules/lay.js
View File

@ -4,51 +4,52 @@
;!function(window){ // gulp build: lay-header
"use strict";
var MOD_NAME = 'lay' //模块名
,document = window.document
var MOD_NAME = 'lay'; // 模块名
var document = window.document;
//DOM查找
,lay = function(selector){
return new LAY(selector);
}
// 元素查找
var lay = function(selector){
return new Class(selector);
};
// DOM 构造器
,LAY = function(selector){
var index = 0;
var nativeDOM = typeof selector === 'object' ? function(){
// 构造器
var Class = function(selector){
var that = this;
var elem = typeof selector === 'object' ? function(){
// 仅适配简单元素对象
return layui.isArray(selector) ? selector : [selector];
}() : (
this.selector = selector,
document.querySelectorAll(selector || null)
);
for(; index < nativeDOM.length; index++){
this.push(nativeDOM[index]);
}
lay.each(elem, function(index, item){
that.push(elem[index]);
});
};
/*
lay 对象操作
*/
LAY.prototype = [];
LAY.prototype.constructor = LAY;
Class.fn = Class.prototype = [];
Class.fn.constructor = Class;
//普通对象深度扩展
// 普通对象深度扩展
lay.extend = function(){
var ai = 1
,length
,args = arguments
,clone = function(target, obj){
target = target || (layui.type(obj) === 'array' ? [] : {}); //目标对象
var ai = 1;
var length;
var args = arguments;
var clone = function(target, obj){
target = target || (layui.type(obj) === 'array' ? [] : {}); // 目标对象
for(var i in obj){
//如果值为普通对象，则进入递归，继续深度合并
// 若值为普通对象，则进入递归，继续深度合并
target[i] = (obj[i] && obj[i].constructor === Object)
? clone(target[i], obj[i])
: obj[i];
}
return target;
}
};
args[0] = typeof args[0] === 'object' ? args[0] : {};
length = args.length
@ -61,39 +62,29 @@
return args[0];
};
//lay 模块版本
lay.v = '1.0.8';
//ie版本
// ie 版本
lay.ie = function(){
var agent = navigator.userAgent.toLowerCase();
return (!!window.ActiveXObject || "ActiveXObject" in window) ? (
(agent.match(/msie\s(\d+)/) || [])[1] || '11' //由于 ie11 并没有 msie 的标识
(agent.match(/msie\s(\d+)/) || [])[1] || '11' // 由于 ie11 并没有 msie 的标识
) : false;
}();
/**
* 获取 layui 常见方法，以便用于组件单独版
*/
lay.layui = layui || {};
lay.getPath = layui.cache.dir; //获取当前 JS 所在目录
lay.stope = layui.stope; //中止冒泡
lay.each = function(){ //遍历
lay.getPath = layui.cache.dir; // 获取当前 JS 所在目录
lay.stope = layui.stope; // 中止冒泡
lay.each = function(){ // 遍历
layui.each.apply(layui, arguments);
return this;
};
//数字前置补零
// 数字前置补零
lay.digit = function(num, length){
if(!(typeof num === 'string' || typeof num === 'number')) return '';
@ -106,7 +97,7 @@
return num < Math.pow(10, length) ? str + num : num;
};
//创建元素
// 创建元素
lay.elem = function(elemName, attr){
var elem = document.createElement(elemName);
lay.each(attr || {}, function(key, value){
@ -115,22 +106,22 @@
return elem;
};
//当前页面是否存在滚动条
// 当前页面是否存在滚动条
lay.hasScrollbar = function(){
return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
};
//元素定位
// 元素定位
lay.position = function(elem, elemView, obj){
if(!elemView) return;
obj = obj || {};
//如果绑定的是 document 或 body 元素，则直接获取鼠标坐标
// 如果绑定的是 document 或 body 元素，则直接获取鼠标坐标
if(elem === document || elem === lay('body')[0]){
obj.clickType = 'right';
}
//绑定绑定元素的坐标
// 绑定绑定元素的坐标
var rect = obj.clickType === 'right' ? function(){
var e = obj.e || window.event || {};
return {
@ -140,62 +131,62 @@
,bottom: e.clientY
}
}() : elem.getBoundingClientRect()
,elemWidth = elemView.offsetWidth //控件的宽度
,elemHeight = elemView.offsetHeight //控件的高度
,elemWidth = elemView.offsetWidth // 控件的宽度
,elemHeight = elemView.offsetHeight // 控件的高度
//滚动条高度
// 滚动条高度
,scrollArea = function(type){
type = type ? 'scrollLeft' : 'scrollTop';
return document.body[type] | document.documentElement[type];
}
//窗口宽高
// 窗口宽高
,winArea = function(type){
return document.documentElement[type ? 'clientWidth' : 'clientHeight']
}, margin = 5, left = rect.left, top = rect.bottom;
//相对元素居中
// 相对元素居中
if(obj.align === 'center'){
left = left - (elemWidth - elem.offsetWidth)/2;
} else if(obj.align === 'right'){
left = left - elemWidth + elem.offsetWidth;
}
//判断右侧是否超出边界
// 判断右侧是否超出边界
if(left + elemWidth + margin > winArea('width')){
left = winArea('width') - elemWidth - margin; //如果超出右侧，则将面板向右靠齐
left = winArea('width') - elemWidth - margin; // 如果超出右侧，则将面板向右靠齐
}
//左侧是否超出边界
// 左侧是否超出边界
if(left < margin) left = margin;
//判断底部和顶部是否超出边界
// 判断底部和顶部是否超出边界
if(top + elemHeight + margin > winArea()){
//优先顶部是否有足够区域显示完全
// 优先顶部是否有足够区域显示完全
if(rect.top > elemHeight + margin){
top = rect.top - elemHeight - margin*2; //顶部有足够的区域显示
top = rect.top - elemHeight - margin*2; // 顶部有足够的区域显示
} else {
//如果面板是鼠标右键弹出，且顶部没有足够区域显示，则将面板向底部靠齐
// 如果面板是鼠标右键弹出，且顶部没有足够区域显示，则将面板向底部靠齐
if(obj.clickType === 'right'){
top = winArea() - elemHeight - margin*2;
if(top < 0) top = 0; //不能溢出窗口顶部
if(top < 0) top = 0; // 不能溢出窗口顶部
} else {
top = margin; // 位置计算逻辑完备性处理
}
}
}
//定位类型
// 定位类型
var position = obj.position;
if(position) elemView.style.position = position;
//设置坐标
// 设置坐标
elemView.style.left = left + (position === 'fixed' ? 0 : scrollArea(1)) + 'px';
elemView.style.top = top + (position === 'fixed' ? 0 : scrollArea()) + 'px';
//防止页面无滚动条时，又因为弹出面板而出现滚动条导致的坐标计算偏差
// 防止页面无滚动条时，又因为弹出面板而出现滚动条导致的坐标计算偏差
if(!lay.hasScrollbar()){
var rect1 = elemView.getBoundingClientRect();
//如果弹出面板的溢出窗口底部，则表示将出现滚动条，此时需要重新计算坐标
// 如果弹出面板的溢出窗口底部，则表示将出现滚动条，此时需要重新计算坐标
if(!obj.SYSTEM_RELOAD && (rect1.bottom + margin) > winArea()){
obj.SYSTEM_RELOAD = true;
setTimeout(function(){
@ -226,7 +217,7 @@
}
};
//元素是否属于顶级元素（document 或 body）
// 元素是否属于顶级元素（document 或 body）
lay.isTopElem = function(elem){
var topElems = [document, lay('body')[0]]
,matched = false;
@ -237,9 +228,15 @@
});
return matched;
};
/*
* lay 元素操作
*/
//追加字符
LAY.addStr = function(str, new_str){
// 追加字符
Class.addStr = function(str, new_str){
str = str.replace(/\s+/, ' ');
new_str = new_str.replace(/\s+/, ' ').split(' ');
lay.each(new_str, function(ii, item){
@ -250,8 +247,8 @@
return str.replace(/^\s|\s$/, '');
};
//移除值
LAY.removeStr = function(str, new_str){
// 移除值
Class.removeStr = function(str, new_str){
str = str.replace(/\s+/, ' ');
new_str = new_str.replace(/\s+/, ' ').split(' ');
lay.each(new_str, function(ii, item){
@ -263,50 +260,44 @@
return str.replace(/\s+/, ' ').replace(/^\s|\s$/, '');
};
//查找子元素
LAY.prototype.find = function(selector){
// 查找子元素
Class.fn.find = function(selector){
var that = this;
var index = 0, arr = []
,isObject = typeof selector === 'object';
var elem = [];
var isObject = typeof selector === 'object';
this.each(function(i, item){
var nativeDOM = isObject ? item.contains(selector) : item.querySelectorAll(selector || null);
for(; index < nativeDOM.length; index++){
arr.push(nativeDOM[index]);
}
that.shift();
var children = isObject && item.contains(selector)
? selector
: item.querySelectorAll(selector || null);
lay.each(children, function(index, child){
elem.push(child);
});
});
if(!isObject){
that.selector = (that.selector ? that.selector + ' ' : '') + selector
}
lay.each(arr, function(i, item){
that.push(item);
});
return that;
return lay(elem);
};
//DOM遍历
LAY.prototype.each = function(fn){
// 元素遍历
Class.fn.each = function(fn){
return lay.each.call(this, this, fn);
};
//添加css类
LAY.prototype.addClass = function(className, type){
// 添加 className
Class.fn.addClass = function(className, type){
return this.each(function(index, item){
item.className = LAY[type ? 'removeStr' : 'addStr'](item.className, className)
item.className = Class[type ? 'removeStr' : 'addStr'](item.className, className)
});
};
//移除 css 类
LAY.prototype.removeClass = function(className){
// 移除 className
Class.fn.removeClass = function(className){
return this.addClass(className, true);
};
//是否包含 css 类
LAY.prototype.hasClass = function(className){
// 是否包含 css 类
Class.fn.hasClass = function(className){
var has = false;
this.each(function(index, item){
if(new RegExp('\\b'+ className +'\\b').test(item.className)){
@ -316,10 +307,10 @@
return has;
};
//添加或获取 css style
LAY.prototype.css = function(key, value){
var that = this
,parseValue = function(v){
// 添加或获取 css style
Class.fn.css = function(key, value){
var that = this;
var parseValue = function(v){
return isNaN(v) ? v : (v +'px');
};
return (typeof key === 'string' && value === undefined) ? function(){
@ -331,28 +322,28 @@
});
};
//添加或获取宽度
LAY.prototype.width = function(value){
// 添加或获取宽度
Class.fn.width = function(value){
var that = this;
return value === undefined ? function(){
if(that.length > 0) return that[0].offsetWidth; //此处还需做兼容
if(that.length > 0) return that[0].offsetWidth; // 此处还需做兼容
}() : that.each(function(index, item){
that.css('width', value);
});
};
//添加或获取高度
LAY.prototype.height = function(value){
// 添加或获取高度
Class.fn.height = function(value){
var that = this;
return value === undefined ? function(){
if(that.length > 0) return that[0].offsetHeight; //此处还需做兼容
if(that.length > 0) return that[0].offsetHeight; // 此处还需做兼容
}() : that.each(function(index, item){
that.css('height', value);
});
};
//添加或获取属性
LAY.prototype.attr = function(key, value){
// 添加或获取属性
Class.fn.attr = function(key, value){
var that = this;
return value === undefined ? function(){
if(that.length > 0) return that[0].getAttribute(key);
@ -361,15 +352,15 @@
});
};
//移除属性
LAY.prototype.removeAttr = function(key){
// 移除属性
Class.fn.removeAttr = function(key){
return this.each(function(index, item){
item.removeAttribute(key);
});
};
//设置或获取 HTML 内容
LAY.prototype.html = function(html){
// 设置或获取 HTML 内容
Class.fn.html = function(html){
var that = this;
return html === undefined ? function(){
if(that.length > 0) return that[0].innerHTML;
@ -378,8 +369,8 @@
});
};
//设置或获取值
LAY.prototype.val = function(value){
// 设置或获取值
Class.fn.val = function(value){
var that = this;
return value === undefined ? function(){
if(that.length > 0) return that[0].value;
@ -388,8 +379,8 @@
});
};
//追加内容
LAY.prototype.append = function(elem){
// 追加内容
Class.fn.append = function(elem){
return this.each(function(index, item){
typeof elem === 'object'
? item.appendChild(elem)
@ -397,15 +388,15 @@
});
};
//移除内容
LAY.prototype.remove = function(elem){
// 移除内容
Class.fn.remove = function(elem){
return this.each(function(index, item){
elem ? item.removeChild(elem) : item.parentNode.removeChild(item);
});
};
//事件绑定
LAY.prototype.on = function(eventName, fn){
// 事件绑定
Class.fn.on = function(eventName, fn){
return this.each(function(index, item){
item.attachEvent ? item.attachEvent('on' + eventName, function(e){
e.target = e.srcElement;
@ -414,8 +405,8 @@
});
};
//解除事件
LAY.prototype.off = function(eventName, fn){
// 解除事件
Class.fn.off = function(eventName, fn){
return this.each(function(index, item){
item.detachEvent
? item.detachEvent('on'+ eventName, fn)
@ -423,12 +414,12 @@
});
};
//暴露 lay 到全局作用域
// export
window.lay = lay;
//如果在 layui 体系中
// 输出为 layui 模块
if(window.layui && layui.define){
layui.define(function(exports){ //layui 加载
layui.define(function(exports){
exports(MOD_NAME, lay);
});
}

101
src/modules/layer.js
View File

@ -255,7 +255,7 @@ doms.anim = {
doms.SHADE = 'layui-layer-shade';
doms.MOVE = 'layui-layer-move';
//默认配置
// 默认配置
Class.pt.config = {
type: 0,
shade: 0.3,
@ -265,16 +265,16 @@ Class.pt.config = {
offset: 'auto',
area: 'auto',
closeBtn: 1,
time: 0, //0表示不自动关闭
icon: -1,
time: 0, // 0 表示不自动关闭
zIndex: 19891014,
maxWidth: 360,
anim: 0,
isOutAnim: true, //退出动画
minStack: true, //最小化堆叠
icon: -1,
isOutAnim: true, // 退出动画
minStack: true, // 最小化堆叠
moveType: 1,
resize: true,
scrollbar: true, //是否允许浏览器滚动条
scrollbar: true, // 是否允许浏览器滚动条
tips: 2
};
@ -382,25 +382,45 @@ Class.pt.vessel = function(conType, callback){
return that;
};
//创建骨架
// 创建骨架
Class.pt.creat = function(){
var that = this
,config = that.config
,times = that.index, nodeIndex
,content = config.content
,conType = typeof content === 'object'
,body = $('body');
var that = this;
var config = that.config;
var times = that.index, nodeIndex;
var content = config.content;
var conType = typeof content === 'object';
var body = $('body');
if(config.id && $('.'+ doms[0]).find('#'+ config.id)[0]) return;
// 若 id 对应的弹层已经存在，则不重新创建
if(config.id && $('.'+ doms[0]).find('#'+ config.id)[0]){
return (function(){
var layero = $('#'+ config.id).closest('.'+ doms[0]);
var index = layero.attr('times');
var options = layero.data('config');
var elemShade = $('#'+ doms.SHADE + index);
var maxminStatus = layero.data('maxminStatus') || {};
// 若弹层为最小化状态，则点击目标元素时，自动还原
if(maxminStatus === 'min'){
layer.restore(index);
} else if(options.hideOnClose){
elemShade.show();
layero.show();
};
})();
};
// 是否移除活动元素的焦点
if(config.removeFocus) {
document.activeElement.blur(); // 将原始的聚焦节点失焦
}
// 初始化 area 属性
if(typeof config.area === 'string'){
config.area = config.area === 'auto' ? ['', ''] : [config.area, ''];
}
//anim兼容旧版shift
// anim 兼容旧版 shift
if(config.shift){
config.anim = config.shift;
}
@ -500,13 +520,8 @@ Class.pt.creat = function(){
});
};
// 记录关闭动画
if(config.isOutAnim){
that.layero.data({
isOutAnim: true,
anim: config.anim
});
}
// 记录配置信息
that.layero.data('config', config);
};
// 当前实例的 resize 事件
@ -1025,8 +1040,6 @@ layer.style = function(index, options, limit){
// 最小化
layer.min = function(index, options){
options = options || {};
var layero = $('#'+ doms[0] + index);
var maxminStatus = layero.data('maxminStatus');
@ -1034,8 +1047,10 @@ layer.min = function(index, options){
if(maxminStatus === 'max') layer.restore(index); // 若当前为最大化，则先还原后再最小化
layero.data('maxminStatus', 'min');
options = options || layero.data('config') || {};
var shadeo = $('#'+ doms.SHADE + index);
var elemMin = layero.find('.layui-layer-min');
var titHeight = layero.find(doms[1]).outerHeight() || 0;
var minLeft = layero.attr('minLeft'); // 最小化时的横坐标
var hasMinLeft = typeof minLeft === 'string'; // 是否已经赋值过最小化坐标
@ -1077,7 +1092,7 @@ layer.min = function(index, options){
layero.attr('position', position);
layer.style(index, settings, true);
layero.find('.layui-layer-min').hide();
elemMin.hide();
layero.attr('type') === 'page' && layero.find(doms[4]).hide();
ready.rescollbar(index);
@ -1157,7 +1172,10 @@ layer.close = function(index, callback){
) : $('#'+ doms[0] + index)
}();
var type = layero.attr('type');
var data = layero.data() || {};
var options = layero.data('config') || {};
var hideOnClose = options.id && options.hideOnClose; // 是否关闭时移除弹层容器
if(!layero[0]) return;
// 关闭动画
var closeAnim = ({
@ -1165,11 +1183,19 @@ layer.close = function(index, callback){
slideLeft: 'layer-anim-slide-left-out',
slideUp: 'layer-anim-slide-up-out',
slideRight: 'layer-anim-slide-right-out'
})[data.anim] || 'layer-anim-close';
if(!layero[0]) return;
var WRAP = 'layui-layer-wrap', remove = function(){
})[options.anim] || 'layer-anim-close';
// 移除主容器
var remove = function(){
var WRAP = 'layui-layer-wrap';
// 是否关闭时隐藏弹层容器
if(hideOnClose){
layero.removeClass('layer-anim '+ closeAnim);
return layero.hide();
}
// 是否为页面捕获层
if(type === ready.type[1] && layero.attr('conType') === 'object'){
layero.children(':not(.'+ doms[5] +')').remove();
var wrap = layero.find('.'+WRAP);
@ -1178,7 +1204,7 @@ layer.close = function(index, callback){
}
wrap.css('display', wrap.data('display')).removeClass(WRAP);
} else {
//低版本IE 回收 iframe
// 低版本 IE 回收 iframe
if(type === ready.type[2]){
try {
var iframe = $('#'+ doms[4] + index)[0];
@ -1201,13 +1227,18 @@ layer.close = function(index, callback){
delete ready.events.resize[index];
}
};
// 移除遮罩
var removeShade = (function fn(){
$('#'+ doms.SHADE + index)[
hideOnClose ? 'hide' : 'remove'
]();
})();
// 是否允许关闭动画
if(data.isOutAnim){
if(options.isOutAnim){
layero.addClass('layer-anim '+ closeAnim);
}
$('#layui-layer-moves, #'+ doms.SHADE + index).remove();
layer.ie == 6 && ready.reselect();
ready.rescollbar(index);
@ -1217,7 +1248,7 @@ layer.close = function(index, callback){
ready.minStackArr.push(layero.attr('minLeft'));
}
if((layer.ie && layer.ie < 10) || !layero.data('isOutAnim')){
if((layer.ie && layer.ie < 10) || !options.isOutAnim){
remove()
} else {
setTimeout(function(){

131
src/modules/table.js
View File

@ -1674,22 +1674,22 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
if(!height) return;
//减去列头区域的高度
bodyHeight = parseFloat(height) - (that.layHeader.outerHeight() || 38) - 1; //此处的数字常量是为了防止容器处在隐藏区域无法获得高度的问题，暂时只对默认尺寸的表格做支持。
// 减去列头区域的高度 --- 此处的数字常量是为了防止容器处在隐藏区域无法获得高度的问题，暂时只对默认尺寸表格做支持
bodyHeight = parseFloat(height) - (that.layHeader.outerHeight() || 39) - 1;
//减去工具栏的高度
// 减去工具栏的高度
if(options.toolbar){
bodyHeight -= (that.layTool.outerHeight() || 50);
}
//减去统计栏的高度
// 减去统计栏的高度
if(options.totalRow){
bodyHeight -= (that.layTotal.outerHeight() || 40);
bodyHeight -= (that.layTotal.outerHeight() || 40) - 1; // 减掉一个共用的 border width
}
//减去分页栏的高度
// 减去分页栏的高度
if(options.page || options.pagebar){
bodyHeight -= (that.layPage.outerHeight() || 43);
bodyHeight -= (that.layPage.outerHeight() || 43) - 1;
}
if (options.maxHeight) {
@ -2140,11 +2140,13 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
// 复选框选择（替代元素的 click 事件）
that.elem.on('click', 'input[name="layTableCheckbox"]+', function(){
var checkbox = $(this).prev()
,children = that.layBody.find('input[name="layTableCheckbox"]')
,index = checkbox.parents('tr').eq(0).data('index')
,checked = checkbox[0].checked
,isAll = checkbox.attr('lay-filter') === 'layTableAllChoose';
var othis = $(this);
var td = othis.closest('td');
var checkbox = othis.prev();
var children = that.layBody.find('input[name="layTableCheckbox"]');
var index = checkbox.parents('tr').eq(0).data('index');
var checked = checkbox[0].checked;
var isAll = checkbox.attr('lay-filter') === 'layTableAllChoose';
if(checkbox[0].disabled) return;
@ -2167,14 +2169,19 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
MOD_NAME, 'checkbox('+ filter +')',
commonMember.call(checkbox[0], {
checked: checked,
type: isAll ? 'all' : 'one'
type: isAll ? 'all' : 'one',
getCol: function(){ // 获取当前列的表头配置信息
return that.col(td.data('key'));
}
})
);
});
// 单选框选择
that.elem.on('click', 'input[lay-type="layTableRadio"]+', function(){
var radio = $(this).prev();
var othis = $(this);
var td = othis.closest('td');
var radio = othis.prev();
var checked = radio[0].checked;
var index = radio.parents('tr').eq(0).data('index');
@ -2191,30 +2198,33 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
radio[0],
MOD_NAME, 'radio('+ filter +')',
commonMember.call(radio[0], {
checked: checked
checked: checked,
getCol: function(){ // 获取当前列的表头配置信息
return that.col(td.data('key'));
}
})
);
});
// 行事件
that.layBody.on('mouseenter', 'tr', function(){ //鼠标移入行
that.layBody.on('mouseenter', 'tr', function(){ // 鼠标移入行
var othis = $(this);
var index = othis.index();
if(othis.data('off')) return; //不触发事件
if(othis.data('off')) return; // 不触发事件
that.layBody.find('tr:eq('+ index +')').addClass(ELEM_HOVER)
}).on('mouseleave', 'tr', function(){ //鼠标移出行
}).on('mouseleave', 'tr', function(){ // 鼠标移出行
var othis = $(this);
var index = othis.index();
if(othis.data('off')) return; //不触发事件
if(othis.data('off')) return; // 不触发事件
that.layBody.find('tr:eq('+ index +')').removeClass(ELEM_HOVER)
}).on('click', 'tr', function(){ //单击行
}).on('click', 'tr', function(){ // 单击行
setRowEvent.call(this, 'row');
}).on('dblclick', 'tr', function(){ //双击行
}).on('dblclick', 'tr', function(){ // 双击行
setRowEvent.call(this, 'rowDouble');
}).on('contextmenu', 'tr', function(e){ //菜单
}).on('contextmenu', 'tr', function(e){ // 菜单
if (!options.defaultContextmenu) e.preventDefault();
setRowEvent.call(this, 'rowContextmenu');
});;
});
// 创建行单击、双击、菜单事件
var setRowEvent = function(eventType){
@ -2304,20 +2314,29 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
$(this).remove(); // 移除编辑状态
});
// 单元格触发编辑的事件
// 表格主体单元格触发编辑的事件
that.layBody.on(options.editTrigger, 'td', function(e){
renderGridEdit(this, e)
}).on('mouseenter', 'td', function(){
gridExpand.call(this)
showGridExpandIcon.call(this)
}).on('mouseleave', 'td', function(){
gridExpand.call(this, 'hide');
showGridExpandIcon.call(this, 'hide');
});
//单元格展开图标
var ELEM_GRID = 'layui-table-grid', ELEM_GRID_DOWN = 'layui-table-grid-down', ELEM_GRID_PANEL = 'layui-table-grid-panel'
,gridExpand = function(hide){
var othis = $(this)
,elemCell = othis.children(ELEM_CELL);
// 表格合计栏单元格 hover 显示展开图标
that.layTotal.on('mouseenter', 'td', function(){
showGridExpandIcon.call(this)
}).on('mouseleave', 'td', function(){
showGridExpandIcon.call(this, 'hide');
});
// 显示单元格展开图标
var ELEM_GRID = 'layui-table-grid';
var ELEM_GRID_DOWN = 'layui-table-grid-down';
var ELEM_GRID_PANEL = 'layui-table-grid-panel';
var showGridExpandIcon = function(hide){
var othis = $(this);
var elemCell = othis.children(ELEM_CELL);
if(othis.data('off')) return; //不触发事件
@ -2331,12 +2350,11 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
othis.append('<div class="'+ ELEM_GRID_DOWN +'"><i class="layui-icon layui-icon-down"></i></div>');
}
};
//单元格展开事件
that.layBody.on('click', '.'+ ELEM_GRID_DOWN, function(e){
var othis = $(this)
,td = othis.parent()
,elemCell = td.children(ELEM_CELL);
// 单元格内容展开
var gridExpand = function(e){
var othis = $(this);
var td = othis.parent();
var elemCell = td.children(ELEM_CELL);
that.tipsIndex = layer.tips([
'<div class="layui-table-tips-main" style="margin-top: -'+ (elemCell.height() + 23) +'px;'+ function(){
@ -2347,18 +2365,18 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
return 'padding: 14px 15px;';
}
return '';
}() +'">'
,elemCell.html()
,'</div>'
,'<i class="layui-icon layui-table-tips-c layui-icon-close"></i>'
}() +'">',
elemCell.html(),
'</div>',
'<i class="layui-icon layui-table-tips-c layui-icon-close"></i>'
].join(''), elemCell[0], {
tips: [3, '']
,time: -1
,anim: -1
,maxWidth: (device.ios || device.android) ? 300 : that.elem.width()/2
,isOutAnim: false
,skin: 'layui-table-tips'
,success: function(layero, index){
tips: [3, ''],
time: -1,
anim: -1,
maxWidth: (device.ios || device.android) ? 300 : that.elem.width()/2,
isOutAnim: false,
skin: 'layui-table-tips',
success: function(layero, index){
layero.find('.layui-table-tips-c').on('click', function(){
layer.close(index);
});
@ -2366,11 +2384,21 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
});
layui.stope(e);
};
// 表格主体单元格展开事件
that.layBody.on('click', '.'+ ELEM_GRID_DOWN, function(e){
gridExpand.call(this, e);
});
// 表格合计栏单元格展开事件
that.layTotal.on('click', '.'+ ELEM_GRID_DOWN, function(e){
gridExpand.call(this, e);
});
// 行工具条操作事件
var toolFn = function(type){
var othis = $(this);
var td = othis.closest('td');
var index = othis.parents('tr').eq(0).data('index');
layui.event.call(
@ -2378,7 +2406,10 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
MOD_NAME,
(type || 'tool') + '('+ filter +')',
commonMember.call(this, {
event: othis.attr('lay-event')
event: othis.attr('lay-event'),
getCol: function(){ // 获取当前列的表头配置信息
return that.col(td.data('key'));
}
})
);
// 设置当前行选中样式
@ -2672,7 +2703,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
table.eachCols(id, function(i3, item3){
if(item3.field && item3.type == 'normal'){
// 不导出隐藏列
if(item3.hide){
if(item3.hide || item3.ignoreExport){
if(i1 == 0) fieldsIsHide[item3.field] = true; // 记录隐藏列
return;
}

191
src/modules/treeTable.js
View File

@ -142,6 +142,10 @@ layui.define(['table'], function (exports) {
retData[dataName] = that.flatToTree(retData[dataName]);
}
if (parseDataThat.autoSort && parseDataThat.initSort && parseDataThat.initSort.type) {
layui.sort(retData[dataName], parseDataThat.initSort.field, parseDataThat.initSort.type === 'desc', true)
}
that.initData(retData[dataName]);
return retData;
@ -155,7 +159,7 @@ layui.define(['table'], function (exports) {
options.data = that.flatToTree(options.data);
}
if (options.initSort && options.initSort.type) {
options.data = layui.sort(options.data, options.initSort.field, options.initSort.type === 'desc')
layui.sort(options.data, options.initSort.field, options.initSort.type === 'desc', true)
}
that.initData(options.data);
}
@ -224,8 +228,8 @@ layui.define(['table'], function (exports) {
flexIconOpen: '<i class="layui-icon layui-icon-triangle-d"></i>', // 打开时候的折叠图标
showIcon: true, // 是否显示图标(节点类型图标)
icon: '', // 节点图标，如果设置了这个属性或者数据中有这个字段信息，不管打开还是关闭都以这个图标的值为准
iconClose: '<i class="layui-icon layui-icon-folder-open"></i>', // 打开时候的图标
iconOpen: '<i class="layui-icon layui-icon-folder"></i>', // 关闭时候的图标
iconClose: '<i class="layui-icon layui-icon-folder"></i>', // 关闭时候的图标
iconOpen: '<i class="layui-icon layui-icon-folder-open"></i>', // 打开时候的图标
iconLeaf: '<i class="layui-icon layui-icon-leaf"></i>', // 叶子节点的图标
showFlexIconIfNotParent: false, // 当节点不是父节点的时候是否显示折叠图标
dblClickExpand: true, // 双击节点时，是否自动展开父节点的标识
@ -401,34 +405,43 @@ layui.define(['table'], function (exports) {
that.initData(item1[childrenKey] || [], dataIndex);
});
parentIndex || updateCache(tableId, childrenKey);
updateCache(tableId, childrenKey, data);
return data;
}
// 与 tableId 有关带防抖的方法
var debounceFn = (function () {
var fn = {};
return function (tableId, func, wait) {
fn[tableId] = fn[tableId] || layui.debounce(func, wait);
return fn[tableId];
}
})()
// 优化参数，添加一个 getNodeByIndex 方法 只传 表格id 和行 dataIndex 分几步优化 todo
var expandNode = function (treeNode, expandFlag, sonSign, focus, callbackFlag) {
// treeNode // 需要展开的节点
var trElem = treeNode.trElem;
var tableViewElem = trElem.closest(ELEM_VIEW);
var tableViewFilterId = tableViewElem.attr('lay-filter');
var tableId = tableViewElem.attr('lay-id');
var options = table.getOptions(tableId);
var tableViewElem = treeNode.tableViewElem || trElem.closest(ELEM_VIEW);
var tableId = treeNode.tableId || tableViewElem.attr('lay-id');
var options = treeNode.options || table.getOptions(tableId);
var dataIndex = treeNode.dataIndex || trElem.attr('lay-data-index'); // 可能出现多层
var treeTableThat = getThisTable(tableId);
var treeOptions = options.tree || {};
var customName = treeOptions.customName || {};
var isParentKey = customName.isParent;
var trIndex = trElem.attr('lay-data-index'); // 可能出现多层
var treeTableThat = getThisTable(tableId);
var tableData = treeTableThat.getTableData();
var trData = treeTableThat.getNodeDataByIndex(trIndex);
var dataLevel = trElem.data('level');
var dataLevelNew = (dataLevel || 0) + 1;
var trData = treeTableThat.getNodeDataByIndex(dataIndex);
// 后续调优：对已经展开的节点进行展开和已经关闭的节点进行关闭应该做优化减少不必要的代码执行 todo
var isToggle = layui.type(expandFlag) !== 'boolean';
var trExpand = isToggle ? !trData[LAY_EXPAND] : expandFlag;
var retValue = trData[isParentKey] ? trExpand : null;
if (retValue === null) {
return retValue;
}
if (callbackFlag && trExpand != trData[LAY_EXPAND] && (!trData[LAY_ASYNC_STATUS] || trData[LAY_ASYNC_STATUS] === 'local')) {
var beforeExpand = treeOptions.callback.beforeExpand;
@ -442,33 +455,46 @@ layui.define(['table'], function (exports) {
var trExpanded = trData[LAY_HAS_EXPANDED]; // 展开过，包括异步加载
// 找到表格中的同类节点（需要找到lay-data-index一致的所有行）
var trsElem = tableViewElem.find('tr[lay-data-index="' + trIndex + '"]');
var trsElem = tableViewElem.find('tr[lay-data-index="' + dataIndex + '"]');
// 处理折叠按钮图标
var flexIconElem = trsElem.find('.layui-table-tree-flexIcon');
flexIconElem.html(trExpand ? treeOptions.view.flexIconOpen : treeOptions.view.flexIconClose)
trData[isParentKey] && flexIconElem.css('visibility', 'visible');
// 处理节点图标
if (treeOptions.view.showIcon && trData[isParentKey] && !trData.icon && !treeOptions.view.icon) {
var nodeIconElem = trsElem.find('.layui-table-tree-nodeIcon');
nodeIconElem.html(trExpand ? treeOptions.view.iconOpen : treeOptions.view.iconClose);
}
treeOptions.view.showIcon && trsElem.find('.layui-table-tree-nodeIcon:not(.layui-table-tree-iconCustom,.layui-table-tree-iconLeaf)')
.html(trExpand ? treeOptions.view.iconOpen : treeOptions.view.iconClose);
var childNodes = trData[customName.children] || []; // 测试用后续需要改成子节点的字段名称
var childNodes = trData[customName.children] || [];
// 处理子节点展示与否
if (trExpand) {
// 展开
if (trExpanded) { // 已经展开过
trData[LAY_EXPAND] = trExpand;
tableViewElem.find(childNodes.map(function (value, index, array) {
trsElem.nextAll(childNodes.map(function (value, index, array) {
return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]'
}).join(',')).removeClass(HIDE);
trData[LAY_EXPAND] = trExpand;
layui.each(childNodes, function (i1, item1) {
if (sonSign && !isToggle) { // 非状态切换的情况下
if (!item1[isParentKey]) {
return;
}
if (sonSign && !isToggle && !item1[LAY_EXPAND]) { // 非状态切换的情况下
// 级联展开子节点
expandNode({trElem: tableViewElem.find('tr[lay-data-index="' + item1[LAY_DATA_INDEX] + '"]').first()}, expandFlag, sonSign, focus, callbackFlag);
} else if (item1[LAY_EXPAND]) {
// 级联展开
expandNode({trElem: tableViewElem.find('tr[lay-data-index="' + item1[LAY_DATA_INDEX] + '"]').first()}, true);
expandNode({
dataIndex: item1[LAY_DATA_INDEX],
trElem: tableViewElem.find('tr[lay-data-index="' + item1[LAY_DATA_INDEX] + '"]').first(),
tableViewElem: tableViewElem,
tableId: tableId,
options: options,
}, expandFlag, sonSign, focus, callbackFlag);
} else if (item1[LAY_EXPAND]) { // 初始化级联展开
expandNode({
dataIndex: item1[LAY_DATA_INDEX],
trElem: tableViewElem.find('tr[lay-data-index="' + item1[LAY_DATA_INDEX] + '"]').first(),
tableViewElem: tableViewElem,
tableId: tableId,
options: options,
}, true);
}
})
} else {
@ -539,24 +565,26 @@ layui.define(['table'], function (exports) {
trExpanded = trData[LAY_HAS_EXPANDED] = true;
if (childNodes.length) {
// 判断是否需要排序
if (options.initSort && !options.url) {
if (options.initSort && (!options.url || options.autoSort)) {
var initSort = options.initSort;
if (initSort.type) {
childNodes = trData[customName.children] = layui.sort(childNodes, initSort.field, initSort.type === 'desc');
layui.sort(childNodes, initSort.field, initSort.type === 'desc', true);
} else {
// 恢复默认
childNodes = trData[customName.children] = layui.sort(childNodes, table.config.indexName);
layui.sort(childNodes, table.config.indexName, null, true);
}
}
treeTableThat.initData(trData[customName.children], trData[LAY_DATA_INDEX]);
// 将数据通过模板得出节点的html代码
var str2 = table.getTrHtml(tableId, childNodes, null, null, trIndex);
var str2 = table.getTrHtml(tableId, childNodes, null, null, dataIndex);
var str2Obj = {
trs: $(str2.trs.join('')),
trs_fixed: $(str2.trs_fixed.join('')),
trs_fixed_r: $(str2.trs_fixed_r.join(''))
}
var dataLevel = dataIndex.split('-').length - 1;
var dataLevelNew = (dataLevel || 0) + 1;
layui.each(childNodes, function (childIndex, childItem) {
str2Obj.trs.eq(childIndex).attr({
'data-index': childItem[LAY_DATA_INDEX],
@ -575,9 +603,9 @@ layui.define(['table'], function (exports) {
})
})
tableViewElem.find(ELEM_MAIN).find('tbody tr[lay-data-index="' + trIndex + '"]').after(str2Obj.trs);
tableViewElem.find(ELEM_FIXL).find('tbody tr[lay-data-index="' + trIndex + '"]').after(str2Obj.trs_fixed);
tableViewElem.find(ELEM_FIXR).find('tbody tr[lay-data-index="' + trIndex + '"]').after(str2Obj.trs_fixed_r);
tableViewElem.find(ELEM_MAIN).find('tbody tr[lay-data-index="' + dataIndex + '"]').after(str2Obj.trs);
tableViewElem.find(ELEM_FIXL).find('tbody tr[lay-data-index="' + dataIndex + '"]').after(str2Obj.trs_fixed);
tableViewElem.find(ELEM_FIXR).find('tbody tr[lay-data-index="' + dataIndex + '"]').after(str2Obj.trs_fixed_r);
// 初始化新增的节点中的内容
layui.each(str2Obj, function (key, item) {
@ -587,30 +615,43 @@ layui.define(['table'], function (exports) {
if (sonSign && !isToggle) { // 非状态切换的情况下
// 级联展开/关闭子节点
layui.each(childNodes, function (i1, item1) {
expandNode({trElem: tableViewElem.find('tr[lay-data-index="' + item1[LAY_DATA_INDEX] + '"]').first()}, expandFlag, sonSign, focus, callbackFlag);
expandNode({
dataIndex: item1[LAY_DATA_INDEX],
trElem: tableViewElem.find('tr[lay-data-index="' + item1[LAY_DATA_INDEX] + '"]').first(),
tableViewElem: tableViewElem,
tableId: tableId,
options: options,
}, expandFlag, sonSign, focus, callbackFlag);
})
}
}
}
} else {
trData[LAY_EXPAND] = trExpand;
// 折叠
// 关闭
if (sonSign && !isToggle) { // 非状态切换的情况下
layui.each(childNodes, function (i1, item1) {
expandNode({trElem: tableViewElem.find('tr[lay-data-index="' + item1[LAY_DATA_INDEX] + '"]').first()}, expandFlag, sonSign, focus, callbackFlag);
expandNode({
dataIndex: item1[LAY_DATA_INDEX],
trElem: tableViewElem.find('tr[lay-data-index="' + item1[LAY_DATA_INDEX] + '"]').first(),
tableViewElem: tableViewElem,
tableId: tableId,
options: options,
}, expandFlag, sonSign, focus, callbackFlag);
});
tableViewElem.find(childNodes.map(function (value, index, array) { // 只隐藏直接子节点，其他由递归的处理
return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]'
}).join(',')).addClass(HIDE);
} else {
var childNodesFlat = treeTableThat.treeToFlat(childNodes, trData[customName.id], trIndex);
var childNodesFlat = treeTableThat.treeToFlat(childNodes, trData[customName.id], dataIndex);
tableViewElem.find(childNodesFlat.map(function (value, index, array) {
return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]'
}).join(',')).addClass(HIDE);
}
}
table.resize(tableId);
debounceFn(tableId, function () {
treeTable.resize(tableId);
}, 25)();
if (callbackFlag && trData[LAY_ASYNC_STATUS] !== 'loading') {
var onExpand = treeOptions.callback.onExpand;
@ -643,7 +684,9 @@ layui.define(['table'], function (exports) {
var options = that.getOptions();
var tableViewElem = options.elem.next();
return expandNode({trElem: tableViewElem.find('tr[lay-data-index="' + index + '"]').first()}, expandFlag, sonSign, null, callbackFlag)
return expandNode({
trElem: tableViewElem.find('tr[lay-data-index="' + index + '"]').first()
}, expandFlag, sonSign, null, callbackFlag)
};
/**
@ -662,18 +705,21 @@ layui.define(['table'], function (exports) {
var options = that.getOptions();
var treeOptions = options.tree;
var tableView = options.elem.next();
var isParentKey = treeOptions.customName.isParent;
if (!expandFlag) {
// 关闭所有
// 将所有已经打开的节点的状态设置为关闭，
that.updateStatus(null, {LAY_EXPAND: false}); // 只处理当前页，如果需要处理全部表格，需要用treeTable.updateStatus
that.updateStatus(null, function (d) {
if (d[isParentKey]) {
d[LAY_EXPAND] = false;
}
}) // {LAY_EXPAND: false}); // 只处理当前页，如果需要处理全部表格，需要用treeTable.updateStatus
// 隐藏所有非顶层的节点
tableView.find('.layui-table-box tbody tr[data-level!="0"]').addClass(HIDE);
// 处理顶层节点的图标
var trLevel0 = tableView.find('tbody tr[data-level="0"]');
trLevel0.find('.layui-table-tree-flexIcon').html(treeOptions.view.flexIconClose);
treeOptions.view.showIcon && trLevel0.find('.layui-table-tree-nodeIcon').html(treeOptions.view.iconClose);
tableView.find('.layui-table-tree-flexIcon').html(treeOptions.view.flexIconClose);
treeOptions.view.showIcon && tableView.find('.layui-table-tree-nodeIcon:not(.layui-table-tree-iconCustom,.layui-table-tree-iconLeaf)').html(treeOptions.view.iconClose);
} else {
var tableDataFlat = treeTable.getData(id, true);
// 展开所有
@ -681,7 +727,6 @@ layui.define(['table'], function (exports) {
if (treeOptions.async.enable) {
// 判断是否有未加载过的节点
var isAllAsyncDone = true;
var isParentKey = treeOptions.customName.isParent;
layui.each(tableDataFlat, function (i1, item1) {
if (item1[isParentKey] && !item1[LAY_ASYNC_STATUS]) {
isAllAsyncDone = false;
@ -712,16 +757,24 @@ layui.define(['table'], function (exports) {
})
// 如果全部节点已经都打开过，就可以简单处理跟隐藏所有节点反操作
if (isAllExpanded) {
that.updateStatus(null, {LAY_EXPAND: true});
// 隐藏所有非顶层的节点
that.updateStatus(null, function (d) {
if (d[isParentKey]) {
d[LAY_EXPAND] = true;
}
});
// 显示所有子节点
tableView.find('tbody tr[data-level!="0"]').removeClass(HIDE);
// 处理顶层节点的图标
// var trLevel0 = tableView.find('tbody tr[data-level="0"]');
// 处理节点的图标
tableView.find('.layui-table-tree-flexIcon').html(treeOptions.view.flexIconOpen);
tableView.find('.layui-table-tree-nodeIcon').html(treeOptions.view.iconOpen);
treeOptions.view.showIcon && tableView.find('.layui-table-tree-nodeIcon:not(.layui-table-tree-iconCustom,.layui-table-tree-iconLeaf)').html(treeOptions.view.iconOpen);
} else {
// 如果有未打开过的父节点，将内容全部生成
that.updateStatus(null, {LAY_EXPAND: true, LAY_HAS_EXPANDED: true});
that.updateStatus(null, function (d) {
if (d[isParentKey]) {
d[LAY_EXPAND] = true;
d[LAY_HAS_EXPANDED] = true;
}
}); // {LAY_EXPAND: true, LAY_HAS_EXPANDED: true});
var trAll = table.getTrHtml(id, tableDataFlat);
var trAllObj = {
@ -730,7 +783,6 @@ layui.define(['table'], function (exports) {
trs_fixed_r: $(trAll.trs_fixed_r.join(''))
}
layui.each(tableDataFlat, function (dataIndex, dataItem) {
// debugger;
var dataLevel = dataItem[LAY_DATA_INDEX].split('-').length - 1;
trAllObj.trs.eq(dataIndex).attr({
'data-index': dataItem[LAY_DATA_INDEX],
@ -786,7 +838,7 @@ layui.define(['table'], function (exports) {
var dataExpand = {}; // 记录需要展开的数据
var nameKey = customName.name;
var indent = treeOptions.view.indent || 14;
var indent = treeOptionsView.indent || 14;
layui.each(tableView.find('td[data-field="' + nameKey + '"]'), function (index, item) {
item = $(item);
var trElem = item.closest('tr');
@ -814,11 +866,17 @@ layui.define(['table'], function (exports) {
'margin-left: ' + (indent * trElem.attr('data-level')) + 'px;',
(trData[isParentKey] || treeOptionsView.showFlexIconIfNotParent) ? '' : ' visibility: hidden;',
'">',
trData[LAY_EXPAND] ? treeOptions.view.flexIconOpen : treeOptions.view.flexIconClose, // 折叠图标
trData[LAY_EXPAND] ? treeOptionsView.flexIconOpen : treeOptionsView.flexIconClose, // 折叠图标
'</div>',
'<div class="layui-inline layui-table-tree-nodeIcon">',
treeOptions.view.showIcon ? (trData.icon || treeOptions.view.icon || (trData[isParentKey] ? treeOptions.view.iconClose : treeOptions.view.iconLeaf) || '') : '',
'</div>', // 区分父子节点
treeOptionsView.showIcon ? '<div class="layui-inline layui-table-tree-nodeIcon' +
((trData.icon || treeOptionsView.icon) ? ' layui-table-tree-iconCustom' : '') +
(trData[isParentKey] ? '' : ' layui-table-tree-iconLeaf') +
'">' +
(trData.icon || treeOptionsView.icon ||
(trData[isParentKey] ?
(trData[LAY_EXPAND] ? treeOptionsView.iconOpen : treeOptionsView.iconClose) :
treeOptionsView.iconLeaf) ||
'') + '</div>' : '', // 区分父子节点
htmlTemp].join('')) // 图标要可定制
.find('.layui-table-tree-flexIcon');
@ -834,7 +892,7 @@ layui.define(['table'], function (exports) {
// 当前层的数据看看是否需要展开
sonSign !== false && layui.each(dataExpand, function (index, item) {
var trDefaultExpand = tableViewElem.find('tr[lay-data-index="' + index + '"]');
trDefaultExpand.find('.layui-table-tree-flexIcon').html(treeOptions.view.flexIconOpen);
trDefaultExpand.find('.layui-table-tree-flexIcon').html(treeOptionsView.flexIconOpen);
expandNode({trElem: trDefaultExpand.first()}, true);
});
@ -953,9 +1011,9 @@ layui.define(['table'], function (exports) {
if (!options.url) {
if (initSort.type) {
options.data = layui.sort(options.data, initSort.field, initSort.type === 'desc');
layui.sort(options.data, initSort.field, initSort.type === 'desc', true);
} else {
options.data = layui.sort(options.data, table.config.indexName);
layui.sort(options.data, table.config.indexName, null, true);
}
that.initData(options.data);
treeTable.reloadData(id);
@ -987,7 +1045,8 @@ layui.define(['table'], function (exports) {
var args = arguments;
$.extend(tableThat.getNodeDataByIndex(trIndex), args[0]);
var ret = updateFn.apply(updateThat, args); // 主要负责更新节点内容
obj.tr.find('td[data-field="' + obj.config.tree.customName.name + '"]').children('div.layui-table-cell').removeClass('layui-table-tree-item');
var nameKey = obj.config.tree.customName.name;
nameKey in args[0] && obj.tr.find('td[data-field="' + nameKey + '"]').children('div.layui-table-cell').removeClass('layui-table-tree-item');
tableThat.renderTreeTable(obj.tr, obj.tr.attr('data-level'), false);
return ret;
}
@ -1311,7 +1370,9 @@ layui.define(['table'], function (exports) {
if (tableView.hasClass(TABLE_TREE)) {
updateObjParams(obj);
if (obj.field === options.tree.customName.name) {
obj.update({}); // 通过update调用执行tr节点的更新
var updateData = {};
updateData[obj.field] = obj.value;
obj.update(updateData); // 通过update调用执行tr节点的更新
}
}
});