diff --git a/docs/tabs/index.md b/docs/tabs/index.md index d8d476b0..f919214b 100644 --- a/docs/tabs/index.md +++ b/docs/tabs/index.md @@ -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'); // 关闭所有标签 ``` diff --git a/examples/tabs.html b/examples/tabs.html index 61fdf975..efc73c72 100644 --- a/examples/tabs.html +++ b/examples/tabs.html @@ -287,6 +287,8 @@ }], click: function(data, othis, event) { var index = this.elem.index(); // 获取活动标签索引 + var layid = this.elem.attr('lay-id'); + // 新增标签操作 if (data.action === 'add') { // 在当前活动标签右侧新增标签页 diff --git a/src/modules/tabs.js b/src/modules/tabs.js index c6ebd516..9ae8b1e1 100644 --- a/src/modules/tabs.js +++ b/src/modules/tabs.js @@ -303,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') { @@ -322,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'); @@ -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; } @@ -734,10 +744,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); }, /**