github
/
layui
mirror of https://github.com/layui/layui
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge branch 'main' into 2.x

pull/1740/head
贤心 8 months ago
parent
7472fecc14 aff8069ca5
commit
90e0cb3605
17 changed files with 915 additions and 60 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      docs/dropdown/index.md
  2. 19
      docs/form/checkbox.md
  3. 91
      docs/form/examples/checkbox.skin.md
  4. 191
      docs/form/examples/checkboxAndRadio.style.md
  5. 103
      docs/form/examples/radio.skin.md
  6. 2
      docs/form/index.md
  7. 14
      docs/form/radio.md
  8. 62
      docs/laydate/detail/options.md
  9. 48
      docs/laydate/examples/limit.md
  10. 24
      examples/dropdown.html
  11. 14
      src/css/layui.css
  12. 1
      src/css/modules/laydate.css
  13. 12
      src/modules/dropdown.js
  14. 42
      src/modules/form.js
  15. 301
      src/modules/laydate.js
  16. 2
      src/modules/table.js
  17. 26
      src/modules/treeTable.js

23
docs/dropdown/index.md
Unescape View File

@ -24,6 +24,7 @@ toc: true
| [dropdown.reload(id, options)](#reload) | 完整重载 |
| [dropdown.reloadData(id, options)](#reload) <sup>2.8+</sup> | 仅重载数据或内容 |
| [dropdown.close(id)](#close) | 关闭对应的组件面板 |
| [dropdown.open(id)](#open) <sup>2.9.8+</sup> | 打开对应的组件面板 |
<h3 id="render" lay-toc="{level: 2}">渲染</h3>
@ -154,4 +155,26 @@ dropdown.render({
});
// 关闭对应的组件面板
dropdown.close('test');
```
<h3 id="open" lay-pid="api" class="ws-anchor ws-bold">打开面板 <sup>2.9.8+</sup></h3>
`dropdown.open(id);`
- 参数 `id` : 组件渲染时定义的 `id` 属性值
该方法用于打开对应的 `dropdown` 组件面板。
```
var dropdown = layui.dropdown;
// 渲染
dropdown.render({
elem: '', // 绑定元素选择器
id: 'test', // 自定义 id
// 其他属性 …
});
// 打开对应的组件面板
dropdown.open('test');
```

19
docs/form/checkbox.md
Unescape View File

@ -39,7 +39,7 @@ layui.use(function(){
- 属性 `checked` 可设置默认选中
- 属性 `disabled` 可设置禁用状态
- 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制）
- 属性 `lay-skin` 可设置复选框风格，可选值：`tag`<sup>2.8+</sup>,`switch`，默认风格可不填
- 属性 `lay-skin` 可设置复选框风格，可选值：`tag`<sup>2.8+</sup>,`switch`，`none`(无样式)<sup>2.9.8+</sup> 默认风格可不填
特别地，当表单提交时，只有选中状态的复选框才能获取到 `value`，这点和浏览器原有的复选框机制相同。
@ -85,7 +85,7 @@ layui.use(function(){
在 `title` 属性中通过 `|` 分隔符可设置两种状态下的不同标题
<h2 id="title" lay-toc="{hot: true}">标题模板 <sup>2.8.3+</sup></h2>
<h2 id="title" lay-toc="{}">自定义标题模板 <sup>2.8.3+</sup></h2>
在 `checkbox` 元素后的相邻元素设置特定属性 `lay-checkbox`，可以与 `checkbox` 标题进行绑定。
@ -119,6 +119,19 @@ layui.use(function(){
</textarea>
</pre>
<h2 id="skin" lay-toc="{hot: true}">自定义任意风格 <sup>2.9.8+</sup></h2>
通过对 `checkbox` 元素设置 `lay-skin="none"` 属性禁用默认样式，从而实现任意风格的多选组件。<br>
**注：** 这意味着你需要掌握一定的 `CSS` 技能，以下示例中的样式均为外部自主实现，并非 Layui 内置。
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
{{- d.include("/form/examples/checkbox.skin.md") }}
</textarea>
</pre>
<h2 id="on" lay-toc="{hot: true}">复选框事件</h2>
@ -175,4 +188,4 @@ layui.use(function(){
});
</script>
</textarea>
</pre>
</pre>

91
docs/form/examples/checkbox.skin.md
Unescape View File

@ -0,0 +1,91 @@
<!--
以下示例仅用于演示 lay-skin="none" 用法，仅支持 webkit 系浏览器，任何样式或兼容性问题请自行解决
-->
<div class="layui-form" lay-filter="form-demo-skin">
{{- d.include("/form/examples/checkboxAndRadio.style.md") }}
<h3 class="ws-bold">自定义“卡片风格”的多选组件</h3>
<div class="layui-row layui-col-space8">
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
<input type="checkbox" name="browser[0]" value="chrome" lay-skin="none">
<div lay-checkbox class="lay-skin-checkcard lay-check-dot" style="height: 100px">
<div class="lay-skin-checkcard-avatar">
<i class="layui-icon layui-icon-chrome" style="font-size: 30px"></i>
</div>
<div class="lay-skin-checkcard-detail">
<div class="lay-skin-checkcard-header">Chrome</div>
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
由 Google 公司开发的网页浏览器，被大多数人所使用。
</div>
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
<input type="checkbox" name="browser[1]" value="edge" lay-skin="none" checked>
<div lay-checkbox class="lay-skin-checkcard lay-check-dot" style="height: 100px">
<div class="lay-skin-checkcard-avatar">
<i class="layui-icon layui-icon-edge" style="font-size: 30px"></i>
</div>
<div class="lay-skin-checkcard-detail">
<div class="lay-skin-checkcard-header">Edge</div>
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
由 Microsoft 开发的网页浏览器，基于 Chromeium 内核。
</div>
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
<input type="checkbox" name="browser[2]" value="firefox" lay-skin="none" disabled>
<div lay-checkbox class="lay-skin-checkcard lay-check-dot" style="height: 100px">
<div class="lay-skin-checkcard-avatar">
<i class="layui-icon layui-icon-firefox" style="font-size: 30px"></i>
</div>
<div class="lay-skin-checkcard-detail">
<div class="lay-skin-checkcard-header">Firefox</div>
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
由 Mozilla 开发的开放源代码的网页浏览器。
</div>
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
<input type="checkbox" name="browser[3]" value="ie" lay-skin="none" disabled checked>
<div lay-checkbox class="lay-skin-checkcard lay-check-dot" style="height: 100px">
<div class="lay-skin-checkcard-avatar">
<i class="layui-icon layui-icon-ie" style="font-size: 30px"></i>
</div>
<div class="lay-skin-checkcard-detail">
<div class="lay-skin-checkcard-header">Internet Explorer</div>
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
由 Microsoft 出品的网页浏览器，俗称 IE，已被微软放弃。
</div>
</div>
</div>
</div>
</div>
<h3 class="ws-bold">自定义“标签风格”的多选组件</h3>
<div>
<input type="checkbox" name="hobby[0]" value="唱" lay-skin="none" checked>
<div lay-checkbox class="lay-skin-tag layui-badge">唱</div>
<input type="checkbox" name="hobby[1]" value="跳" lay-skin="none" checked>
<div lay-checkbox class="lay-skin-tag layui-badge">跳</div>
<input type="checkbox" name="hobby[2]" value="rap" lay-skin="none">
<div lay-checkbox class="lay-skin-tag layui-badge">rap</div>
<input type="checkbox" name="hobby[3]" value="篮球" lay-skin="none">
<div lay-checkbox class="lay-skin-tag layui-badge">篮球</div>
</div>
<hr>
<p>更多风格可自主实现，为避免影响文档其他重要版面的阅读，此处不做过多演示。</p>
</div>
<!-- import layui -->
<script>
layui.use(function () {
var form = layui.form;
var $ = layui.$;
// …
});
</script>

191
docs/form/examples/checkboxAndRadio.style.md
Unescape View File

@ -0,0 +1,191 @@
<style>
/*
* 基于复选框和单选框的卡片风格多选组件
* 需要具备一些基础的 CSS 技能，以下样式均为外部自主实现。
*/
/* 主体 */
.layui-form-checkbox>.lay-skin-checkcard,
.layui-form-radio>.lay-skin-checkcard {
display: table;
display: flex;
padding: 12px;
white-space: normal;
border-radius: 10px;
border: 1px solid #e5e5e5;
color: #000;
background-color: #fff;
}
.layui-form-checkbox>.lay-skin-checkcard>*,
.layui-form-radio>.lay-skin-checkcard>* {
/* display: table-cell; */ /* IE */
vertical-align: top;
}
/* 悬停 */
.layui-form-checkbox:hover>.lay-skin-checkcard,
.layui-form-radio:hover>.lay-skin-checkcard {
border-color: #16b777;
}
/* 选中 */
.layui-form-checked>.lay-skin-checkcard,
.layui-form-radioed[lay-skin="none"]>.lay-skin-checkcard {
color: #000;
border-color: #16b777;
background-color: rgb(22 183 119 / 10%) !important;
/* box-shadow: 0 0 0 3px rgba(22, 183, 119, 0.08); */
}
/* 禁用 */
.layui-checkbox-disabled>.lay-skin-checkcard,
.layui-radio-disabled>.lay-skin-checkcard {
box-shadow: none;
border-color: #e5e5e5 !important;
background-color: #eee !important;
}
/* card 布局 */
.lay-skin-checkcard-avatar {
padding-right: 8px;
}
.lay-skin-checkcard-detail {
overflow: hidden;
width: 100%;
}
.lay-skin-checkcard-header {
font-weight: 500;
font-size: 16px;
white-space: nowrap;
margin-bottom: 4px;
}
.lay-skin-checkcard-description {
font-size: 13px;
color: #5f5f5f;
}
.layui-disabled .lay-skin-checkcard-description{
color: #c2c2c2! important;
}
/* 选中 dot */
.layui-form-checked>.lay-check-dot:after,
.layui-form-radioed>.lay-check-dot:after {
position: absolute;
content: "";
top: 2px;
right: 2px;
width: 0;
height: 0;
display: inline-block;
vertical-align: middle;
border-width: 10px;
border-style: dashed;
border-color: transparent;
border-top-left-radius: 0px;
border-top-right-radius: 6px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 6px;
border-top-color: #16b777;
border-top-style: solid;
border-right-color: #16b777;
border-right-style: solid;
overflow: hidden;
}
.layui-checkbox-disabled>.lay-check-dot:after,
.layui-radio-disabled>.lay-check-dot:after {
border-top-color: #d2d2d2;
border-right-color: #d2d2d2;
}
/* 选中 dot-2 */
.layui-form-checked>.lay-check-dot-2:before,
.layui-form-radioed>.lay-check-dot-2:before {
position: absolute;
font-family: "layui-icon";
content: "\e605";
color: #fff;
bottom: 4px;
right: 3px;
font-size: 9px;
z-index: 12;
}
.layui-form-checked>.lay-check-dot-2:after,
.layui-form-radioed>.lay-check-dot-2:after {
position: absolute;
content: "";
bottom: 2px;
right: 2px;
width: 0;
height: 0;
display: inline-block;
vertical-align: middle;
border-width: 10px;
border-style: dashed;
border-color: transparent;
border-top-left-radius: 6px;
border-top-right-radius: 0px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 0px;
border-right-color: #16b777;
border-right-style: solid;
border-bottom-color: #16b777;
border-bottom-style: solid;
overflow: hidden;
}
.layui-checkbox-disabled>.lay-check-dot-2:before,
.layui-radio-disabled>.lay-check-dot-2:before {
color: #eee !important;
}
.layui-checkbox-disabled>.lay-check-dot-2:after,
.layui-radio-disabled>.lay-check-dot-2:after {
border-bottom-color: #d2d2d2;
border-right-color: #d2d2d2;
}
.lay-ellipsis-multi-line {
overflow: hidden;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
</style>
<!-- 标签风格 -->
<style>
.layui-form-radio>.lay-skin-tag,
.layui-form-checkbox>.lay-skin-tag {
font-size: 13px;
border-radius: 100px;
}
.layui-form-checked>.lay-skin-tag,
.layui-form-radioed>.lay-skin-tag {
color: #fff !important;
background-color: #16b777 !important;
}
</style>
<!-- 单选框 Color Picker -->
<style>
/* 主体 */
.layui-form-radio>.lay-skin-color-picker {
border-radius: 50%;
border-width: 1px;
border-style: solid;
width: 20px;
height: 20px;
}
/* 选中 */
.layui-form-radioed>.lay-skin-color-picker {
box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px currentColor;
}
</style>

103
docs/form/examples/radio.skin.md
Unescape View File

@ -0,0 +1,103 @@
<!--
以下示例仅用于演示 lay-skin="none" 用法，仅支持 webkit 系浏览器，任何样式或兼容性问题请自行解决
-->
<div class="layui-form" lay-filter="form-demo-skin">
{{- d.include("/form/examples/checkboxAndRadio.style.md") }}
<h3 class="ws-bold">自定义“卡片风格”的单选组件</h3>
<div class="layui-row layui-col-space8">
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
<input type="radio" name="radio1" value="chrome" lay-skin="none">
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
<div class="lay-skin-checkcard-avatar">
<span class="layui-icon layui-icon-chrome" style="font-size: 30px"></span>
</div>
<div class="lay-skin-checkcard-detail">
<div class="lay-skin-checkcard-header">Chrome</div>
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
由 Google 公司开发的网页浏览器，被大多数人所使用。
</div>
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
<input type="radio" name="radio1" value="edge" lay-skin="none" checked>
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
<div class="lay-skin-checkcard-avatar">
<i class="layui-icon layui-icon-edge" style="font-size: 30px"></i>
</div>
<div class="lay-skin-checkcard-detail">
<div class="lay-skin-checkcard-header">Edge</div>
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
由 Microsoft 开发的网页浏览器，基于 Chromeium 内核。
</div>
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
<input type="radio" name="radio11" value="firefox" lay-skin="none" disabled>
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
<div class="lay-skin-checkcard-avatar">
<i class="layui-icon layui-icon-firefox" style="font-size: 30px"></i>
</div>
<div class="lay-skin-checkcard-detail">
<div class="lay-skin-checkcard-header">Firefox</div>
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
由 Mozilla 开发的开放源代码的网页浏览器。
</div>
</div>
</div>
</div>
<div class="layui-col-xs12 layui-col-sm6 layui-col-md3">
<input type="radio" name="radio11" value="ie" lay-skin="none" disabled checked>
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 100px">
<div class="lay-skin-checkcard-avatar">
<i class="layui-icon layui-icon-ie" style="font-size: 30px"></i>
</div>
<div class="lay-skin-checkcard-detail">
<div class="lay-skin-checkcard-header">Internet Explorer</div>
<div class="lay-skin-checkcard-description lay-ellipsis-multi-line">
由 Microsoft 出品的网页浏览器，俗称 IE，已被微软放弃。
</div>
</div>
</div>
</div>
</div>
<h3 class="ws-bold">自定义“标签风格”的单选组件</h3>
<div>
<input type="checkbox" name="hobby[0]" value="唱" lay-skin="none" checked>
<div lay-checkbox class="lay-skin-tag layui-badge">唱</div>
<input type="checkbox" name="hobby[1]" value="跳" lay-skin="none" checked>
<div lay-checkbox class="lay-skin-tag layui-badge">跳</div>
<input type="checkbox" name="hobby[2]" value="rap" lay-skin="none">
<div lay-checkbox class="lay-skin-tag layui-badge">rap</div>
<input type="checkbox" name="hobby[3]" value="篮球" lay-skin="none">
<div lay-checkbox class="lay-skin-tag layui-badge">篮球</div>
</div>
<h3 class="ws-bold">自定义“颜色选择”的单选组件</h3>
<div>
<input type="radio" name="color" value="red" lay-skin="none">
<div lay-radio class="lay-skin-color-picker" style="color: red; background-color: red"></div>
<input type="radio" name="color" value="#16b777" lay-skin="none">
<div lay-radio class="lay-skin-color-picker" style="color: #16b777; background-color: #16b777"></div>
<input type="radio" name="color" value="blueviolet" lay-skin="none">
<div lay-radio class="lay-skin-color-picker" style="color: blueviolet; background-color: blueviolet"></div>
<input type="radio" name="color" value="#16baaa" lay-skin="none">
<div lay-radio class="lay-skin-color-picker" style="color: #16baaa; background-color: #16baaa"></div>
</div>
<hr>
<p>更多风格可自主实现，为避免影响文档其他重要版面的阅读，此处不做过多演示。</p>
</div>
<!-- import layui -->
<script>
layui.use(function () {
var form = layui.form;
var $ = layui.$;
// …
});
</script>

2
docs/form/index.md
Unescape View File

@ -115,7 +115,7 @@ form 还可以借助*栅格*实现更灵活的响应式布局。
| lay-vertype | `tips`吸附层<br>`alert` 对话框<br>`msg` 默认 | 设置验证异常时的提示层模式 |
| lay-reqtext | 自定义 | 设置*必填项*（`lay-verify="required"`）的默认提示文本 |
| lay-affix | [#详见](input.html#affix) | 输入框动态点缀，`<input type="text">`元素 **私有属性** |
| lay-skin | [#详见](checkbox.html#default) | 设置 UI 风格。 `<input type="checkbox">` 元素 **私有属性** |
| lay-skin | [#详见](checkbox.html#default) | 设置 UI 风格。 `<input type="checkbox">`，`<input type="radio">` 元素 **私有属性** |
| lay-search | 默认不区分大小写;<br>设置`cs`区分大小写 | 给 `select` 组件开启搜索功能。`<select>` 元素 **私有属性** |
| lay-creatable <sup>2.9.7+</sup> | 无需值 | 是否允许创建新条目，需要配合 `lay-search` 使用。`<select>` 元素 **私有属性** |
| lay-submit | 无需值 | 设置元素（一般为`<button>` 标签）触发 `submit` 提交事件 |

14
docs/form/radio.md
Unescape View File

@ -27,6 +27,7 @@ toc: true
- 属性 `checked` 可设置默认选中
- 属性 `disabled` 可设置禁用状态
- 属性 `value` 可设置值，否则选中时返回的默认值为 `on`（浏览器默认机制）。同组单选框一般设置相同值。
- 属性 `lay-skin` 可设置单选框风格，可选值：`none`(无样式)<sup>2.9.8+</sup> 默认风格可不填
<h2 id="title" lay-toc="{}">自定义标题模板</h2>
@ -51,6 +52,19 @@ toc: true
</textarea>
</pre>
<h2 id="skin" lay-toc="{hot: true}">自定义任意风格 <sup>2.9.8+</sup></h2>
通过对 `radio` 元素设置 `lay-skin="none"` 属性禁用默认样式，从而实现任意风格的单选组件。<br>
**注：** 这意味着你需要掌握一定的 `CSS` 技能，以下示例中的样式均为外部自主实现，并非 Layui 内置。
<pre class="layui-code" lay-options="{preview: true, codeStyle: 'height: 508px;', layout: ['preview', 'code'], tools: ['full'], done: function(obj){
obj.render();
}}">
<textarea>
{{- d.include("/form/examples/radio.skin.md") }}
</textarea>
</pre>
<h2 id="on" lay-toc="{hot: true}">单选框事件</h2>
`form.on('radio(filter)', callback);`

62
docs/laydate/detail/options.md
Unescape View File

@ -325,6 +325,66 @@ max: 7 // 最大日期为 7 天后
</td>
</tr>
<tr>
<td>disabledDate <sup>2.9.8+</sup> </td>
<td>
用于设置不可选取的日期。示例：
```js
disabledDate: function(date, type){
// date - 当前的日期对象
// type - 面板类型，'start'/'end'
// 返回值为 true 的日期会被禁用
return date.getTime() < new Date(2024, 1).getTime(); // 2024-02-01
}
```
</td>
<td>function</td>
<td> - </td>
</tr>
<tr>
<td>disabledTime <sup>2.9.8+</sup> </td>
<td>
用于设置不可选取的时间。示例：
```js
disabledTime: function(date, type){
// date - 当前的日期对象
// type - 面板类型，'start'/'end'
// 数组中指定的时间会被禁用
return {
hours: function(){
return range(0, 10);
},
minutes:function(hour){
return hour > 5 ? range(0, 20) : [];
},
seconds:function(hour, minute){
return range(0, 2);
}
};
}
function range(start, end) {
var result = [];
for (var i = start; i < end; i++) {
result.push(i);
}
return result;
}
```
</td>
<td>function</td>
<td> - </td>
</tr>
<tr>
<td>trigger</td>
<td>
@ -704,4 +764,4 @@ done: function(value, date, endDate){
</td>
</tr>
</tbody>
</table>
</table>

48
docs/laydate/examples/limit.md
Unescape View File

@ -21,6 +21,18 @@
这里以控制在 9:30-17:30 为例
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">禁用日期</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="ID-laydate-limit-4" placeholder="仅过去的时间可选">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">禁用指定时间</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="ID-laydate-limit-5" placeholder="时间范围禁用">
</div>
</div>
</div>
</div>
@ -54,5 +66,41 @@ layui.use(function(){
max: '17:30:00',
btns: ['clear', 'confirm']
});
// 禁用日期
laydate.render({
elem: '#ID-laydate-limit-4',
disabledDate: function(date, type){
return date.getTime() > Date.now();
}
});
// 禁用指定时间
laydate.render({
elem: '#ID-laydate-limit-5',
type: 'time',
range: true,
disabledTime: function(date, type){
return {
hours: function(){
return range(0, 10);
},
minutes:function(hour){
return hour > 5 ? range(0, 20) : [];
},
seconds:function(hour, minute){
return range(0, 2);
}
};
}
});
function range(start, end) {
var result = [];
for (var i = start; i < end; i++) {
result.push(i);
}
return result;
}
});
</script>

24
examples/dropdown.html
Unescape View File

@ -29,6 +29,12 @@
<a href="javascript:;" id="demo3">文字下拉 <i class="layui-icon layui-icon-down"></i></a>
</div>
<div class="layui-btn-container">
<a href="javascript:;" id="testopen">testopen <i class="layui-icon layui-icon-down"></i></a>
<button class="layui-btn" lay-on="open">open</button>
<button class="layui-btn" lay-on="close">close</button>
</div>
<div class="layui-bg-gray" style="margin-top: 30px; width: 100%; height: 300px; text-align: center;" id="demo20">
<span class="layui-font-gray" style="position: relative; top:50%;">鼠标右键菜单</span>
</div>
@ -39,6 +45,7 @@
<script>
layui.use('dropdown', function () {
var dropdown = layui.dropdown;
var util = layui.util;
dropdown.render({
elem: '#demo1',
@ -309,6 +316,23 @@ layui.use('dropdown', function () {
}
});
dropdown.render({
elem: '#testopen',
id: 'testopen',
trigger: "manual",
data: [{ id: "refresh", title: "刷新"}]
});
util.on({
open: function(){
dropdown.open('testopen')
},
close: function(){
dropdown.close('testopen')
}
},
{trigger: 'mouseenter'});
return;
dropdown.render({

14
src/css/layui.css
Unescape View File

@ -589,7 +589,7 @@ a cite{font-style: normal; *cursor:pointer;}
.layui-panel-window{position: relative; padding: 15px; border-radius: 0; border-top: 5px solid #eee; background-color: #fff;}
/* 其它辅助 */
.layui-auxiliar-moving{position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: none; z-index: 9999999999;}
.layui-auxiliar-moving{position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background: none; z-index: 9999999999; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;}
.layui-scrollbar-hide{overflow: hidden !important;}
@ -904,6 +904,18 @@ hr.layui-border-black{border-width: 0 0 1px;}
.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-form-checkbox[lay-skin="none"] *,
.layui-form-radio[lay-skin="none"] *{box-sizing: border-box;}
.layui-form-checkbox[lay-skin="none"],
.layui-form-radio[lay-skin="none"] {position: relative; min-height: 20px; margin: 0; padding: 0; height: auto; line-height: normal;}
.layui-form-checkbox[lay-skin="none"]>div,
.layui-form-radio[lay-skin="none"]>div{position: relative; top: 0; left: 0; cursor: pointer; z-index: 10; color: inherit; background-color: inherit;}
.layui-form-checkbox[lay-skin="none"]>i,
.layui-form-radio[lay-skin="none"]>i{display: none;}
.layui-form-checkbox[lay-skin="none"].layui-checkbox-disabled>div,
.layui-form-radio[lay-skin="none"].layui-radio-disabled>div{cursor: not-allowed;}
.layui-checkbox-disabled{border-color: #eee !important;}
.layui-checkbox-disabled > div{color: #c2c2c2!important;}
.layui-checkbox-disabled > i{border-color: #eee !important;}

1
src/css/modules/laydate.css
Unescape View File

@ -139,6 +139,7 @@ html #layuicss-laydate{display: none; position: absolute; width: 1989px;}
.layui-laydate .layui-this,.layui-laydate .layui-this>div{background-color: #16baaa !important; color: #fff !important;}
.layui-laydate .laydate-disabled,
.layui-laydate .laydate-disabled:hover{background:none !important; color: #d2d2d2 !important; cursor: not-allowed !important; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}
.layui-laydate .layui-this.laydate-disabled,.layui-laydate .layui-this.laydate-disabled>div{background-color: #eee !important}
.layui-laydate-content td>div{padding: 7px 0;height: 100%;}
/* 墨绿/自定义背景色主题 */

12
src/modules/dropdown.js
Unescape View File

@ -60,6 +60,9 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
},
close: function () {
that.remove()
},
open: function () {
that.render()
}
}
};
@ -627,6 +630,15 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
that.remove();
return thisModule.call(that);
};
// 打开面板
dropdown.open = function(id){
var that = thisModule.getThis(id);
if(!that) return this;
that.render();
return thisModule.call(that);
}
// 重载实例
dropdown.reload = function(id, options, type){

42
src/modules/form.js
Unescape View File

@ -871,9 +871,19 @@ layui.define(['lay', 'layer', 'util'], function(exports){
hasRender[0] && hasRender.remove(); // 若已经渲染，则 Rerender
// 若存在标题模板，则优先读取标题模板
var titleTplAttrs = [];
if(othis.next('[lay-checkbox]')[0]){
title = othis.next().html() || '';
var titleTplElem = othis.next();
title = titleTplElem.html() || '';
if(titleTplElem[0].attributes.length > 1){
layui.each(titleTplElem[0].attributes, function(i, attr){
if(attr.name !== 'lay-checkbox'){
titleTplAttrs.push(attr.name + '="' + attr.value + '"')
}
})
}
}
titleTplAttrs = titleTplAttrs.join(' ');
// 若为开关，则对 title 进行分隔解析
title = skin === 'switch' ? title.split('|') : [title];
@ -891,7 +901,7 @@ layui.define(['lay', 'layer', 'util'], function(exports){
var type = {
// 复选框
"checkbox": [
(title[0] ? ('<div>'+ title[0] +'</div>') : (skin === 'primary' ? '' : '<div></div>')),
(title[0] ? ('<div ' + titleTplAttrs +'>'+ 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(''),
// 开关
@ -947,22 +957,34 @@ layui.define(['lay', 'layer', 'util'], function(exports){
radios.each(function(index, radio){
var othis = $(this), hasRender = othis.next('.' + CLASS);
var disabled = this.disabled;
var skin = othis.attr('lay-skin');
if(typeof othis.attr('lay-ignore') === 'string') return othis.show();
hasRender[0] && hasRender.remove(); // 如果已经渲染，则Rerender
var title = util.escape(radio.title || '');
var titleTplAttrs = [];
if(othis.next('[lay-radio]')[0]){
var titleTplElem = othis.next();
title = titleTplElem.html() || '';
if(titleTplElem[0].attributes.length > 1){
layui.each(titleTplElem[0].attributes, function(i, attr){
if(attr.name !== 'lay-radio'){
titleTplAttrs.push(attr.name + '="' + attr.value + '"')
}
})
}
}
titleTplAttrs = titleTplAttrs.join(' ');
// 替代元素
var reElem = $(['<div class="layui-unselect '+ CLASS,
(radio.checked ? (' '+ CLASS +'ed') : ''), // 选中状态
(disabled ? ' layui-radio-disabled '+DISABLED : '') +'">', // 禁用状态
(disabled ? ' layui-radio-disabled '+DISABLED : '') +'"', // 禁用状态
(skin ? ' lay-skin="'+ skin +'"' : ''),
'>',
'<i class="layui-anim layui-icon '+ ICON[radio.checked ? 0 : 1] +'"></i>',
'<div>'+ function(){
var title = util.escape(radio.title || '');
if(othis.next('[lay-radio]')[0]){
title = othis.next().html();
}
return title;
}() +'</div>',
'<div ' + titleTplAttrs +'>'+ title +'</div>',
'</div>'].join(''));
othis.after(reElem);

301
src/modules/laydate.js
Unescape View File

@ -1,19 +1,19 @@
/** laydate 日期与时间控件 | MIT Licensed */
/** laydate 日期与时间控件 | MIT Licensed */
// @ts-expect-error
;!function(window, document){ // gulp build: laydate-header
"use strict";
var isLayui = window.layui && layui.define, ready = {
getPath: (window.lay && lay.getPath) ? lay.getPath : ''
var isLayui = window.layui && layui.define;
var ready = {
getPath: window.lay && lay.getPath ? lay.getPath : '',
// 载入 CSS 依赖
,link: function(href, fn, cssname){
link: function (href, fn, cssname) {
// 未设置路径，则不主动加载 css
if(!laydate.path) return;
if (!laydate.path) return;
// 加载 css
if(window.lay && lay.layui){
if (window.lay && lay.layui) {
lay.layui.link(laydate.path + href, fn, cssname);
}
}
@ -24,34 +24,34 @@
// 模块名
var MOD_NAME = 'laydate';
var MOD_ID = 'layui-'+ MOD_NAME +'-id' // 已渲染过的索引标记名
var MOD_ID = 'layui-' + MOD_NAME + '-id'; // 已渲染过的索引标记名
// 外部调用
var laydate = {
v: '5.5.0' // layDate 版本号
,config: {
weekStart: 0, // 默认周日一周的开始
} // 全局配置项
,index: (window.laydate && window.laydate.v) ? 100000 : 0
,path: GLOBAL.laydate_dir || ready.getPath
v: '5.6.0', // layDate 版本号
config: {
weekStart: 0 // 默认周日一周的开始
}, // 全局配置项
index: window.laydate && window.laydate.v ? 100000 : 0,
path: GLOBAL.laydate_dir || ready.getPath,
// 设置全局项
,set: function(options){
set: function (options) {
var that = this;
that.config = lay.extend({}, that.config, options);
return that;
}
},
// 主体 CSS 等待事件
,ready: function(callback){
ready: function (callback) {
var cssname = 'laydate';
var ver = ''
var path = (isLayui ? 'modules/' : '') + 'laydate.css?v='+ laydate.v + ver;
var ver = '';
var path = (isLayui ? 'modules/' : '') + 'laydate.css?v=' + laydate.v + ver;
isLayui ? (
layui['layui.all']
? (typeof callback === 'function' && callback())
: layui.addcss(path, callback, cssname)
layui['layui.all'] ?
(typeof callback === 'function' && callback()) :
layui.addcss(path, callback, cssname)
) : ready.link(path, callback, cssname);
return this;
@ -1074,9 +1074,23 @@
if(layui.type(options.holidays) !== 'array') return that;
var isEquals = function(ymdStr1, ymdStr2){
var ymd1 = ymdStr1.split('-');
var ymd2 = ymdStr2.split('-');
lay.each(ymd1, function(i,v){
ymd1[i] = parseInt(v, 10);
})
lay.each(ymd2, function(i,v){
ymd2[i] = parseInt(v, 10);
})
return ymd1.join('-') === ymd2.join('-');
}
lay.each(options.holidays, function(idx, item) {
lay.each(item, function(i, dayStr) {
if(dayStr === td.attr('lay-ymd')){
if(isEquals(dayStr, td.attr('lay-ymd'))){
td.find('div').html('<span class="laydate-day-holidays"' + (
type[idx] ? ('type="'+ type[idx] +'"') : ''
) + '>' + YMD[2] + '</span>');
@ -1087,7 +1101,184 @@
return that;
};
// 无效日期范围的标记
/**
* 给定年份的开始日期
* @param {Date} date
*/
Class.prototype.startOfYear = function(date){
var newDate = new Date(date);
newDate.setFullYear(newDate.getFullYear(), 0, 1);
newDate.setHours(0, 0, 0, 0);
return newDate;
}
/**
* 给定年份的结束日期
* @param {Date} date
*/
Class.prototype.endOfYear = function(date){
var newDate = new Date(date);
var year = newDate.getFullYear();
newDate.setFullYear(year + 1, 0, 0);
newDate.setHours(23, 59, 59, 999);
return newDate;
}
/**
* 给定月份的开始日期
* @param {Date} date
*/
Class.prototype.startOfMonth = function(date){
var newDate = new Date(date);
newDate.setDate(1);
newDate.setHours(0, 0, 0, 0);
return newDate;
}
/**
* 给定月份的结束日期
* @param {Date} date
*/
Class.prototype.endOfMonth = function(date){
var newDate = new Date(date);
var month = newDate.getMonth();
newDate.setFullYear(newDate.getFullYear(), month + 1, 0);
newDate.setHours(23, 59, 59, 999);
return newDate;
}
/**
* 将指定的天数添加到给定日期
* @param {Date} date 要更改的日期
* @param {number} amount 天数
*/
Class.prototype.addDays = function(date, amount){
var newDate = new Date(date);
if(!amount) return newDate;
newDate.setDate(newDate.getDate() + amount);
return newDate;
}
/**
* 不可选取的年或月。年或月中的所有日期都禁用时，才判定为不可选取。
* @param {Date} date 要检测的年或月
* @param {'year' | 'month'} type 面板类型
* @param {'start' | 'end'} position 面板位置
*/
Class.prototype.isDisabledYearOrMonth = function(date, type, position){
var that = this;
var options = that.config;
var millisecondsInDay = 24 * 60 * 60 * 1000;
var startDay = type === 'year' ? that.startOfYear(date) : that.startOfMonth(date);
var endDay = type === 'year' ? that.endOfYear(date) : that.endOfMonth(date);
var numOfDays = Math.floor((endDay.getTime() - startDay.getTime()) / millisecondsInDay) + 1;
var disabledCount = 0;
for(var i = 0; i < numOfDays; i++){
var day = that.addDays(startDay, i);
if(options.disabledDate.call(options, day, position)){
disabledCount++;
}
}
return disabledCount === numOfDays;
}
/**
* @typedef limitOptions
* @prop {JQuery} [elem] - 检测的元素, 例如面板中年月日时分秒元素，“现在”，“确认” 按钮等
* @prop {number} [index] - 元素集合中，当前检测元素的索引，years:0,month:0,date:0-41,hms:0
* @prop {['hours', 'minutes', 'seconds'] | ['hours', 'minutes'] | ['hours']} [time] - 是否比较时分秒
* @prop {'year'|'month'|string} [type] - 面板类型?
* @prop {0 | 1} [rangeType] - 面板索引, 0 表示 start, 1 表示 end
* @prop {Partial<{year:number,month: number,date:number,hours:number,minutes:number,seconds:number}>} [date] - 检测的日期时间对象
* @prop {'date' | 'time' | 'datetime'} disabledType - 禁用类型，按钮应使用 datetime
*/
/**
* 不可选取的日期
* @param {number} date 当前检测的日期的时间戳
* @param {limitOptions} opts
* @returns {boolean}
*/
Class.prototype.isDisabledDate = function(date, opts){
opts = opts || {};
var that = this;
var options = that.config;
var position = options.range ? (opts.rangeType === 0 ? 'start' : 'end') : 'start';
if(!options.disabledDate) return false;
if(options.type === 'time') return false;
if(!(opts.disabledType === 'date' || opts.disabledType === 'datetime')) return false;
// 不需要时分秒
var normalizedDate = new Date(date);
normalizedDate.setHours(0, 0, 0, 0);
return opts.type === 'year' || opts.type === 'month'
? that.isDisabledYearOrMonth(normalizedDate, opts.type, position)
: options.disabledDate.call(options, normalizedDate, position);
}
/**
* 不可选取的时间
* @param {number} date 当前检测的日期的时间戳
* @param {limitOptions} opts
* @returns {boolean}
*/
Class.prototype.isDisabledTime = function(date, opts){
opts = opts || {};
var that = this;
var options = that.config;
var position = options.range ? (opts.rangeType === 0 ? 'start' : 'end') : 'start';
if(!options.disabledTime) return false;
if(!(options.type === "time" || options.type === "datetime")) return false;
if(!(opts.disabledType === 'time' || opts.disabledType === 'datetime')) return false;
var isDisabledItem = function(compareVal, rangeFn, rangeFnParam){
return function(){
return (typeof rangeFn === 'function' && rangeFn.apply(options, rangeFnParam) || []).indexOf(compareVal) !== -1;
}
}
var dateObj = that.systemDate(new Date(date));
var disabledTime = options.disabledTime.call(options, that.newDate(dateObj), position) || {};
// 面板中的时分秒 HTML 元素需要分别检测是否禁用
// 按钮检测任意一项是否禁用即可
return opts.disabledType === 'datetime'
? isDisabledItem(dateObj.hours, disabledTime.hours)()
|| isDisabledItem(dateObj.minutes, disabledTime.minutes, [dateObj.hours])()
|| isDisabledItem(dateObj.seconds, disabledTime.seconds, [dateObj.hours, dateObj.minutes])()
: [isDisabledItem(dateObj.hours, disabledTime.hours),
isDisabledItem(dateObj.minutes, disabledTime.minutes, [dateObj.hours]),
isDisabledItem(dateObj.seconds, disabledTime.seconds, [dateObj.hours, dateObj.minutes])][opts.time.length - 1]();
}
/**
* 不可选取的日期时间
* @param {number} timestamp 当前检测的日期的时间戳
* @param {limitOptions} opts
* @returns
*/
Class.prototype.isDisabledDateTime = function(timestamp, opts){
opts = opts || {};
var that = this;
var options = that.config;
return that.isDisabledDate(timestamp, opts) || that.isDisabledTime(timestamp, opts);
}
/**
* 无效日期范围的标记
* @param {limitOptions} opts
*
*/
Class.prototype.limit = function(opts){
opts = opts || {};
@ -1115,7 +1306,7 @@
}())).getTime(); //time：是否比较时分秒
});
isOut = timestamp.now < timestamp.min || timestamp.now > timestamp.max;
isOut = timestamp.now < timestamp.min || timestamp.now > timestamp.max || that.isDisabledDateTime(timestamp.now, opts);
opts.elem && opts.elem[isOut ? 'addClass' : 'removeClass'](DISABLED);
return isOut;
@ -1185,7 +1376,9 @@
month: YMD[1] - 1,
date: YMD[2]
},
index: index_
index: index_,
rangeType: index,
disabledType: 'date' // 日面板，检测当前日期是否禁用
});
});
@ -1246,13 +1439,15 @@
elem: lay(that.footer).find(ELEM_NOW),
date: that.systemDate(/^(datetime|time)$/.test(options.type) ? new Date() : null),
index: 0,
time: timeParams
time: timeParams,
disabledType: 'datetime' // 按钮，检测日期和时间
});
// 确认按钮
that.limit({
elem: lay(that.footer).find(ELEM_CONFIRM),
index: 0,
time: timeParams
time: timeParams,
disabledType: 'datetime' // 按钮，检测日期和时间
});
}
@ -1328,7 +1523,9 @@
elem: lay(li),
date: ymd,
index: index,
type: type
type: type,
rangeType: index,
disabledType: 'date' // 年面板，检测当前年份中的所有日期是否禁用
});
yearNum++;
});
@ -1365,7 +1562,9 @@
elem: lay(li),
date: ymd,
index: index,
type: type
type: type,
rangeType: index,
disabledType: 'date' // 月面板，检测当前月份中的所有日期是否禁用
});
});
@ -1392,6 +1591,8 @@
,seconds: ii
}][i],
index: index,
rangeType: index,
disabledType: 'time', // 时间面板，分别检测时分秒列表是否禁用
time: [
['hours'],
['hours', 'minutes'],
@ -1405,7 +1606,8 @@
elem: lay(that.footer).find(ELEM_CONFIRM),
date: that[startEnd],
index: 0,
time: ['hours', 'minutes', 'seconds']
time: ['hours', 'minutes', 'seconds'],
disabledType: 'datetime' // 确认按钮，检测时分秒列表任意一项是否禁用
});
}
};
@ -1587,17 +1789,25 @@
var that = this
,options = that.config
,lang = that.lang()
,isOut, elemBtn = lay(that.footer).find(ELEM_CONFIRM);
if(options.range && options.type !== 'time'){
,isOut
,elemBtn = lay(that.footer).find(ELEM_CONFIRM)
,timeParams = options.type === 'datetime' || options.type === 'time' ? ['hours', 'minutes', 'seconds'] : undefined;
if(options.range){
start = start || (that.rangeLinked ? that.startDate : options.dateTime);
end = end || that.endDate;
isOut = !that.endState || that.newDate(start).getTime() > that.newDate(end).getTime();
//如果不在有效日期内，直接禁用按钮，否则比较开始和结束日期
(that.limit({
date: start
date: start,
disabledType: 'datetime', // 按钮，检测日期和时间
time: timeParams,
rangeType: 0
}) || that.limit({
date: end
date: end,
disabledType: 'datetime', // 按钮，检测日期和时间
time: timeParams,
rangeType: 1
}))
? elemBtn.addClass(DISABLED)
: elemBtn[isOut ? 'addClass' : 'removeClass'](DISABLED);
@ -1871,7 +2081,8 @@
that.startDate = lay.extend({}, dateTime); // 同步startDate
}
// 校验另外一个日期是否在有效的范围内
if (that.endState && !that.limit({date: that.thisDateTime(1 - index)})) {
// 此处为范围选择的日期面板点击选中处理，所以 disabledType 为 date
if (that.endState && !that.limit({date: that.rangeLinked ? that.startDate : that.thisDateTime(1 - index), disabledType:'date'})) {
// 根据选择之后判断是否需要切换模式
var isChange;
if (that.endState && that.autoCalendarModel.auto) {
@ -1981,9 +2192,15 @@
//确定
,confirm: function(){
if(options.range){
if(lay(btn).hasClass(DISABLED)) return that.hint(
options.type === 'time' ? lang.timeout.replace(/日期/g, '时间') : lang.timeout
);
if(lay(btn).hasClass(DISABLED)){
var isTimeout = options.type === 'time'
? that.startTime && that.endTime && that.newDate(that.startTime) > that.newDate(that.endTime)
: that.startDate && that.endDate && that.newDate(lay.extend({},that.startDate, that.startTime || {})) > that.newDate(lay.extend({},that.endDate, that.endTime || {}));
return isTimeout
? that.hint(options.type === 'time' ? lang.timeout.replace(/日期/g, '时间') : lang.timeout)
: that.hint(lang.invalidDate);
}
} else {
if(lay(btn).hasClass(DISABLED)) return that.hint(lang.invalidDate);
}
@ -2029,7 +2246,8 @@
elem: lay(that.footer).find(ELEM_CONFIRM),
date: {
year: listYM[0]
}
},
disabledType: 'datetime' // 按钮，检测日期和时间
});
}
@ -2358,4 +2576,3 @@
);
}(window, window.document);

2
src/modules/table.js
Unescape View File

@ -2544,7 +2544,7 @@ layui.define(['lay', 'laytpl', 'laypage', 'form', 'util'], function(exports){
if(hide){
othis.find('.layui-table-grid-down').remove();
} else if((
elemCell.prop('scrollWidth') > elemCell.outerWidth() ||
elemCell.prop('scrollWidth') > elemCell.prop('clientWidth') ||
elemCell.find("br").length > 0
) && !options.lineStyle){
if(elemCell.find('.'+ ELEM_GRID_DOWN)[0]) return;

26
src/modules/treeTable.js
Unescape View File

@ -1152,8 +1152,32 @@ layui.define(['table'], function (exports) {
if(!that) return;
var options = that.getOptions();
var treeOptions = options.tree;
var tableData = treeTable.getData(id);
var customName = treeOptions.customName;
var childrenKey = customName.children;
// 只和同级节点排序
var sort = function(data, field, type){
layui.sort(data, field, type, true);
layui.each(data, function(rowIndex, trData){
sort(trData[childrenKey] || [], field, type);
})
}
if (options.autoSort) {
that.initData();
var initSort = options.initSort;
if (initSort.type) {
sort(tableData, initSort.field, initSort.type === 'desc');
} else {
// 恢复默认
sort(tableData, table.config.indexName, null);
}
// 更新缓存中数据的顺序
table.cache[id] = tableData;
// 重新初始化缓存数据
that.initData(tableData);
treeTable.renderData(id);
}
}

Write Preview
Loading…
Cancel
Save