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

优化 tab 在添加和切换选项时的折叠和展开功能

pull/1273/head
贤心 2023-06-05 00:12:42 +08:00
parent 43e30022b4
commit 48e58c9cb1
1 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/modules/element.js
View File

@ -49,8 +49,10 @@ layui.define('jquery', function(exports){
barElem[0] ? barElem.before(li) : titElem.append(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.content || '') +'</div>');
call.hideTabMore(true); // call.hideTabMore(true);
call.tabAuto(); // 是否添加即切换
options.change && this.tabChange(filter, options.id);
call.tabAuto(options.change);
return this; return this;
}; };
@ -180,19 +182,22 @@ layui.define('jquery', function(exports){
} }
// Tab 自适应 // Tab 自适应
,tabAuto: function(){ ,tabAuto: function(spread){
var SCROLL = 'layui-tab-scroll', MORE = 'layui-tab-more', BAR = 'layui-tab-bar' var SCROLL = 'layui-tab-scroll';
,CLOSE = 'layui-tab-close', that = this; var MORE = 'layui-tab-more';
var BAR = 'layui-tab-bar';
var CLOSE = 'layui-tab-close';
var that = this;
$('.layui-tab').each(function(){ $('.layui-tab').each(function(){
var othis = $(this) var othis = $(this);
,title = othis.children('.layui-tab-title') var title = othis.children('.layui-tab-title');
,item = othis.children('.layui-tab-content').children('.layui-tab-item') var item = othis.children('.layui-tab-content').children('.layui-tab-item');
,STOPE = 'lay-stope="tabmore"' var STOPE = 'lay-stope="tabmore"';
,span = $('<span class="layui-unselect layui-tab-bar" '+ STOPE +'><i '+ STOPE +' class="layui-icon">&#xe61a;</i></span>'); var span = $('<span class="layui-unselect layui-tab-bar" '+ STOPE +'><i '+ STOPE +' class="layui-icon">&#xe61a;</i></span>');
if(that === window && device.ie != 8){ if(that === window && device.ie != 8){
call.hideTabMore(true) // call.hideTabMore(true)
} }
// 开启关闭图标 // 开启关闭图标
@ -210,16 +215,24 @@ layui.define('jquery', function(exports){
if(typeof othis.attr('lay-unauto') === 'string') return; if(typeof othis.attr('lay-unauto') === 'string') return;
// 响应式 // 响应式
if(title.prop('scrollWidth') > title.outerWidth()+1){ if(
title.prop('scrollWidth') > title.outerWidth() + 1 ||
title.height() > title.find('li').eq(0).height()
){
// 若执行是来自于切换，则自动展开
spread && title.addClass(MORE);
if(title.find('.'+BAR)[0]) return; if(title.find('.'+BAR)[0]) return;
title.append(span); title.append(span);
othis.attr('overflow', ''); othis.attr('overflow', '');
// 展开图标事件
span.on('click', function(e){ span.on('click', function(e){
title[this.title ? 'removeClass' : 'addClass'](MORE); var isSpread = title.hasClass(MORE);
this.title = this.title ? '' : '收缩'; title[isSpread ? 'removeClass' : 'addClass'](MORE);
}); });
} else { } else {
title.find('.'+BAR).remove(); title.find('.'+ BAR).remove();
othis.removeAttr('overflow'); othis.removeAttr('overflow');
} }
}); });
@ -530,7 +543,7 @@ layui.define('jquery', function(exports){
}); });
dom.on('click', '.layui-tab-title li', call.tabClick); // Tab 切换 dom.on('click', '.layui-tab-title li', call.tabClick); // Tab 切换
dom.on('click', call.hideTabMore); // 隐藏展开的 Tab // dom.on('click', call.hideTabMore); // 隐藏展开的 Tab
$(window).on('resize', call.tabAuto); // 自适应 $(window).on('resize', call.tabAuto); // 自适应
exports(MOD_NAME, element); exports(MOD_NAME, element);