mirror of https://github.com/layui/layui
Merge branch 'main' of https://github.com/layui/layui into refactor/i18n
sight
commit
6fcdc0bcdf
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -57,8 +57,8 @@ toc: true
|
|||
<div class="layui-collapse">
|
||||
<div class="layui-colla-item">
|
||||
<div class="layui-colla-title">Collapse Title 1</div>
|
||||
<div class="layui-colla-content">
|
||||
<p>Content 1</p>
|
||||
<div class="layui-colla-content layui-show">
|
||||
<p>Content 1 （添加 layui-show 类设置初始展开）</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
|
|
|
|||
|
|
@ -38,6 +38,16 @@
|
|||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-shuffle" lay-toc="{level: 2}">打乱标签顺序</h3>
|
||||
|
||||
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], codeStyle: 'max-height: 520px;', tools: ['full'], done: function(obj){
|
||||
obj.render();
|
||||
}}">
|
||||
<textarea>
|
||||
{{- d.include("/tabs/examples/shuffle.md") }}
|
||||
</textarea>
|
||||
</pre>
|
||||
|
||||
<h3 id="demo-hash" lay-toc="{level: 2, title: 'HASH 匹配'}">通过 HASH 匹配选中标签</h3>
|
||||
|
||||
切换 tabs 标签项后，地址栏同步 `hash` 值，当页面刷新时，tabs 仍保持对应的切换状态。
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<div class="layui-tabs" lay-options="{closable: true}">
|
||||
<ul class="layui-tabs-header">
|
||||
<li lay-id="fff">Tab6</li>
|
||||
<li lay-id="eee">Tab5</li>
|
||||
<li lay-id="ccc">Tab3</li>
|
||||
<li lay-id="bbb">Tab2</li>
|
||||
<li lay-id="aaa">Tab1</li>
|
||||
<li lay-id="ddd">Tab4</li>
|
||||
</ul>
|
||||
<div class="layui-tabs-body">
|
||||
<div class="layui-tabs-item" lay-id="aaa">Tab Content-1</div>
|
||||
<div class="layui-tabs-item" lay-id="bbb">Tab Content-2</div>
|
||||
<div class="layui-tabs-item" lay-id="ccc">Tab Content-3</div>
|
||||
<div class="layui-tabs-item" lay-id="ddd">Tab Content-4</div>
|
||||
<div class="layui-tabs-item" lay-id="eee">Tab Content-5</div>
|
||||
<div class="layui-tabs-item" lay-id="fff">Tab Content-6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
🔔 提示：即 tabs 能通过 `lay-id` 匹配对应的标签头和标签内容。
|
||||
|
||||
<!-- import layui -->
|
||||
|
|
@ -136,7 +136,7 @@ tabs.add('test', {
|
|||
`tabs.close(id, index, force)`
|
||||
|
||||
- 参数 `id` : 组件的实例 ID
|
||||
- 参数 `index` : 标签索引或标签的 `lay-id` 属性值
|
||||
- 参数 `index` : 若传入 number 类型，则为标签索引；若传入 string 类型，则为标签的 `lay-id` 属性值
|
||||
- 参数 `force` : 是否强制关闭。若设置 `true` 将忽略 `beforeClose` 事件行为。默认 `false`
|
||||
|
||||
该方法用于关闭指定的标签项。
|
||||
|
|
@ -156,19 +156,23 @@ tabs.close('test', 'abc'); // 关闭 lay-id="abc" 的标签
|
|||
|
||||
| mode | 描述 |
|
||||
| --- | --- |
|
||||
| other | 关闭除当前标签外的所有标签 |
|
||||
| right | 关闭当前标签及右侧标签 |
|
||||
| other | 关闭除当前标签外的其他标签 |
|
||||
| right | 关闭当前标签的右侧所有标签 |
|
||||
| all | 关闭所有标签 |
|
||||
|
||||
- 参数 `index` : 活动标签的索引或 `lay-id` 属性值，默认取当前选中标签的索引。一般用于标签右键事件。
|
||||
|
||||
该方法用于批量关闭标签。
|
||||
该方法用于批量关闭标签，若标签项已设置不允许关闭（`lay-closable="false"`），则操作将被忽略。
|
||||
|
||||
```js
|
||||
tabs.closeMult(id, 'other'); // 关闭除当前标签外的所有标签
|
||||
tabs.closeMult(id, 'other', 3); // 关闭除索引为 3 的标签外的所有标签
|
||||
tabs.closeMult(id, 'right'); // 关闭当前标签及右侧标签
|
||||
tabs.closeMult(id, 'other'); // 关闭除当前活动标签外的其他标签
|
||||
tabs.closeMult(id, 'other', 3); // 关闭除索引为 3 的标签外的其他标签
|
||||
tabs.closeMult(id, 'other', 'ccc'); // 关闭除 lay-id="ccc" 的标签外的其他标签
|
||||
|
||||
tabs.closeMult(id, 'right'); // 关闭当前活动标签的右侧所有标签
|
||||
tabs.closeMult(id, 'right', 3); // 关闭索引为 3 的标签的右侧所有标签
|
||||
tabs.closeMult(id, 'right', 'ccc'); // 关闭 lay-id="ccc" 的标签的右侧所有标签
|
||||
|
||||
tabs.closeMult(id, 'all'); // 关闭所有标签
|
||||
```
|
||||
|
||||
|
|
@ -220,7 +224,7 @@ console.log(data);
|
|||
`tabs.getHeaderItem(id, index)`
|
||||
|
||||
- 参数 `id` : 组件的实例 ID
|
||||
- 参数 `index` : 标签索引或标签的 `lay-id` 属性值
|
||||
- 参数 `index` : 若传入 number 类型，则为标签索引；若传入 string 类型，则为标签的 `lay-id` 属性值
|
||||
|
||||
该方法用于获取标签头部项元素。
|
||||
|
||||
|
|
@ -234,7 +238,7 @@ var headerItem = tabs.getHeaderItem('test', 'abc'); // 获取 lay-id="abc" 的
|
|||
`tabs.getBodyItem(id, index)`
|
||||
|
||||
- 参数 `id` : 组件的实例 ID
|
||||
- 参数 `index` : 标签索引或标签的 `lay-id` 属性值 <sup>2.11.2+</sup>
|
||||
- 参数 `index` : 若传入 number 类型，则为标签索引；若传入 string 类型，则为标签的 `lay-id` 属性值 <sup>2.11.2+</sup>
|
||||
|
||||
该方法用于获取标签内容项元素。
|
||||
|
||||
|
|
|
|||
|
|
@ -274,7 +274,8 @@ treeTable.addNodes('test', {
|
|||
| index | 节点对应的行下标，一般可通过 `<tr>` 元素的 `data-index` 属性获得 | number | - |
|
||||
| expandFlag | 设置展开或关闭状态，若为 `true` 则表示展开；`false` 则为关闭；`null` 则表示切换 | boolean/null | - |
|
||||
| inherit | 子节点是否继承父节点的展开或关闭状态，`expandFlag` 属性必须为 `boolean` 型时才有效。 | boolean | `false` |
|
||||
| callbackFlag | 是否触发事件（`beforeExpand,onExpand`） | boolean | `false` |
|
||||
| callbackFlag | 是否触发 tree.callback 事件（`beforeExpand,onExpand`） | boolean | `false` |
|
||||
| done <sup>2.11.3+</sup>| 节点操作完成后的回调函数 | (tableId, trData, trExpand) => void | - |
|
||||
|
||||
若操作的节点不是一个父节点，则返回 `null`，否则返回操作之后的折叠状态。
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,38 @@ toc: true
|
|||
|
||||
<h2 id="2.10+" lay-toc="{title: '2.10+'}"></h2>
|
||||
|
||||
<h2 id="v2.11.4" lay-pid="2.10+" class="ws-anchor">
|
||||
v2.11.4
|
||||
<span class="layui-badge-rim">2025-06-23</span>
|
||||
<span class="layui-badge-rim" style="color: #16b777;">稳定版</span>
|
||||
</h2>
|
||||
|
||||
- 重构 collapse 展开收缩动画的核心逻辑 #2734
|
||||
- 新增 collapse 列表项添加 `layui-show` 类设置默认展开的支持，且兼容旧版 #2734
|
||||
- 修复 collapse 列表项的内容元素添加 `layui-show` 类时的收缩异常问题 #2734
|
||||
|
||||
### 下载： [layui-v2.11.4.zip](https://gitee.com/layui/layui/attach_files/2241193/download)
|
||||
|
||||
---
|
||||
|
||||
<h2 id="v2.11.3" lay-pid="2.10+" class="ws-anchor">
|
||||
v2.11.3
|
||||
<span class="layui-badge-rim">2025-06-18</span>
|
||||
</h2>
|
||||
|
||||
- #### tabs
|
||||
- 优化 `close` 方法在标签顺序打乱时传入 `lay-id` 的支持 #2690 @sentsim
|
||||
- 优化 `closeMult` 方法的 `index` 参数值为 `lay-id` 时的无效问题 #2690 @sentsim
|
||||
- 优化 `getHeaderItem` 等方法的 `index` 参数的类型检测 #2690 @sentsim
|
||||
- #### treeTable
|
||||
- 新增 `expandNode` 方法的 `done` 回调 #2721 @Sight-wcg
|
||||
- #### collapse
|
||||
- 新增 折叠面板展开和收缩时的过渡动画 #2722 @sentsim
|
||||
|
||||
### 下载： [layui-v2.11.3.zip](https://gitee.com/layui/layui/attach_files/2233291/download)
|
||||
|
||||
---
|
||||
|
||||
<h2 id="v2.11.2" lay-pid="2.10+" class="ws-anchor">
|
||||
v2.11.2
|
||||
<span class="layui-badge-rim">2025-05-15</span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>折叠面板 - Layui</title>
|
||||
<link rel="stylesheet" href="../src/css/layui.css">
|
||||
</head>
|
||||
<body class="layui-padding-3">
|
||||
<h2>常规用法：</h2><br>
|
||||
<div class="layui-collapse" lay-filter="test">
|
||||
<div class="layui-colla-item">
|
||||
<h3 class="layui-colla-title">item 1</h3>
|
||||
<div class="layui-colla-content layui-show">
|
||||
旧版，通过给列表的内容添加 layui-show 类开启显示
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h3 class="layui-colla-title">item2</h3>
|
||||
<div class="layui-colla-content">
|
||||
content 2
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h3 class="layui-colla-title">item 3</h3>
|
||||
<div class="layui-colla-content">
|
||||
content 3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="layui-collapse" lay-filter="test">
|
||||
<div class="layui-colla-item layui-show">
|
||||
<h3 class="layui-colla-title">item 111</h3>
|
||||
<div class="layui-colla-content">
|
||||
新版 <sup>2.11.4+</sup>，通过给列表项直接添加 layui-show 类开启显示
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h3 class="layui-colla-title">item 222</h3>
|
||||
<div class="layui-colla-content">
|
||||
content 2
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h3 class="layui-colla-title">item 333</h3>
|
||||
<div class="layui-colla-content">
|
||||
content 3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<br><h2>开启手风琴：</h2><br>
|
||||
<div class="layui-collapse" lay-accordion>
|
||||
<div class="layui-colla-item layui-show">
|
||||
<h3 class="layui-colla-title">item 1</h3>
|
||||
<div class="layui-colla-content">
|
||||
旧版，通过给列表的内容添加 layui-show 类开启显示
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h3 class="layui-colla-title">item2</h3>
|
||||
<div class="layui-colla-content">
|
||||
content 2
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h3 class="layui-colla-title">item 3</h3>
|
||||
<div class="layui-colla-content">
|
||||
content 3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
layui.use('element', function(){
|
||||
var element = layui.element;
|
||||
|
||||
element.on('collapse(test)', function(data){
|
||||
console.log(data);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -68,30 +68,7 @@ body{padding:20px;}
|
|||
|
||||
<span class="layui-badge-rim">Hot</span>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="layui-collapse" lay-filter="test" lay-accordion>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">杜甫</h2>
|
||||
<div class="layui-colla-content layui-show">
|
||||
<p>杜甫的思想核心是儒家的仁政思想，他有“致君尧舜上，再使风俗淳”的宏伟抱负。杜甫虽然在世时名声并不显赫，但后来声名远播，对中国文学和日本文学都产生了深远的影响。杜甫共有约1500首诗歌被保留了下来，大多集于《杜工部集》。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">李清照</h2>
|
||||
<div class="layui-colla-content">
|
||||
<p>李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。出嫁后与夫赵明诚共同致力于书画金石的搜集整理。金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调感伤。形式上善用白描手法，自辟途径，语言清丽。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-colla-item">
|
||||
<h2 class="layui-colla-title">鲁迅</h2>
|
||||
<div class="layui-colla-content">
|
||||
<p>鲁迅一生在文学创作、文学批评、思想研究、文学史研究、翻译、美术理论引进、基础科学介绍和古籍校勘与研究等多个领域具有重大贡献。他对于五四运动以后的中国社会思想文化发展具有重大影响，蜚声世界文坛，尤其在韩国、日本思想文化领域有极其重要的地位和影响，被誉为“二十世纪东亚文化地图上占最大领土的作家”。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br><br>
|
||||
<hr><br>
|
||||
|
||||
<div class="layui-progress" lay-showPercent="true" lay-filter="demo-progress-1">
|
||||
<div class="layui-progress-bar" lay-percent="1/3"></div>
|
||||
|
|
@ -174,19 +151,11 @@ body{padding:20px;}
|
|||
灰色分割线
|
||||
<hr class="layui-border-gray">
|
||||
|
||||
|
||||
|
||||
|
||||
<script src="../src/layui.js"></script>
|
||||
<script>
|
||||
|
||||
layui.use(['element', 'form'], function(){
|
||||
var element = layui.element;
|
||||
|
||||
element.on('collapse(test)', function(data){
|
||||
console.log(data);
|
||||
layui.use('element', function() {
|
||||
var element = layui.element;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -90,6 +90,26 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<h2>打乱标签顺序：</h2>
|
||||
<div class="layui-tabs" lay-options="{closable: true}">
|
||||
<ul class="layui-tabs-header">
|
||||
<li lay-id="fff">Tab6</li>
|
||||
<li lay-id="eee">Tab5</li>
|
||||
<li lay-id="ccc">Tab3</li>
|
||||
<li lay-id="bbb">Tab2</li>
|
||||
<li lay-id="aaa">Tab1</li>
|
||||
<li lay-id="ddd">Tab4</li>
|
||||
</ul>
|
||||
<div class="layui-tabs-body">
|
||||
<div class="layui-tabs-item" lay-id="aaa">Tab Content-1</div>
|
||||
<div class="layui-tabs-item" lay-id="bbb">Tab Content-2</div>
|
||||
<div class="layui-tabs-item" lay-id="ccc">Tab Content-3</div>
|
||||
<div class="layui-tabs-item" lay-id="ddd">Tab Content-4</div>
|
||||
<div class="layui-tabs-item" lay-id="eee">Tab Content-5</div>
|
||||
<div class="layui-tabs-item" lay-id="fff">Tab Content-6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>标签 HASH 定位</h2>
|
||||
<div class="layui-tabs layui-hide-v" id="demoTabs-hash">
|
||||
<ul class="layui-tabs-header">
|
||||
|
|
@ -267,6 +287,8 @@
|
|||
}],
|
||||
click: function(data, othis, event) {
|
||||
var index = this.elem.index(); // 获取活动标签索引
|
||||
var layid = this.elem.attr('lay-id');
|
||||
|
||||
// 新增标签操作
|
||||
if (data.action === 'add') {
|
||||
// 在当前活动标签右侧新增标签页
|
||||
|
|
|
|||
|
|
@ -14,12 +14,17 @@
|
|||
<div class="layui-fluid" style="padding: 15px;">
|
||||
<button class="layui-btn" lay-on="asyncLoad">asyncLoad</button>
|
||||
<button class="layui-btn" lay-on="flatData">flatData</button>
|
||||
<button class="layui-btn" lay-on="expandNode">expandNode</button>
|
||||
<button class="layui-btn" lay-on="unexpandNode">unexpandNode</button>
|
||||
<table id="demo"></table>
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.0/mock-min.js"></script>
|
||||
<script src="../src/layui.js" src1="//cdnjs.cloudflare.com/ajax/libs/layui/2.9.7/layui.js"
|
||||
src1="https://cdn.jsdelivr.net/gh/layui/layui@879a9c629cc832f5b235d138adf164d74c34991b/src/layui.js"></script>
|
||||
<script>
|
||||
Mock.setup({
|
||||
timeout: '100-300'
|
||||
});
|
||||
layui.use(["treeTable", "util"], function () {
|
||||
var treeTable = layui.treeTable;
|
||||
var util = layui.util;
|
||||
|
|
@ -39,6 +44,11 @@
|
|||
async: {
|
||||
enable: true,
|
||||
autoParam: ["parentId=id"]
|
||||
},
|
||||
callback: {
|
||||
onExpand: function (tableId, trData, trExpand) {
|
||||
console.log('onExpand', tableId, trData.id, trExpand);
|
||||
}
|
||||
}
|
||||
},
|
||||
}, true)
|
||||
|
|
@ -57,6 +67,28 @@
|
|||
}
|
||||
},
|
||||
}, true)
|
||||
},
|
||||
expandNode: function(){
|
||||
treeTable.expandNode('demo', {
|
||||
index: 0,
|
||||
expandFlag: true,
|
||||
inherit: true,
|
||||
callbackFlag: true,
|
||||
done: function (tableId, trData, trExpand) {
|
||||
console.log('done', tableId, trData.id, trExpand);
|
||||
}
|
||||
})
|
||||
},
|
||||
unexpandNode: function(){
|
||||
treeTable.expandNode('demo', {
|
||||
index: 0,
|
||||
expandFlag: false,
|
||||
inherit: true,
|
||||
callbackFlag: true,
|
||||
done: function (tableId, trData, trExpand) {
|
||||
console.log('done', tableId, trData.id, trExpand);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -130,7 +162,7 @@
|
|||
//var testDatas = getTreeData(rootNodes);
|
||||
|
||||
Mock.mock(/getDatas/, "get", (config) => {
|
||||
console.log(config);
|
||||
//console.log(config);
|
||||
var params = layui.url(config.url);
|
||||
var search = params.search;
|
||||
var parentId = search.parentId;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "layui",
|
||||
"version": "2.11.2",
|
||||
"version": "2.11.4",
|
||||
"description": "Classic modular Front-End UI library",
|
||||
"keywords": [
|
||||
"layui",
|
||||
|
|
|
|||
|
|
@ -577,7 +577,9 @@ a cite{font-style: normal;}
|
|||
.layui-colla-item:first-child{border-top: none;}
|
||||
.layui-colla-title{position: relative; height: 42px; line-height: 42px; padding: 0 15px 0 35px; color: #333; background-color: #fafafa; cursor: pointer; font-size: 14px; overflow: hidden;}
|
||||
.layui-colla-content{display: none; padding: 10px 15px; line-height: 1.6; color: #5F5F5F;}
|
||||
.layui-colla-icon{position: absolute; left: 15px; top: 0; font-size: 14px;}
|
||||
.layui-colla-icon{position: absolute; left: 15px; top: 50%; margin-top: -7px; font-size: 14px; line-height: normal; transition: all .2s;}
|
||||
.layui-colla-item.layui-show > .layui-colla-title .layui-colla-icon{transform: rotate(90deg);}
|
||||
.layui-colla-item.layui-show > .layui-colla-content{display: block;}
|
||||
|
||||
/* 卡片面板 */
|
||||
.layui-card{margin-bottom: 15px; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
// constructor
|
||||
var Class = function() {
|
||||
this.v = '2.11.2'; // 版本号
|
||||
this.v = '2.11.4'; // 版本号
|
||||
};
|
||||
|
||||
// 识别预先可能定义的指定全局对象
|
||||
|
|
|
|||
|
|
@ -404,28 +404,51 @@ layui.define('jquery', function(exports) {
|
|||
}
|
||||
|
||||
// 折叠面板
|
||||
,collapse: function(){
|
||||
,collapse: function() {
|
||||
var othis = $(this);
|
||||
var icon = othis.find('.layui-colla-icon');
|
||||
var elemCont = othis.siblings('.layui-colla-content');
|
||||
var parents = othis.parents('.layui-collapse').eq(0);
|
||||
var filter = parents.attr('lay-filter');
|
||||
var isNone = elemCont.css('display') === 'none';
|
||||
var wrapper = othis.closest('.layui-collapse');
|
||||
var filter = wrapper.attr('lay-filter');
|
||||
|
||||
// 是否手风琴
|
||||
if(typeof parents.attr('lay-accordion') === 'string'){
|
||||
var show = parents.children('.layui-colla-item').children('.'+SHOW);
|
||||
show.siblings('.layui-colla-title').children('.layui-colla-icon').html('');
|
||||
show.removeClass(SHOW);
|
||||
var ANIM_MS = 200; // 动画过渡毫秒数
|
||||
var CLASS_ITEM = '.layui-colla-item';
|
||||
var CLASS_CONTENT = '.layui-colla-content';
|
||||
|
||||
var thisItemElem = othis.parent(CLASS_ITEM);
|
||||
var thisContentElem = othis.siblings(CLASS_CONTENT);
|
||||
var isNone = thisContentElem.css('display') === 'none';
|
||||
var isAccordion = typeof wrapper.attr('lay-accordion') === 'string';
|
||||
|
||||
// 动画执行完成后的操作
|
||||
var complete = function() {
|
||||
$(this).css('display', ''); // 剔除动画生成的 style display，以适配外部样式的状态重置
|
||||
};
|
||||
|
||||
// 是否正处于动画中的状态
|
||||
if (thisContentElem.is(':animated')) return;
|
||||
|
||||
// 展开或收缩
|
||||
if (isNone) {
|
||||
// 先执行 slideDown 动画，再标注展开状态样式，避免元素 `block` 状态导致动画无效
|
||||
thisContentElem.slideDown(ANIM_MS, complete);
|
||||
thisItemElem.addClass(SHOW);
|
||||
} else {
|
||||
// 先取消展开状态样式，再将元素临时显示，避免 `none` 状态导致 slideUp 动画无效
|
||||
thisItemElem.removeClass(SHOW);
|
||||
thisContentElem.show().slideUp(ANIM_MS, complete);
|
||||
}
|
||||
|
||||
elemCont[isNone ? 'addClass' : 'removeClass'](SHOW);
|
||||
icon.html(isNone ? '' : '');
|
||||
// 是否开启手风琴
|
||||
if (isAccordion) {
|
||||
var itemSiblings = thisItemElem.siblings('.'+ SHOW);
|
||||
itemSiblings.removeClass(SHOW);
|
||||
itemSiblings.children(CLASS_CONTENT).show().slideUp(ANIM_MS, complete);
|
||||
}
|
||||
|
||||
// 事件
|
||||
layui.event.call(this, MOD_NAME, 'collapse('+ filter +')', {
|
||||
title: othis
|
||||
,content: elemCont
|
||||
,show: isNone
|
||||
title: othis,
|
||||
content: thisContentElem,
|
||||
show: isNone
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -617,27 +640,32 @@ layui.define('jquery', function(exports) {
|
|||
});
|
||||
}
|
||||
|
||||
//折叠面板
|
||||
,collapse: function(elem){
|
||||
// 折叠面板
|
||||
,collapse: function(elem) {
|
||||
var ELEM = 'layui-collapse';
|
||||
var targetElem = elem || $('.' + ELEM + elemFilter);
|
||||
|
||||
targetElem.each(function(){
|
||||
var elemItem = $(this).find('.layui-colla-item')
|
||||
elemItem.each(function(){
|
||||
targetElem.each(function() {
|
||||
var elemItem = $(this).find('.layui-colla-item');
|
||||
elemItem.each(function() {
|
||||
var othis = $(this)
|
||||
,elemTitle = othis.find('.layui-colla-title')
|
||||
,elemCont = othis.find('.layui-colla-content')
|
||||
,isNone = elemCont.css('display') === 'none';
|
||||
var elemTitle = othis.find('.layui-colla-title');
|
||||
var elemCont = othis.find('.layui-colla-content');
|
||||
var isNone = elemCont.css('display') === 'none';
|
||||
|
||||
//初始状态
|
||||
// 初始状态
|
||||
elemTitle.find('.layui-colla-icon').remove();
|
||||
elemTitle.append('<i class="layui-icon layui-colla-icon">'+ (isNone ? '' : '') +'</i>');
|
||||
elemTitle.append('<i class="layui-icon layui-icon-right layui-colla-icon"></i>');
|
||||
othis[isNone ? 'removeClass' : 'addClass'](SHOW);
|
||||
|
||||
//点击标题
|
||||
// 兼容旧版（ < 2.11.3）
|
||||
if (elemCont.hasClass(SHOW)) {
|
||||
elemCont.removeClass(SHOW);
|
||||
}
|
||||
|
||||
// 点击标题
|
||||
elemTitle.off('click', call.collapse).on('click', call.collapse);
|
||||
});
|
||||
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -228,14 +228,13 @@ layui.define('component', function(exports) {
|
|||
* @param {boolean} force - 是否强制删除
|
||||
*/
|
||||
Class.prototype.close = function(thisHeaderItem, force) {
|
||||
if(!thisHeaderItem || !thisHeaderItem[0]) return;
|
||||
if (!thisHeaderItem || !thisHeaderItem[0]) return;
|
||||
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var layid = thisHeaderItem.attr('lay-id');
|
||||
var index = thisHeaderItem.index();
|
||||
|
||||
if (!thisHeaderItem[0]) return;
|
||||
|
||||
// 标签是否不可关闭
|
||||
if (thisHeaderItem.attr('lay-closable') === 'false') {
|
||||
return;
|
||||
|
|
@ -251,7 +250,7 @@ layui.define('component', function(exports) {
|
|||
component.CONST.MOD_NAME,
|
||||
'beforeClose('+ options.id +')',
|
||||
$.extend(data, {
|
||||
index: thisHeaderItem.index()
|
||||
index: index
|
||||
})
|
||||
);
|
||||
|
||||
|
|
@ -271,8 +270,8 @@ layui.define('component', function(exports) {
|
|||
}
|
||||
|
||||
// 移除元素
|
||||
that.findBodyItem(layid || index).remove();
|
||||
thisHeaderItem.remove();
|
||||
that.findBodyItem(index).remove();
|
||||
|
||||
that.roll('auto', index);
|
||||
|
||||
|
|
@ -304,14 +303,9 @@ layui.define('component', function(exports) {
|
|||
|
||||
index = index === undefined ? data.index : index;
|
||||
|
||||
// 将标签头 lay-closable 属性值同步到 body 项
|
||||
headers.each(function(i) {
|
||||
var othis = $(this);
|
||||
var closableAttr = othis.attr('lay-closable');
|
||||
if (closableAttr) {
|
||||
bodys.eq(i).attr('lay-closable', closableAttr);
|
||||
}
|
||||
});
|
||||
var headerItem = that.findHeaderItem(index);
|
||||
var bodyItem = that.findBodyItem(index);
|
||||
var itemIndex = headerItem.index();
|
||||
|
||||
// 若当前选中标签也允许关闭，则尝试寻找不可关闭的标签并将其选中
|
||||
if (data.thisHeaderItem.attr('lay-closable') !== 'false') {
|
||||
|
|
@ -323,22 +317,33 @@ layui.define('component', function(exports) {
|
|||
} else if(prevHeader[0]) {
|
||||
that.change(prevHeader, true);
|
||||
}
|
||||
} else if(index !== data.index) { // 自动切换到活动标签（功能可取消）
|
||||
that.change(that.findHeaderItem(index), true);
|
||||
} else if(index !== data.index) { // 自动切换到活动标签
|
||||
that.change(headerItem, true);
|
||||
}
|
||||
}
|
||||
|
||||
// 执行批量关闭标签
|
||||
if (mode === 'other') { // 关闭其他标签
|
||||
headers.eq(index).siblings(FILTER).remove();
|
||||
bodys.eq(index).siblings(FILTER).remove();
|
||||
} else if(mode === 'right') { // 关闭右侧标签
|
||||
headers.filter(':gt('+ index +')'+ FILTER).remove();
|
||||
bodys.filter(':gt('+ index +')'+ FILTER).remove();
|
||||
} else { // 关闭所有标签
|
||||
headers.filter(FILTER).remove();
|
||||
bodys.filter(FILTER).remove();
|
||||
}
|
||||
headers.each(function(i) {
|
||||
var $this = $(this);
|
||||
var layid = $this.attr('lay-id');
|
||||
var bodyItem = that.findBodyItem(layid || i);
|
||||
|
||||
// 标签是否不可关闭
|
||||
if ($this.attr('lay-closable') === 'false') {
|
||||
return;
|
||||
}
|
||||
|
||||
// 批量关闭方式
|
||||
var isCloseOther = mode === 'other' && i !== itemIndex; // 关闭其他标签
|
||||
var isCloseRight = mode === 'right' && i > itemIndex; // 关闭右侧标签
|
||||
var isCloseLeft = mode === 'left' && i < itemIndex; // 关闭左侧标签（不推荐）
|
||||
var isCloseAll = mode === 'all'; // 关闭所有标签
|
||||
|
||||
if (isCloseOther || isCloseRight || isCloseLeft || isCloseAll) {
|
||||
$this.remove();
|
||||
bodyItem.remove();
|
||||
}
|
||||
});
|
||||
|
||||
that.roll('auto');
|
||||
|
||||
|
|
@ -365,7 +370,8 @@ layui.define('component', function(exports) {
|
|||
|
||||
var that = this;
|
||||
var options = that.config;
|
||||
var index = thisHeaderItem.attr('lay-id') || thisHeaderItem.index();
|
||||
var layid = thisHeaderItem.attr('lay-id');
|
||||
var index = thisHeaderItem.index();
|
||||
var thatA = thisHeaderItem.find('a');
|
||||
// 是否存在跳转链接
|
||||
var isLink = typeof thatA.attr('href') === 'string' && thatA.attr('target') === '_blank';
|
||||
|
|
@ -392,7 +398,7 @@ layui.define('component', function(exports) {
|
|||
headerItem: data.thisHeaderItem
|
||||
},
|
||||
to: {
|
||||
index: thisHeaderItem.index(),
|
||||
index: index,
|
||||
headerItem: thisHeaderItem
|
||||
}
|
||||
})
|
||||
|
|
@ -409,7 +415,7 @@ layui.define('component', function(exports) {
|
|||
.removeClass(component.CONST.CLASS_THIS);
|
||||
|
||||
// 执行标签内容切换
|
||||
that.findBodyItem(index).addClass(component.CONST.CLASS_SHOW)
|
||||
that.findBodyItem(layid || index).addClass(component.CONST.CLASS_SHOW)
|
||||
.siblings().removeClass(component.CONST.CLASS_SHOW);
|
||||
|
||||
that.roll('auto', index);
|
||||
|
|
@ -467,7 +473,11 @@ layui.define('component', function(exports) {
|
|||
opts = opts || {};
|
||||
|
||||
// 不可关闭项
|
||||
if (opts.closable == false || headerItem.attr('lay-closable') === 'false') {
|
||||
if (opts.closable == false) {
|
||||
headerItem.attr('lay-closable', 'false');
|
||||
}
|
||||
|
||||
if (headerItem.attr('lay-closable') === 'false') {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -652,30 +662,35 @@ layui.define('component', function(exports) {
|
|||
Class.prototype.findHeaderItem = function(index) {
|
||||
var container = this.getContainer();
|
||||
var headerItems = container.header.items;
|
||||
var headerItem = headerItems.filter('[lay-id="'+ index +'"]');
|
||||
return headerItem[0] ? headerItem : headerItems.eq(index);
|
||||
|
||||
// 根据 lay-id 匹配
|
||||
if (typeof index === 'string') {
|
||||
return headerItems.filter('[lay-id="'+ index +'"]');
|
||||
}
|
||||
|
||||
return headerItems.eq(index);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取标签内容项
|
||||
* @param {number} index - 标签索引或 lay-id
|
||||
* @param {number|string} index - 标签索引或 lay-id
|
||||
*/
|
||||
Class.prototype.findBodyItem = function(index) {
|
||||
var container = this.getContainer();
|
||||
var bodyItems = container.body.items;
|
||||
var bodyItem = bodyItems.filter('[lay-id="'+ index +'"]');
|
||||
|
||||
return bodyItem[0] ? bodyItem : function() {
|
||||
// 若未匹配到 lay-id 对应内容项，则继续匹配对应头部项
|
||||
var headerItems = container.header.items;
|
||||
var headerItem = headerItems.filter('[lay-id="'+ index +'"]');
|
||||
// 根据 lay-id 匹配
|
||||
if (typeof index === 'string') {
|
||||
var bodyItem = bodyItems.filter('[lay-id="'+ index +'"]');
|
||||
return bodyItem[0] ? bodyItem : function() {
|
||||
// 若未匹配到 lay-id 对应内容项，则通过对应头部项的索引匹配内容项
|
||||
var headerItems = container.header.items;
|
||||
var headerItem = headerItems.filter('[lay-id="'+ index +'"]');
|
||||
return bodyItems.eq(headerItem.index());
|
||||
}();
|
||||
}
|
||||
|
||||
if (headerItem[0]) {
|
||||
index = headerItem.index();
|
||||
}
|
||||
|
||||
return bodyItems.eq(index);
|
||||
}();
|
||||
return bodyItems.eq(index);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -734,10 +749,10 @@ layui.define('component', function(exports) {
|
|||
* @param {('other'|'right'|'all')} [mode="all"] - 关闭方式
|
||||
* @param {number} index - 活动标签的索引，默认取当前选中标签的索引。一般用于标签右键事件
|
||||
*/
|
||||
closeMult: function(id, mode, index, force) {
|
||||
closeMult: function(id, mode, index) {
|
||||
var that = component.getInst(id);
|
||||
if(!that) return;
|
||||
that.closeMult(mode, index, force);
|
||||
that.closeMult(mode, index);
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -590,7 +590,7 @@ layui.define(['table'], function (exports) {
|
|||
})()
|
||||
|
||||
// 优化参数，添加一个 getNodeByIndex 方法 只传 表格id 和行 dataIndex 分几步优化 todo
|
||||
var expandNode = function (treeNode, expandFlag, sonSign, focus, callbackFlag) {
|
||||
var expandNode = function (treeNode, expandFlag, sonSign, focus, callbackFlag, done) {
|
||||
// treeNode // 需要展开的节点
|
||||
var trElem = treeNode.trElem;
|
||||
var tableViewElem = treeNode.tableViewElem || trElem.closest(ELEM_VIEW);
|
||||
|
|
@ -658,7 +658,7 @@ layui.define(['table'], function (exports) {
|
|||
tableViewElem: tableViewElem,
|
||||
tableId: tableId,
|
||||
options: options,
|
||||
}, expandFlag, sonSign, focus, callbackFlag);
|
||||
}, expandFlag, sonSign, focus, callbackFlag, done);
|
||||
} else if (item1[LAY_EXPAND]) { // 初始化级联展开
|
||||
expandNode({
|
||||
dataIndex: item1[LAY_DATA_INDEX],
|
||||
|
|
@ -666,7 +666,7 @@ layui.define(['table'], function (exports) {
|
|||
tableViewElem: tableViewElem,
|
||||
tableId: tableId,
|
||||
options: options,
|
||||
}, true);
|
||||
}, true, undefined, undefined, undefined, done);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
|
|
@ -681,7 +681,7 @@ layui.define(['table'], function (exports) {
|
|||
trData[LAY_ASYNC_STATUS] = 'success';
|
||||
trData[customName.children] = data;
|
||||
treeTableThat.initData(trData[customName.children], trData[LAY_DATA_INDEX])
|
||||
expandNode(treeNode, true, isToggle ? false : sonSign, focus, callbackFlag);
|
||||
expandNode(treeNode, true, isToggle ? false : sonSign, focus, callbackFlag, done);
|
||||
}
|
||||
|
||||
var format = asyncSetting.format; // 自定义数据返回方法
|
||||
|
|
@ -804,7 +804,7 @@ layui.define(['table'], function (exports) {
|
|||
tableViewElem: tableViewElem,
|
||||
tableId: tableId,
|
||||
options: options,
|
||||
}, expandFlag, sonSign, focus, callbackFlag);
|
||||
}, expandFlag, sonSign, focus, callbackFlag, done);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -820,7 +820,7 @@ layui.define(['table'], function (exports) {
|
|||
tableViewElem: tableViewElem,
|
||||
tableId: tableId,
|
||||
options: options,
|
||||
}, expandFlag, sonSign, focus, callbackFlag);
|
||||
}, expandFlag, sonSign, focus, callbackFlag, done);
|
||||
});
|
||||
tableViewElem.find(childNodes.map(function (value, index, array) { // 只隐藏直接子节点，其他由递归的处理
|
||||
return 'tr[lay-data-index="' + value[LAY_DATA_INDEX] + '"]'
|
||||
|
|
@ -843,6 +843,10 @@ layui.define(['table'], function (exports) {
|
|||
layui.type(onExpand) === 'function' && onExpand(tableId, trData, trExpand);
|
||||
}
|
||||
|
||||
if(layui.type(done) === 'function' && trData[LAY_ASYNC_STATUS] !== 'loading'){
|
||||
done(tableId, trData, trExpand);
|
||||
}
|
||||
|
||||
return retValue;
|
||||
}
|
||||
|
||||
|
|
@ -853,7 +857,8 @@ layui.define(['table'], function (exports) {
|
|||
* @param {Number|String} opts.index 展开行的数据下标
|
||||
* @param {Boolean} [opts.expandFlag] 展开、关闭、切换
|
||||
* @param {Boolean} [opts.inherit] 是否级联子节点
|
||||
* @param {Boolean} [opts.callbackFlag] 是否触发事件
|
||||
* @param {Boolean} [opts.callbackFlag] 是否触发 tree.callback 事件
|
||||
* @param {Boolean} [opts.done] 节点操作完成后的回调函数
|
||||
* @return [{Boolean}] 状态结果
|
||||
* */
|
||||
treeTable.expandNode = function (id, opts) {
|
||||
|
|
@ -871,7 +876,7 @@ layui.define(['table'], function (exports) {
|
|||
var tableViewElem = options.elem.next();
|
||||
return expandNode({
|
||||
trElem: tableViewElem.find('tr[lay-data-index="' + index + '"]').first()
|
||||
}, expandFlag, sonSign, null, callbackFlag)
|
||||
}, expandFlag, sonSign, null, callbackFlag, opts.done)
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue