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

refactor: 重构 tabs 代码大量细节

pull/2477/head
贤心 2025-03-05 19:36:54 +08:00
parent c1aa3bc6c9
commit 82a497927c
3 changed files with 422 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
examples/tabs.html
View File

@ -7,10 +7,11 @@
<link rel="stylesheet" href="../src/css/layui.css"> <link rel="stylesheet" href="../src/css/layui.css">
</head> </head>
<body> <body>
<div class="layui-container layui-padding-3"> <div class="layui-container layui-padding-3 layui-text">
<h2>动态操作</h2>
<div class="layui-tabs layui-hide-v" id="demoTabs1" lay-options="{closable: true, headerMode:'scroll'}"> <div class="layui-tabs layui-hide-v" id="demoTabs1" lay-options="{closable: true, headerMode:'scroll'}">
<ul class="layui-tabs-header"> <ul class="layui-tabs-header">
<li lay-id="aaa" lay-unclosed="true" class="layui-this">Tab1</li> <li lay-id="aaa" lay-closable="false">Tab1</li>
<li lay-id="bbb">Tab2</li> <li lay-id="bbb">Tab2</li>
<li lay-id="ccc">Tab3</li> <li lay-id="ccc">Tab3</li>
<li lay-id="ddd">Tab4</li> <li lay-id="ddd">Tab4</li>
@ -18,7 +19,7 @@
<li lay-id="fff">Tab6</li> <li lay-id="fff">Tab6</li>
</ul> </ul>
<div class="layui-tabs-body"> <div class="layui-tabs-body">
<div class="layui-tabs-item layui-show">Tab Content-1</div> <div class="layui-tabs-item">Tab Content-1</div>
<div class="layui-tabs-item">Tab Content-2</div> <div class="layui-tabs-item">Tab Content-2</div>
<div class="layui-tabs-item">Tab Content-3</div> <div class="layui-tabs-item">Tab Content-3</div>
<div class="layui-tabs-item">Tab Content-4</div> <div class="layui-tabs-item">Tab Content-4</div>
@ -35,14 +36,10 @@
<button class="layui-btn" lay-on="add">添加 Tab</button> <button class="layui-btn" lay-on="add">添加 Tab</button>
</div> </div>
<div class="layui-py"> <h2>方法渲染</h2>
方法渲染： <div id="demoTabs2"></div>
<hr class="layui-my">
<div id="demoTabs2"></div>
</div>
<div class="layui-py">卡片风格：</div>
<h2>卡片风格</h2>
<div class="layui-tabs layui-tabs-card" lay-options="{index: 1}"> <div class="layui-tabs layui-tabs-card" lay-options="{index: 1}">
<ul class="layui-tabs-header"> <ul class="layui-tabs-header">
<li>标题1</li> <li>标题1</li>
@ -62,8 +59,7 @@
</div> </div>
</div> </div>
<div class="layui-py">卡片 + 边框：</div> <h3>卡片 + 边框</h3>
<div class="layui-tabs layui-tabs-card layui-panel layui-inline"> <div class="layui-tabs layui-tabs-card layui-panel layui-inline">
<ul class="layui-tabs-header layui-bg-tint"> <ul class="layui-tabs-header layui-bg-tint">
<li class="layui-this">标题1</li> <li class="layui-this">标题1</li>
@ -94,8 +90,7 @@
</div> </div>
</div> </div>
<div class="layui-py">HASH：</div> <h2>标签 HASH 定位</h2>
<div class="layui-tabs layui-hide-v" id="demoTabs-hash"> <div class="layui-tabs layui-hide-v" id="demoTabs-hash">
<ul class="layui-tabs-header"> <ul class="layui-tabs-header">
<li lay-id="A1" class="layui-this"><a href="#A1">标题题题题题题1</a></li> <li lay-id="A1" class="layui-this"><a href="#A1">标题题题题题题1</a></li>
@ -109,8 +104,7 @@
</ul> </ul>
</div> </div>
<div class="layui-py">标签嵌套：</div> <h2>标签嵌套</h2>
<div class="layui-tabs layui-tabs-card" lay-options="{headerMode:'normal'}"> <div class="layui-tabs layui-tabs-card" lay-options="{headerMode:'normal'}">
<ul class="layui-tabs-header"> <ul class="layui-tabs-header">
<li class="layui-this">标题1</li> <li class="layui-this">标题1</li>
@ -150,10 +144,8 @@
</div> </div>
</div> </div>
<div class="layui-py" id="demoTabs3"> <h2>给任意元素绑定 tabs 切换功能</h2>
给任意元素添加 Tab 功能： <div id="demoTabs3">
<hr class="layui-my">
<style> <style>
#demoTabsHeader .layui-btn.layui-this{border-color: #eee; color: #000; background: none;} #demoTabsHeader .layui-btn.layui-this{border-color: #eee; color: #000; background: none;}
#demoTabsBody .test-item{display: none;} #demoTabsBody .test-item{display: none;}
@ -168,18 +160,19 @@
<div class="test-item">内容 222</div> <div class="test-item">内容 222</div>
<div class="test-item">内容 333</div> <div class="test-item">内容 333</div>
</div> </div>
</div> </div>
</div> </div>
<script src="../src/layui.js"></script> <script src="../src/layui.js"></script>
<script> <script>
layui.use(['tabs', 'form', 'util'], function(){ layui.use(function() {
var tabs = layui.tabs var tabs = layui.tabs
var util = layui.util; var util = layui.util;
var layer = layui.layer;
var dropdown = layui.dropdown;
// 事件 // 自定义事件
util.on({ util.on({
add: function(){ add: function(){
var n = Math.random()*1000 | 0; // 演示标记 var n = Math.random()*1000 | 0; // 演示标记
@ -198,6 +191,69 @@
} }
}); });
// tabs 关闭前的事件
tabs.on('beforeClose(demoTabs1)', function(data) {
console.log('beforeClose', data);
// 关闭确认提示
layer.confirm(`确定关闭标签「${this.innerText}」吗？`, function(i) {
tabs.close('demoTabs1', data.index, true); // 强制关闭对应的标签项
layer.close(i); // 关闭确认框
});
return false; // 阻止标签默认关闭
});
// tabs 关闭后的事件
tabs.on('afterClose(demoTabs1)', function(data) {
console.log('afterClose', data);
});
// tabs 切换前的事件
tabs.on('beforeChange(demoTabs1)', function(data) {
console.log('beforeChange', data);
// 切换确认提示
/*layer.confirm(`确定从「当前标签」切换到标签「${this.innerText}」吗？`, function(i) {
tabs.change('demoTabs1', data.to.index, true); // 强制切换
layer.close(i); // 关闭确认框
});
return false; // 阻止标签默认关闭*/
});
// tabs 切换后的事件
tabs.on('afterChange(demoTabs1)', function(data) {
console.log('afterChange', data);
});
// 为标签头添加上下文菜单
dropdown.render({
elem: '#demoTabs1 .layui-tabs-header>li',
trigger: 'contextmenu',
data: [{
title: '关闭',
type: 'this'
}, {
title: '关闭其他标签页',
type: 'other'
}, {
title: '关闭右侧标签页',
type: 'right'
}, {
type: '-'
}, {
title: '关闭所有标签页',
type: 'all'
}],
click: function(data, othis, event) {
var index = this.elem.index();
if (data.type === 'this') {
tabs.close('demoTabs1', index); // 关闭当前标签
} else {
tabs.closeMult('demoTabs1', data.type, index); // 批量关闭标签
}
}
});
// 方法渲染 // 方法渲染
tabs.render({ tabs.render({
elem: '#demoTabs2', elem: '#demoTabs2',
@ -225,10 +281,7 @@
tabs.render({ tabs.render({
elem: '#demoTabs3', elem: '#demoTabs3',
header: ['#demoTabsHeader', '>button'], header: ['#demoTabsHeader', '>button'],
body: ['#demoTabsBody', '>.test-item'], body: ['#demoTabsBody', '>.test-item']
change: function(obj) {
console.log(obj);
}
}); });
}); });
</script> </script>

8
src/css/layui.css
View File

@ -1278,19 +1278,21 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
/* 下拉菜单 */ /* 下拉菜单 */
.layui-dropdown{position: absolute; left: -999999px; top: -999999px; z-index: 77777777; margin: 5px 0; min-width: 100px;} .layui-dropdown{position: absolute; left: -999999px; top: -999999px; z-index: 77777777; margin: 5px 0; min-width: 100px;}
.layui-dropdown:before{content:""; position: absolute; width: 100%; height: 6px; left: 0; top: -6px;} .layui-dropdown:before{content:""; position: absolute; width: 100%; height: 6px; left: 0; top: -6px;}
.layui-dropdown-shade{top: 0; left: 0; width: 100%; height: 100%; _height: expression(document.body.offsetHeight+"px"); position: fixed; _position: absolute; pointer-events: auto;} .layui-dropdown-shade{top: 0; left: 0; width: 100%; height: 100%; position: fixed; pointer-events: auto;}
/* Tabs 标签页 */ /* Tabs 标签页 */
.layui-tabs{position: relative;} .layui-tabs{position: relative;}
.layui-tabs *{box-sizing: border-box;} .layui-tabs *{box-sizing: border-box;}
.layui-tabs.layui-hide-v{overflow: hidden;} .layui-tabs.layui-hide-v{overflow: hidden;}
.layui-tabs-header{position: relative; left: 0; height: 40px; white-space: nowrap; font-size: 0; transition: all .16s; -webkit-transition: all .16s;} .layui-tabs-header{position: relative; left: 0; height: 40px; padding: 0 !important; white-space: nowrap; font-size: 0; transition: all .16s; -webkit-transition: all .16s;}
.layui-tabs-header:after, .layui-tabs-header:after,
.layui-tabs-scroll:after{content: ""; position: absolute; left: 0; bottom: 0; z-index: 0; width: 100%; border-bottom: 1px solid #eee;} .layui-tabs-scroll:after{content: ""; position: absolute; left: 0; bottom: 0; z-index: 0; width: 100%; border-bottom: 1px solid #eee;}
.layui-tabs-header li{position: relative; display: inline-block; vertical-align: middle; line-height: 40px; margin: 0 !important; padding: 0 16px; text-align: center; cursor: pointer; font-size: 14px; transition: all .16s; -webkit-transition: all .16s;} .layui-tabs-header li{position: relative; display: inline-block; vertical-align: middle; line-height: 40px; margin: 0 !important; padding: 0 16px; text-align: center; cursor: pointer; font-size: 14px; transition: all .16s; -webkit-transition: all .16s;}
.layui-tabs-header li:first-child{margin-left: 0;} .layui-tabs-header li:first-child{margin-left: 0;}
.layui-tabs-header li a{display: block; padding: 0 16px; margin: 0 -16px;} .layui-tabs-header li a{display: block; padding: 0 16px; margin: 0 -16px; color: inherit;}
.layui-tabs-header li a:hover{text-decoration: none;}
.layui-tabs-header li:hover,
.layui-tabs-header .layui-this{color: #16baaa;} .layui-tabs-header .layui-this{color: #16baaa;}
.layui-tabs-header .layui-this:after{content: ""; position: absolute; left:0; top: 0; z-index: 1; width: 100%; height: 100%; border-bottom: 3px solid #16baaa; box-sizing: border-box; pointer-events: none;} .layui-tabs-header .layui-this:after{content: ""; position: absolute; left:0; top: 0; z-index: 1; width: 100%; height: 100%; border-bottom: 3px solid #16baaa; box-sizing: border-box; pointer-events: none;}
.layui-tabs-header .layui-badge, .layui-tabs-header .layui-badge,

549
src/modules/tabs.js
View File

@ -15,8 +15,8 @@ layui.define('component', function(exports) {
// 默认配置 // 默认配置
config: { config: {
elem: '.layui-tabs', elem: '.layui-tabs',
trigger: 'click', // 触发事件 trigger: 'click', // 标签切换的触发事件
headerMode: 'auto' // 标签头部的显示模式 headerMode: 'auto' // 标签头部的显示模式 auto | scroll | normal
}, },
CONST: { CONST: {
@ -25,8 +25,7 @@ layui.define('component', function(exports) {
CLOSE: 'layui-tabs-close', CLOSE: 'layui-tabs-close',
BODY: 'layui-tabs-body', BODY: 'layui-tabs-body',
ITEM: 'layui-tabs-item', ITEM: 'layui-tabs-item',
CARD: 'layui-tabs-card', CARD: 'layui-tabs-card'
TRIGGER_NAME: 'LAY_TABS_ELEM_callback'
}, },
isRenderOnEvent: false, isRenderOnEvent: false,
@ -37,70 +36,70 @@ layui.define('component', function(exports) {
var options = that.config; var options = that.config;
// 标签页元素项 // 标签页元素项
that.elemHeader = ['.'+ component.CONST.HEADER + ':eq(0)', '>li']; that.headerElem = ['.'+ component.CONST.HEADER + ':eq(0)', '>li'];
that.elemBody = ['.'+ component.CONST.BODY + ':eq(0)', '>.'+ component.CONST.ITEM]; that.bodyElem = ['.'+ component.CONST.BODY + ':eq(0)', '>.'+ component.CONST.ITEM];
// 获取头部和内容元素 // 获取标签容器中的 header body 相关元素
that.elemItem = function(){ that.getContainer = function() {
var thisElem = that.thisElem || options.elem; var elem = that.documentElem || options.elem;
return { return {
header: { header: {
elem: thisElem.find(that.elemHeader[0]), elem: elem.find(that.headerElem[0]),
items: thisElem.find(that.elemHeader.join('')) items: elem.find(that.headerElem.join(''))
}, },
body: { body: {
elem: thisElem.find(that.elemBody[0]), elem: elem.find(that.bodyElem[0]),
items: thisElem.find(that.elemBody.join('')) items: elem.find(that.bodyElem.join(''))
} }
}; };
}; };
// 如果传入 header 参数 // 若 header 选项类型为数组
if (layui.type(options.header) === 'array') { if (layui.type(options.header) === 'array') {
if (options.header.length === 0) return; if (options.header.length === 0) return;
// 是否为元素绑定 // 给任意元素绑定 tabs 切换功能
if (typeof options.header[0] === 'string') { if (typeof options.header[0] === 'string') {
that.elemHeader = options.header.concat(); that.headerElem = options.header.concat();
that.thisElem = $('body'); that.documentElem = $(document);
} else { // 方法传值渲染 } else { // 方法传值渲染
that.elemView = $('<div class="layui-tabs"></div>'); that.elemView = $('<div class="layui-tabs"></div>');
if (options.className) that.elemView.addClass(options.className); if (options.className) that.elemView.addClass(options.className);
var elemHeader = $('<ul class="layui-tabs-header"></ul>'); var headerElem = $('<ul class="layui-tabs-header"></ul>');
var elemBody = $('<div class="layui-tabs-body"></div>'); var bodyElem = $('<div class="layui-tabs-body"></div>');
// 生成标签项 // 生成标签项
layui.each(options.header, function(i, item){ layui.each(options.header, function(i, item){
var elemHeaderItem = that.renderHeaderItem(item); var elemHeaderItem = that.renderHeaderItem(item);
elemHeader.append(elemHeaderItem); headerElem.append(elemHeaderItem);
}); });
layui.each(options.body, function(i, item){ layui.each(options.body, function(i, item){
var elemBodyItem = that.renderBodyItem(item); var elemBodyItem = that.renderBodyItem(item);
elemBody.append(elemBodyItem); bodyElem.append(elemBodyItem);
}); });
that.elemView.append(elemHeader).append(elemBody); that.elemView.append(headerElem).append(bodyElem);
options.elem.html(that.elemView); options.elem.html(that.elemView);
} }
} else { } else {
that.renderClose(); // 初始化标签关闭结构 that.renderClose(); // 初始化标签关闭结构
} }
// 如果传入 body 参数 // 若 body 选项类型为数组
if (layui.type(options.body) === 'array') { if (layui.type(options.body) === 'array') {
if (typeof options.body[0] === 'string') { if (typeof options.body[0] === 'string') {
that.thisElem = $('body'); that.documentElem = $(document);
that.elemBody = options.body.concat(); that.bodyElem = options.body.concat();
} }
} }
// 初始选中项 // 初始选中项
var data = that.data(); var data = that.data();
if ('index' in options && data.index != options.index) { if ('index' in options && data.index != options.index) {
that.change(that.findHeaderItem(options.index)); that.change(that.findHeaderItem(options.index), true);
} else if (data.index === -1) { } else if (data.index === -1) { // 初始选中项为空时，默认选中第一个
that.change(that.findHeaderItem(0)); that.change(that.findHeaderItem(0), true);
} }
// 初始化滚动结构 // 初始化滚动结构
@ -112,41 +111,45 @@ layui.define('component', function(exports) {
} }
// 回调 // 回调
typeof options.ready === 'function' && options.ready(data); typeof options.afterRender === 'function' && options.afterRender(data);
layui.event.call(options.elem[0], component.CONST.MOD_NAME, 'ready('+ options.id +')', data); // 事件
// 渲染成功后的事件
layui.event.call(
options.elem[0],
component.CONST.MOD_NAME,
'afterRender('+ options.id +')',
data
);
}, },
// 事件 // 事件
events: function() { events: function() {
var that = this; var that = this;
var options = that.config; var options = that.config;
var elemItem = that.elemItem(); var container = that.getContainer();
var TRIGGER_NAME = component.CONST.TRIGGER_NAME; var MOD_NAME = component.CONST.MOD_NAME;
var thisElem = that.thisElem ? elemItem.header.elem : options.elem; var TRIGGER_NAMESPACE = '.lay_'+ MOD_NAME + '_trigger';
var delegatedElement = that.documentElem ? container.header.elem : options.elem;
// 移除重复事件 // 标签头部事件
if (thisElem.data(TRIGGER_NAME)) { var trigger = options.trigger + TRIGGER_NAMESPACE;
thisElem.off(options.trigger, thisElem.data(TRIGGER_NAME)); var elemHeaderItem = that.documentElem ? that.headerElem[1] : that.headerElem.join('');
} delegatedElement.off(trigger).on(trigger, elemHeaderItem, function() {
// 点击标签头部
var elemHeaderItem = that.thisElem ? that.elemHeader[1] : that.elemHeader.join('');
thisElem.data(TRIGGER_NAME, function(){
that.change($(this)); that.change($(this));
}).on(options.trigger, elemHeaderItem, thisElem.data(TRIGGER_NAME)); });
// resize 事件 // 窗口 resize 事件
if (!inner.onresize) { if (!inner.onresize) {
var timer; var timer;
$(window).on('resize', function(){ $(window).on('resize', function() {
clearTimeout(timer); clearTimeout(timer);
timer = setTimeout(function(){ timer = setTimeout(function(){
layui.each(component.cache.id, function(key){ layui.each(component.cache.id, function(key) {
var that = component.getThis(key); var that = component.getThis(key);
if(!that) return; if(!that) return;
that.roll('init'); that.roll('init');
}); });
},50); }, 50);
}); });
inner.onresize = true; inner.onresize = true;
} }
@ -164,116 +167,160 @@ layui.define('component', function(exports) {
/** /**
* 增加标签 * 增加标签
* @param {*} obj * @param {Object} opts
* @param {string} opts.title - 标签标题
* @param {string} opts.content - 标签内容
* @param {string} opts.id - 标签的 lay-id 属性值
* @param {string} [opts.index] - 活动标签索引，默认取当前选中标签的索引
* @param {('append'|'prepend'|'after'|'before')} [opts.mode='append'] - 标签插入方式
* @param {string} [opts.closable] - 标签是否可关闭。初始值取决于 options.closable
* @param {string} [opts.headerItem] - 自定义标签头部元素
* @param {string} [opts.bodyItem] - 自定义标签内容元素
* @param {Function} [opts.done] - 标签添加成功后执行的回调函数
*/ */
Class.prototype.add = function(obj){ Class.prototype.add = function(opts) {
var that = this; var that = this;
var options = that.config; var options = that.config;
var elemItem = that.elemItem(); var container = that.getContainer();
var newHeaderItem = that.renderHeaderItem(obj); var newHeaderItem = that.renderHeaderItem(opts);
var newBodyItem = that.renderBodyItem(obj); var newBodyItem = that.renderBodyItem(opts);
// 插入方式 // 插入方式
if (obj.mode === 'curr') { // 在当前标签后插入 if (/(before|after)/.test(opts.mode)) { // 在活动标签前后插入
var data = that.data(); var data = that.data();
data.thisHeader.after(newHeaderItem); var hasOwnIndex = opts.hasOwnProperty('index');
data.thisBody.after(newBodyItem); var headerItem = hasOwnIndex ? that.findHeaderItem(opts.index) : data.thisHeaderItem;
} else { var bodyItem = hasOwnIndex ? that.findBodyItem(opts.index) : data.thisHeaderItem;
headerItem[opts.mode](newHeaderItem);
bodyItem[opts.mode](newBodyItem);
} else { // 在标签最前后插入
var mode = ({ var mode = ({
prepend: 'prepend' prepend: 'prepend', // 插入标签到最前
,append: 'append' append: 'append' // 插入标签到最后
})[obj.mode || 'append'] || 'append'; })[opts.mode || 'append'] || 'append';
elemItem.header.elem[mode](newHeaderItem); container.header.elem[mode](newHeaderItem);
elemItem.body.elem[mode](newBodyItem); container.body.elem[mode](newBodyItem);
} }
// 将插入项切换为当前标签 // 将插入项切换为当前标签
that.change(newHeaderItem); that.change(newHeaderItem, true);
// 回调 // 回调
var params = that.data(); var params = that.data();
typeof obj.done === 'function' && obj.done(params); typeof opts.done === 'function' && opts.done(params);
typeof options.add === 'function' && options.add(params);
layui.event.call(newHeaderItem[0], component.CONST.MOD_NAME, 'add('+ options.id +')', params); // 事件
}; };
// 关闭指定标签 /**
Class.prototype.close = function(thisHeader) { * 关闭指定标签
if(!thisHeader || !thisHeader[0]) return; * @param {Object} thisHeaderItem - 当前标签头部项元素
* @param {boolean} force - 是否强制删除
*/
Class.prototype.close = function(thisHeaderItem, force) {
if(!thisHeaderItem || !thisHeaderItem[0]) return;
var that = this; var that = this;
var options = that.config; var options = that.config;
var index = thisHeader.index(); var index = thisHeaderItem.index();
if (!thisHeader[0]) return; if (!thisHeaderItem[0]) return;
// 不可关闭项 // 标签是否不可关闭
if (thisHeader.attr('lay-unclosed')) return; if (thisHeaderItem.attr('lay-closable') === 'false') {
return;
}
// 如果关闭的是当前标签，则更换当前标签下标 // 当前标签相关数据
if (thisHeader.hasClass(component.CONST.CLASS_THIS)) { var params = that.data();
if (thisHeader.next()[0]) {
that.change(thisHeader.next()); // 标签关闭前的事件。若非强制关闭，可则根据事件的返回结果决定是否关闭
} else if(thisHeader.prev()[0]) { if (!force) {
that.change(thisHeader.prev()); var closable = layui.event.call(
thisHeaderItem[0],
component.CONST.MOD_NAME,
'beforeClose('+ options.id +')',
$.extend(params, {
index: thisHeaderItem.index()
})
);
// 是否阻止关闭
if (closable === false) {
return;
}
}
// 如果关闭的是当前标签，则更换当前标签索引
if (thisHeaderItem.hasClass(component.CONST.CLASS_THIS)) {
if (thisHeaderItem.next()[0]) {
that.change(thisHeaderItem.next(), true);
} else if(thisHeaderItem.prev()[0]) {
that.change(thisHeaderItem.prev(), true);
} }
} }
// 移除元素 // 移除元素
thisHeader.remove(); thisHeaderItem.remove();
that.findBodyItem(index).remove(); that.findBodyItem(index).remove();
that.roll('auto', index); that.roll('auto', index);
// 回调 // 获取当前标签相关数据
var params = that.data(); var params = that.data();
typeof options.close === 'function' && options.close(params);
layui.event.call(params.thisHeader[0], component.CONST.MOD_NAME, 'close('+ options.id +')', params); // 事件 // 标签关闭后的事件
layui.event.call(
params.thisHeaderItem[0],
component.CONST.MOD_NAME,
'afterClose('+ options.id +')',
params
);
}; };
// 批量关闭标签 /**
Class.prototype.closeMore = function(type, index) { * 批量关闭标签
* @see tabs.close
*/
Class.prototype.closeMult = function(mode, index) {
var that = this; var that = this;
var options = that.config; var options = that.config;
var elemItem = that.elemItem(); var container = that.getContainer();
var data = that.data(); var data = that.data();
var headers = elemItem.header.items; var headers = container.header.items;
var bodys = elemItem.body.items; var bodys = container.body.items;
var FILTER = ':not([lay-unclosed])'; var DISABLED_CLOSE_SELECTOR = '[lay-closable="false"]'; // 不可关闭标签选择器
var FILTER = ':not('+ DISABLED_CLOSE_SELECTOR +')'; // 不可关闭标签过滤器
index = index === undefined ? data.index : index; index = index === undefined ? data.index : index;
// 遍历 // 将标签头 lay-closable 属性值同步到 body 项
headers.each(function(i){ headers.each(function(i) {
var othis = $(this); var othis = $(this);
var unclosed = othis.attr('lay-unclosed'); var closableAttr = othis.attr('lay-closable');
if (closableAttr) {
// 标注不可关闭项 bodys.eq(i).attr('lay-closable', closableAttr);
if (unclosed) {
bodys.eq(i).attr('lay-unclosed', unclosed);
} }
}); });
// 移交当前标签项 // 若当前选中标签也允许关闭，则尝试寻找不可关闭的标签并将其选中
if (!data.thisHeader.attr('lay-unclosed')) { if (data.thisHeaderItem.attr('lay-closable') !== 'false') {
if(type === 'all' || !type){ if(mode === 'all' || !mode){
var nextHeader = headers.filter(':gt('+ data.index +')[lay-unclosed]').eq(0); var nextHeader = headers.filter(':gt('+ data.index +')'+ DISABLED_CLOSE_SELECTOR).eq(0);
var prevHeader = $(headers.filter(':lt('+ data.index +')[lay-unclosed]').get().reverse()).eq(0); var prevHeader = $(headers.filter(':lt('+ data.index +')'+ DISABLED_CLOSE_SELECTOR).get().reverse()).eq(0);
if (nextHeader[0]) { if (nextHeader[0]) {
that.change(nextHeader); that.change(nextHeader, true);
} else if(prevHeader[0]) { } else if(prevHeader[0]) {
that.change(prevHeader); that.change(prevHeader, true);
} }
} else if(index !== data.index) { } else if(index !== data.index) { // 自动切换到活动标签（功能可取消）
that.change(that.findHeaderItem(index)); that.change(that.findHeaderItem(index), true);
} }
} }
// 执行批量关闭标签 // 执行批量关闭标签
if (type === 'other') { // 关闭其他标签 if (mode === 'other') { // 关闭其他标签
headers.eq(index).siblings(FILTER).remove(); headers.eq(index).siblings(FILTER).remove();
bodys.eq(index).siblings(FILTER).remove(); bodys.eq(index).siblings(FILTER).remove();
} else if(type === 'right') { // 关闭右侧标签 } else if(mode === 'right') { // 关闭右侧标签
headers.filter(':gt('+ index +')'+ FILTER).remove(); headers.filter(':gt('+ index +')'+ FILTER).remove();
bodys.filter(':gt('+ index +')'+ FILTER).remove(); bodys.filter(':gt('+ index +')'+ FILTER).remove();
} else { // 关闭所有标签 } else { // 关闭所有标签
@ -281,120 +328,191 @@ layui.define('component', function(exports) {
bodys.filter(FILTER).remove(); bodys.filter(FILTER).remove();
} }
that.roll('auto');
// 回调 // 回调
var params = that.data(); var params = that.data();
typeof options.close === 'function' && options.close(params);
layui.event.call(params.thisHeader[0], component.CONST.MOD_NAME, 'close('+ options.id +')', params); // 事件 // 标签关闭后的事件
layui.event.call(
params.thisHeaderItem[0],
component.CONST.MOD_NAME,
'afterClose('+ options.id +')',
params
);
}; };
// 切换标签 /**
Class.prototype.change = function(thisHeader) { * 切换标签
if (!thisHeader || !thisHeader[0]) return; * @param {Object} thisHeaderItem - 当前标签头部项元素
* @param {boolean} [force=false] - 是否强制切换
* @returns
*/
Class.prototype.change = function(thisHeaderItem, force) {
if (!thisHeaderItem || !thisHeaderItem[0]) return;
var that = this; var that = this;
var options = that.config; var options = that.config;
var index = thisHeader.index(); var index = thisHeaderItem.index();
var thatA = thisHeader.find('a'); var thatA = thisHeaderItem.find('a');
var isLink = typeof thatA.attr('href') === 'string' && thatA.attr('target') === '_blank'; // 是否存在跳转链接 // 是否存在跳转链接
var unselect = typeof thisHeader.attr('lay-unselect') === 'string'; // 是否禁用选中 var isLink = typeof thatA.attr('href') === 'string' && thatA.attr('target') === '_blank';
// 是否不允许选中
var unselect = typeof thisHeaderItem.attr('lay-unselect') === 'string';
// 执行切换 // 不满足切换的条件
if (!(isLink || unselect)) { if (isLink || unselect) {
// 头部 return;
thisHeader.addClass(component.CONST.CLASS_THIS).siblings()
.removeClass(component.CONST.CLASS_THIS);
// 内容
that.findBodyItem(index).addClass(component.CONST.CLASS_SHOW)
.siblings().removeClass(component.CONST.CLASS_SHOW);
} }
// 当前标签相关数据
var params = that.data();
// 标签关闭前的事件。若非强制关闭，可则根据事件的返回结果决定是否关闭
if (!force) {
var enable = layui.event.call(
thisHeaderItem[0],
component.CONST.MOD_NAME,
'beforeChange('+ options.id +')',
$.extend(params, {
from: {
index: params.index,
headerItem: params.thisHeaderItem
},
to: {
index: thisHeaderItem.index(),
headerItem: thisHeaderItem
}
})
);
// 是否阻止切换
if (enable === false) {
return;
}
}
// 执行标签头部切换
thisHeaderItem.addClass(component.CONST.CLASS_THIS).siblings()
.removeClass(component.CONST.CLASS_THIS);
// 执行标签内容切换
that.findBodyItem(index).addClass(component.CONST.CLASS_SHOW)
.siblings().removeClass(component.CONST.CLASS_SHOW);
that.roll('auto', index); that.roll('auto', index);
// 回调 // 重新获取标签相关数据
var params = that.data(); var params = that.data();
typeof options.change === 'function' && options.change(params);
layui.event.call(thisHeader[0], component.CONST.MOD_NAME, 'change('+ options.id +')', params); // 事件 // 标签切换后的事件
layui.event.call(
params.thisHeaderItem[0],
component.CONST.MOD_NAME,
'afterChange('+ options.id +')',
params
);
}; };
// 渲染标签头部项 /**
Class.prototype.renderHeaderItem = function(obj){ * 渲染标签头部项
* @param {Object} opts - 标签项配置信息
*/
Class.prototype.renderHeaderItem = function(opts) {
var that = this; var that = this;
var options = that.config; var options = that.config;
var elemItem = $(obj.headerItem || options.headerItem || '<li></li>'); var headerItem = $(opts.headerItem || options.headerItem || '<li></li>');
elemItem.html(obj.title || 'New Tab'); headerItem.html(opts.title || 'New Tab');
// 追加属性 // 追加属性
layui.each(obj, function(key, value){ layui.each(opts, function(key, value){
if(/^(title|content|mode|done)$/.test(key)) return; if(/^(title|content|mode|done)$/.test(key)) return;
elemItem.attr('lay-'+ key, value); headerItem.attr('lay-'+ key, value);
}); });
// 追加标签关闭元素 // 追加标签关闭元素
that.appendClose(elemItem, obj); that.appendClose(headerItem, opts);
return elemItem; return headerItem;
}; };
// 渲染标签内容项 /**
Class.prototype.renderBodyItem = function(obj) { * 渲染标签内容项
* @param {Object} opts - 标签项配置信息
*/
Class.prototype.renderBodyItem = function(opts) {
var that = this var that = this
var options = that.config var options = that.config
var elemItem = $(obj.bodyItem || options.bodyItem || '<div class="'+ component.CONST.ITEM +'"></div>'); var bodyItem = $(opts.bodyItem || options.bodyItem || '<div class="'+ component.CONST.ITEM +'"></div>');
elemItem.html(obj.content || ''); bodyItem.html(opts.content || '');
return elemItem; return bodyItem;
}; };
// 给某一个标签项追加可关闭元素 /**
Class.prototype.appendClose = function(othis, obj) { * 给某一个标签项追加可关闭元素
* @param {Object} headerItem - 标签项元素
* @param {Object} opts - 标签项配置信息
*/
Class.prototype.appendClose = function(headerItem, opts) {
var that = this var that = this
var options = that.config; var options = that.config;
if(!options.closable) return; if(!options.closable) return;
obj = obj || {}; opts = opts || {};
if (obj.unclosed || othis.attr('lay-unclosed')) return; // 不可关闭项
if (!othis.find('.'+ component.CONST.CLOSE)[0]) { // 不可关闭项
if (opts.closable === 'false' || headerItem.attr('lay-closable') === 'false') {
return;
}
// 可关闭项追加关闭按钮
if (!headerItem.find('.'+ component.CONST.CLOSE)[0]) {
var close = $('<i class="layui-icon layui-icon-close layui-unselect '+ component.CONST.CLOSE +'"></i>'); var close = $('<i class="layui-icon layui-icon-close layui-unselect '+ component.CONST.CLOSE +'"></i>');
close.on('click', function(){ close.on('click', function(){
that.close($(this).parent()); that.close($(this).parent());
return false; return false;
}); });
othis.append(close); headerItem.append(close);
} }
}; };
// 渲染标签可关闭元素 // 渲染标签可关闭元素
Class.prototype.renderClose = function(othis) { Class.prototype.renderClose = function() {
var that = this; var that = this;
var options = that.config; var options = that.config;
var elemItem = that.elemItem(); var container = that.getContainer();
var hasDel = that.cache('close'); var hasDel = that.cache('close');
// 是否开启关闭 // 是否开启关闭
if (options.closable) { if (options.closable) {
if (!hasDel) { if (!hasDel) {
elemItem.header.items.each(function(){ container.header.items.each(function(){
that.appendClose($(this)); that.appendClose($(this));
}); });
that.cache('close', true); that.cache('close', true);
} }
} else if(hasDel) { } else if(hasDel) {
elemItem.header.items.each(function() { container.header.items.each(function() {
$(this).find('.'+ component.CONST.CLOSE).remove(); $(this).find('.'+ component.CONST.CLOSE).remove();
}); });
} }
}; };
// 滚动标签 /**
Class.prototype.roll = function(type, index) { * 标签头滚动
* @param {('auto'|'prev'|'next'|'init')} [mode='next'] - 滚动方式
* @param {number} index - 标签索引。默认取当前选中标签的索引值
* @returns
*/
Class.prototype.roll = function(mode, index) {
var that = this; var that = this;
var options = that.config; var options = that.config;
var elemItem = that.elemItem(); var container = that.getContainer();
var headerElem = elemItem.header.elem; var headerElem = container.header.elem;
var headerItems = elemItem.header.items; var headerItems = container.header.items;
var scrollWidth = headerElem.prop('scrollWidth'); // 实际总长度 var scrollWidth = headerElem.prop('scrollWidth'); // 实际总长度
var outerWidth = Math.ceil(headerElem.outerWidth()); // 可视区域的长度 var outerWidth = Math.ceil(headerElem.outerWidth()); // 可视区域的长度
var tabsLeft = headerElem.data('left') || 0; var tabsLeft = headerElem.data('left') || 0;
@ -418,7 +536,7 @@ layui.define('component', function(exports) {
// 左侧临界值 // 左侧临界值
if (tabsLeft + countWidth < 0) { if (tabsLeft + countWidth < 0) {
tabsLeft = countWidth >= 0 ? countWidth : 0; // 标签的复原位移不能超出 0 tabsLeft = countWidth >= 0 ? countWidth : 0; // 标签的复原位移不能超出 0
return headerElem.css('left', -tabsLeft).data('left', -tabsLeft);; return headerElem.css('left', -tabsLeft).data('left', -tabsLeft);
} }
// 当选中标签溢出在可视区域「右侧」时， // 当选中标签溢出在可视区域「右侧」时，
@ -478,7 +596,8 @@ layui.define('component', function(exports) {
} }
} }
if (type === 'init') return; // 初始化滚动模式
if (mode === 'init') return;
// 重新获取 // 重新获取
scrollWidth = headerElem.prop('scrollWidth') // 实际总长度 scrollWidth = headerElem.prop('scrollWidth') // 实际总长度
@ -486,7 +605,7 @@ layui.define('component', function(exports) {
elemScroll = headerElem.parent('.'+ CLASS_SCROLL); elemScroll = headerElem.parent('.'+ CLASS_SCROLL);
// 左箭头（往右滚动） // 左箭头（往右滚动）
if (type === 'prev') { if (mode === 'prev') {
// 当前的 left 减去可视宽度，用于与上一轮的页签比较 // 当前的 left 减去可视宽度，用于与上一轮的页签比较
var prevLeft = -tabsLeft - outerWidth; var prevLeft = -tabsLeft - outerWidth;
if(prevLeft < 0) prevLeft = 0; if(prevLeft < 0) prevLeft = 0;
@ -499,9 +618,9 @@ layui.define('component', function(exports) {
return false; return false;
} }
}); });
} else if(type === 'auto') { // 自动识别滚动 } else if(mode === 'auto') { // 自动识别滚动
rollToVisibleArea(); rollToVisibleArea();
} else { // 右箭头（往左滚动） } else { // 右箭头（往左滚动） 默认 next
headerItems.each(function(i, item){ headerItems.each(function(i, item){
var li = $(item); var li = $(item);
var left = Math.ceil(li.position().left); var left = Math.ceil(li.position().left);
@ -528,96 +647,101 @@ layui.define('component', function(exports) {
](component.CONST.CLASS_DISABLED); ](component.CONST.CLASS_DISABLED);
}; };
// 根据 id 或 index 获取相关标签头部项 /**
* 根据 id 或 index 获取相关标签头部项
* @param {number|string} index - 标签索引或 id
*/
Class.prototype.findHeaderItem = function(index) { Class.prototype.findHeaderItem = function(index) {
if(!( if(!(
typeof index === 'number' typeof index === 'number'
|| (typeof index === 'string' && index) || (typeof index === 'string' && index)
)) return; )) return;
var headerItems = this.elemItem().header.items; var headerItems = this.getContainer().header.items;
var item = headerItems.filter('[lay-id="'+ index +'"]'); var item = headerItems.filter('[lay-id="'+ index +'"]');
return item[0] ? item : headerItems.eq(index); return item[0] ? item : headerItems.eq(index);
}; };
// 根据 index 获取相关标签内容项 /**
* 根据 index 获取相关标签内容项
* @param {number} index - 标签索引
*/
Class.prototype.findBodyItem = function(index) { Class.prototype.findBodyItem = function(index) {
return this.elemItem().body.items.eq(index); return this.getContainer().body.items.eq(index);
}; };
// 返回给回调的公共信息 /**
* 返回给回调的公共信息
* @returns
*/
Class.prototype.data = function() { Class.prototype.data = function() {
var that = this; var that = this;
var options = that.config; var options = that.config;
var elemItem = that.elemItem(); var container = that.getContainer();
var thisHeader = elemItem.header.items.filter('.'+ component.CONST.CLASS_THIS); var thisHeaderItem = container.header.items.filter('.'+ component.CONST.CLASS_THIS);
var index = thisHeader.index(); var index = thisHeaderItem.index();
return { return {
options: options, // 标签配置信息 options: options, // 标签配置信息
elemItem: elemItem, container: container, // 标签容器的相关元素
thisHeader: thisHeader, // 当前标签头部项 thisHeaderItem: thisHeaderItem, // 当前标签头部项
thisBody: that.findBodyItem(index), // 当前标签内容项 thisBodyItem: that.findBodyItem(index), // 当前标签内容项
index: index, // 当前标签下标 index: index, // 当前标签索引
length: elemItem.header.items.length // 当前标签数 length: container.header.items.length // 当前标签数
} }
}; };
// 扩展组件接口 // 扩展组件接口
$.extend(component, { $.extend(component, {
/** /**
* 增加标签 * 添加标签
* @param {string} id - 标签 ID * @param {string} id - 渲染时的实例 ID
* @param {object} obj - 标签配置信息 * @param {Object} opts - 添加标签的配置项，详见 Class.prototype.add
* @returns
*/ */
add: function(id, obj) { add: function(id, opts) {
var that = component.getThis(id); var that = component.getThis(id);
if(!that) return this; if(!that) return;
that.add(obj); that.add(opts);
}, },
/** /**
* 关闭标签 * 关闭标签
* @param {string} id - 标签 ID * @param {string} id - 渲染时的实例 ID
* @param {number} index - 标签下标 * @param {number} index - 标签索引
* @returns * @param {boolean} [force=false] - 是否强制关闭
*/ */
close: function(id, index) { close: function(id, index, force) {
var that = component.getThis(id); var that = component.getThis(id);
if(!that) return this; if(!that) return;
if(index === undefined) index = that.data().index; // index 若不传，则表示关闭当前标签 if(index === undefined) index = that.data().index; // index 若不传，则表示关闭当前标签
that.close(that.findHeaderItem(index)); that.close(that.findHeaderItem(index), force);
}, },
/** /**
* 关闭多个标签 * 关闭多个标签
* @param {string} id - 标签 ID * @param {string} id - 渲染时的实例 ID
* @param {string} type - 关闭类型，可选值：left、right、other、all * @param {('other'|'right'|'all')} [mode="all"] - 关闭方式
* @param {number} index - 标签下标。若传入，则按 index 所在标签为事件执行关闭操作 * @param {number} index - 活动标签的索引，默认取当前选中标签的索引。一般用于标签右键事件
* @returns
*/ */
closeMore: function(id, type, index) { closeMult: function(id, mode, index, force) {
var that = component.getThis(id); var that = component.getThis(id);
if(!that) return this; if(!that) return;
that.closeMore(type, index); that.closeMult(mode, index, force);
}, },
/** /**
* 切换标签 * 切换标签
* @param {string} id - 标签 ID * @param {string} id - 渲染时的实例 ID
* @param {number} index - 标签下标 * @param {number} index - 标签索引
* @returns
*/ */
change: function(id, index) { change: function(id, index, force) {
var that = component.getThis(id); var that = component.getThis(id);
if(!that) return this; if(!that) return;
that.change(that.findHeaderItem(index)); that.change(that.findHeaderItem(index), force);
}, },
/** /**
* 获取标签信息 * 获取标签信息
* @param {string} id - 标签 ID * @param {string} id - 渲染时的实例 ID
* @returns
*/ */
data: function(id) { data: function(id) {
var that = component.getThis(id); var that = component.getThis(id);
@ -626,34 +750,35 @@ layui.define('component', function(exports) {
/** /**
* 获取标签指定头部项 * 获取标签指定头部项
* @param {string} id - 标签 ID * @param {string} id - 渲染时的实例 ID
* @param {number} index - 标签下标 * @param {number} index - 标签索引
* @returns * @returns
*/ */
headerItem: function(id, index) { getHeaderItem: function(id, index) {
var that = component.getThis(id); var that = component.getThis(id);
return that ? that.findHeaderItem(index) : this; if(!that) return;
return that.findHeaderItem(index);
}, },
/** /**
* 获取标签指定内容项 * 获取标签指定内容项
* @param {string} id - 标签 ID * @param {string} id - 渲染时的实例 ID
* @param {number} index - 标签下标 * @param {number} index - 标签索引
* @returns * @returns
*/ */
bodyItem: function(id, index) { getBodyItem: function(id, index) {
var that = component.getThis(id); var that = component.getThis(id);
return that ? that.findBodyItem(index) : this; if(!that) return;
return that.findBodyItem(index);
}, },
/** /**
* 调整视图结构 * 刷新标签视图结构
* @param {string} id - 标签 ID * @param {string} id - 渲染时的实例 ID
* @returns
*/ */
setView: function(id) { refresh: function(id) {
var that = component.getThis(id); var that = component.getThis(id);
if (!that) return this; if (!that) return;
that.roll('auto'); that.roll('auto');
} }
}); });