-
内容-1
+
单独设置「标签1」不允许删除 2.9.11+
内容-2
内容-3
内容-4
@@ -191,6 +191,7 @@ layui.use(function(){
| content | 选项卡的内容,支持传入 `html` | string | - |
| id | 选项卡标题元素的 `lay-id` 属性值 | string | - |
| change | 是否添加 tab 完毕后即自动切换 | boolean | `false` |
+| allowClose
2.9.11+| 是否开启删除图标 | 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+)
+});
+```
+
+
tab 删除前的事件 2.9.11+
+
+`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 时阻止关闭对应的选项卡
});
```
diff --git a/src/css/layui.css b/src/css/layui.css
index 30826b26..c537aa78 100644
--- a/src/css/layui.css
+++ b/src/css/layui.css
@@ -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;}
diff --git a/src/modules/element.js b/src/modules/element.js
index 3d73631a..bcbcf812 100644
--- a/src/modules/element.js
+++ b/src/modules/element.js
@@ -48,7 +48,7 @@ layui.define('jquery', function(exports){
}() +'>'+ (options.title || 'unnaming') +'';
barElem[0] ? barElem.before(li) : titElem.append(li);
- contElem.append('
'+ (options.content || '') +'
');
+ contElem.append('
'+ (options.content || '') +'
');
// 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 = $('
');
close.on('click', call.tabDelete);
li.append(close);