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

Merge branch 'main' into 2.x

pull/1740/head
贤心 2024-03-31 21:31:30 +08:00
parent 7472fecc14 aff8069ca5
commit 90e0cb3605
17 changed files with 915 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/dropdown/index.md
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>
@ -155,3 +156,25 @@ 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');
```

17
docs/form/checkbox.md
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>

91
docs/form/examples/checkbox.skin.md Normal file
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 Normal file
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 Normal file
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
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
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);`

60
docs/laydate/detail/options.md
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>

48
docs/laydate/examples/limit.md
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
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
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
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
View File

@ -60,6 +60,9 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
},
close: function () {
that.remove()
},
open: function () {
that.render()
}
}
};
@ -628,6 +631,15 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
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){
var that = thisModule.getThis(id);

42
src/modules/form.js
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);

293
src/modules/laydate.js
View File

@ -1,14 +1,14 @@
/** 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;
@ -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 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
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
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);
}
}