mirror of
https://gitee.com/layui/layui.git
synced 2025-04-05 17:38:02 +08:00
feat(tab): 增强 tab 功能 (#1955)
* feat(tab): 增强 tab 功能
1. lay-allowclose="false" 可以添加到 tab 容器或 tab title 元素上，遵循就近原则。
- 添加到 tab 容器时，控制所有选项卡是否允许关闭，
- 添加到 tab title 元素时，控制单个选项卡是否允许关闭。
- tabAdd 参数新增 allowclose 选项，效果同 tab title 元素上的 lay-allowclose 属性
2. 当 tab title 元素上有 lay-id 属性时，将根据 id 显示/删除对应的 content 元素，方便实现拖拽选项卡
3. 新增 tabBeforeDelete 事件，返回 false 时阻止关闭对应的选项卡
4. 因为 2，事件参数新增 id 属性
* refactor: 移除 title 和 content 同步 id，改为如果 content 中找不到 id, 就回退到默认行为
* docs(tab): 更新 tab 文档
* docs(tab): 优化文案
* style(tab): 避免某些分辨率下默认风格的当前选中标签头出现下边框的问题
* docs(tab): 优化文档及示例细节
---------
Co-authored-by: 贤心 <3277200+sentsim@users.noreply.github.com>
This commit is contained in:
morning-star
GitHub
parent
4d103a83d9
commit
ea1693dd32
@ -118,8 +118,8 @@ tab 组件提供了三种 UI 风格，分别为：
|
||||
|
||||
| 属性 | 描述 |
|
||||
| --- | --- |
|
||||
| lay-allowclose | 是否开启删除图标。设置在 tab 容器 `<ul class="layui-tab">` 上。 |
|
||||
| lay-id | tab 选项唯一 ID，一般用于外部对 tab 的删除和切换等操作。设置在 tab 中的 `<li>` 元素上 |
|
||||
| lay-allowclose | 是否开启删除图标。设置在 tab 容器 `<ul class="layui-tab">` 上。 <br><sup>2.9.11+</sup>: 若需要单独关闭某一个选项卡的删除图标，可在选项卡标题元素 `<li>` 上设置 `lay-allowclose="false"`|
|
||||
| lay-id | tab 选项唯一 ID，一般用于外部对 tab 的删除和切换等操作。设置在 tab 中的 `<li>` 元素上。在外部附加选项卡拖拽排序时，`layui-tab-item` 元素也要设置 ID |
|
||||
|
||||
<h3 id="allowclose" lay-toc="{level: 2}" class="ws-bold">开启删除</h3>
|
||||
|
||||
@ -129,14 +129,14 @@ tab 组件提供了三种 UI 风格，分别为：
|
||||
<textarea>
|
||||
<div class="layui-tab" lay-allowclose="true">
|
||||
<ul class="layui-tab-title">
|
||||
<li class="layui-this">标签1</li>
|
||||
<li class="layui-this" lay-allowclose="false">标签1</li>
|
||||
<li>标签2</li>
|
||||
<li>标签3</li>
|
||||
<li>标签4</li>
|
||||
<li>标签5</li>
|
||||
</ul>
|
||||
<div class="layui-tab-content">
|
||||
<div class="layui-tab-item layui-show">内容-1</div>
|
||||
<div class="layui-tab-item layui-show">单独设置「标签1」不允许删除 <sup>2.9.11+</sup></div>
|
||||
<div class="layui-tab-item">内容-2</div>
|
||||
<div class="layui-tab-item">内容-3</div>
|
||||
<div class="layui-tab-item">内容-4</div>
|
||||
@ -191,6 +191,7 @@ layui.use(function(){
|
||||
| content | 选项卡的内容，支持传入 `html` | string | - |
|
||||
| id | 选项卡标题元素的 `lay-id` 属性值 | string | - |
|
||||
| change | 是否添加 tab 完毕后即自动切换 | boolean | `false` |
|
||||
| allowClose <sup>2.9.11+</sup>| 是否开启删除图标 | boolean | `false` |
|
||||
|
||||
该方法用于添加 tab 选项。用法详见 : [#示例](#examples)
|
||||
|
||||
@ -285,6 +286,7 @@ element.on('tab(filter)', function(data){
|
||||
console.log(this); // 当前 tab 标题所在的原始 DOM 元素
|
||||
console.log(data.index); // 得到当前 tab 项的所在下标
|
||||
console.log(data.elem); // 得到当前的 tab 容器
|
||||
console.log(data.id); // 得到当前的 tab ID(2.9.11+)
|
||||
});
|
||||
```
|
||||
|
||||
@ -307,6 +309,31 @@ var element = layui.element;
|
||||
element.on('tabDelete(filter)', function(data){
|
||||
console.log(data.index); // 得到被删除的 tab 项的所在下标
|
||||
console.log(data.elem); // 得到当前的 tab 容器
|
||||
console.log(data.id); // 得到被删除的 tab 项的 ID(2.9.11+)
|
||||
});
|
||||
```
|
||||
|
||||
<h3 id="on-tabBeforeDelete" lay-toc="{level: 2}" class="ws-bold">tab 删除前的事件 <sup>2.9.11+</sup></h3>
|
||||
|
||||
`element.on('tabBeforeDelete(filter)', callback);`
|
||||
|
||||
- 参数 `tabBeforeDelete(filter)` 是一个特定结构。
|
||||
- `tabBeforeDelete` 为 tab 删除事件固定值；
|
||||
- `filter` 为 tab 容器属性 `lay-filter` 对应的值。
|
||||
- 参数 `callback` 为事件执行时的回调函数，并返回一个 `object` 类型的参数。
|
||||
|
||||
点击 tab 选项删除前触发。
|
||||
|
||||
```
|
||||
var element = layui.element;
|
||||
|
||||
// tab 删除前的事件
|
||||
element.on('tabBeforeDelete(filter)', function(data){
|
||||
console.log(data.index); // 得到被删除的 tab 项的所在下标
|
||||
console.log(data.elem); // 得到当前的 tab 容器
|
||||
console.log(data.id); // 得到被删除的 tab 项的 ID(2.9.11+)
|
||||
|
||||
if(data.id === 'home') return false; // 返回 false 时阻止关闭对应的选项卡
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@ -1376,7 +1376,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
||||
.layui-tab .layui-tab-title li a{display: block; padding: 0 15px; margin: 0 -15px;}
|
||||
.layui-tab-title .layui-this{color: #000;}
|
||||
|
||||
.layui-tab-title .layui-this:after{position: absolute; left:0; top: 0; content: ""; width:100%; height: 41px; border-width: 1px; border-style: solid; border-bottom-color: #fff; border-radius: 2px 2px 0 0; box-sizing: border-box; pointer-events: none;}
|
||||
.layui-tab-title .layui-this:after{position: absolute; left:0; top: 0; content: ""; width:100%; height: 41px; border-width: 1px; border-bottom-width: 2px; border-style: solid; border-bottom-color: #fff; border-radius: 2px 2px 0 0; box-sizing: border-box; pointer-events: none;}
|
||||
.layui-tab-bar{position: absolute; right: 0; top: 0; z-index: 10; width: 30px; height: 39px; line-height: 39px; border-width: 1px; border-style: solid; border-radius: 2px; text-align: center; background-color: #fff; cursor: pointer;}
|
||||
.layui-tab-bar .layui-icon{position: relative; display: inline-block; top: 3px; transition: all .3s; -webkit-transition: all .3s;}
|
||||
.layui-tab-item{display: none;}
|
||||
|
||||
@ -48,7 +48,7 @@ layui.define('jquery', function(exports){
|
||||
}() +'>'+ (options.title || 'unnaming') +'</li>';
|
||||
|
||||
barElem[0] ? barElem.before(li) : titElem.append(li);
|
||||
contElem.append('<div class="layui-tab-item">'+ (options.content || '') +'</div>');
|
||||
contElem.append('<div class="layui-tab-item" ' + (options.id ? 'lay-id=' + options.id : '') + '>'+ (options.content || '') +'</div>');
|
||||
// call.hideTabMore(true);
|
||||
// 是否添加即切换
|
||||
options.change && this.tabChange(filter, options.id);
|
||||
@ -134,6 +134,7 @@ layui.define('jquery', function(exports){
|
||||
var isJump = elemA.attr('href') !== 'javascript:;' && elemA.attr('target') === '_blank'; // 是否存在跳转
|
||||
var unselect = typeof othis.attr('lay-unselect') === 'string'; // 是否禁用选中
|
||||
var filter = parents.attr('lay-filter');
|
||||
var hasId = othis.attr('lay-id');
|
||||
|
||||
// 下标
|
||||
var index = 'index' in obj
|
||||
@ -143,12 +144,19 @@ layui.define('jquery', function(exports){
|
||||
// 执行切换
|
||||
if(!(isJump || unselect)){
|
||||
othis.addClass(THIS).siblings().removeClass(THIS);
|
||||
item.eq(index).addClass(SHOW).siblings().removeClass(SHOW);
|
||||
if(hasId){
|
||||
var contentElem = item.filter('[lay-id="' + hasId + '"]');
|
||||
contentElem = contentElem.length ? contentElem : item.eq(index);
|
||||
contentElem.addClass(SHOW).siblings().removeClass(SHOW);
|
||||
}else{
|
||||
item.eq(index).addClass(SHOW).siblings().removeClass(SHOW);
|
||||
}
|
||||
}
|
||||
|
||||
layui.event.call(this, MOD_NAME, 'tab('+ filter +')', {
|
||||
elem: parents,
|
||||
index: index
|
||||
index: index,
|
||||
id: hasId
|
||||
});
|
||||
}
|
||||
|
||||
@ -159,6 +167,14 @@ layui.define('jquery', function(exports){
|
||||
var tabElem = li.closest('.layui-tab');
|
||||
var item = tabElem.children('.layui-tab-content').children('.layui-tab-item');
|
||||
var filter = tabElem.attr('lay-filter');
|
||||
var hasId = li.attr('lay-id');
|
||||
|
||||
var shouldClose = layui.event.call(li[0], MOD_NAME, 'tabBeforeDelete('+ filter +')', {
|
||||
elem: tabElem,
|
||||
index: index,
|
||||
id: hasId
|
||||
});
|
||||
if(shouldClose === false) return;
|
||||
|
||||
if(li.hasClass(THIS)){
|
||||
if (li.next()[0] && li.next().is('li')){
|
||||
@ -171,14 +187,21 @@ layui.define('jquery', function(exports){
|
||||
}
|
||||
|
||||
li.remove();
|
||||
item.eq(index).remove();
|
||||
if(hasId){
|
||||
var contentElem = item.filter('[lay-id="' + hasId + '"]');
|
||||
contentElem = contentElem.length ? contentElem : item.eq(index)
|
||||
contentElem.remove()
|
||||
}else{
|
||||
item.eq(index).remove();
|
||||
}
|
||||
setTimeout(function(){
|
||||
call.tabAuto();
|
||||
}, 50);
|
||||
|
||||
layui.event.call(this, MOD_NAME, 'tabDelete('+ filter +')', {
|
||||
elem: tabElem,
|
||||
index: index
|
||||
index: index,
|
||||
id: hasId
|
||||
});
|
||||
}
|
||||
|
||||
@ -202,10 +225,11 @@ layui.define('jquery', function(exports){
|
||||
}
|
||||
|
||||
// 开启关闭图标
|
||||
if(othis.attr('lay-allowclose')){
|
||||
var allowclose = othis.attr('lay-allowclose');
|
||||
if(allowclose && allowclose !== 'false'){
|
||||
title.find('li').each(function(){
|
||||
var li = $(this);
|
||||
if(!li.find('.'+CLOSE)[0]){
|
||||
if(!li.find('.'+CLOSE)[0] && li.attr('lay-allowclose') !== 'false'){
|
||||
var close = $('<i class="layui-icon layui-icon-close layui-unselect '+ CLOSE +'"></i>');
|
||||
close.on('click', call.tabDelete);
|
||||
li.append(close);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user