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

feat(tab): 支持选项卡滚动模式

pull/2341/head
sight 2024-11-18 23:45:51 +08:00
parent 3c8d075a55
commit 1026e9986a
2 changed files with 88 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/layui.css
View File

@ -1384,6 +1384,8 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
.layui-tab-more li.layui-this:after{border-bottom-color: #eee; border-radius: 2px;}
.layui-tab-more .layui-tab-bar .layui-icon{top: -2px; top: 3px\0; -webkit-transform: rotate(180deg); transform: rotate(180deg);}
:root .layui-tab-more .layui-tab-bar .layui-icon{top: -2px\0/IE9;}
.layui-tab-scroll .layui-tab-bar{display: none;}
.layui-tab-border-bottom-container{border-bottom-color: #eee; border-bottom-width: 1px; border-style: none none solid; bottom: 0; left: 0; pointer-events: none; position: absolute; width: 100%; z-index: 9;}
.layui-tab-content{padding: 15px 0;}

117
src/modules/element.js
View File

@ -231,9 +231,6 @@ layui.define('jquery', function(exports){
// Tab 自适应
,tabAuto: function(spread, elem){
var SCROLL = 'layui-tab-scroll';
var MORE = 'layui-tab-more';
var BAR = 'layui-tab-bar';
var CLOSE = 'layui-tab-close';
var that = this;
var targetElem = elem || $('.layui-tab');
@ -241,9 +238,6 @@ layui.define('jquery', function(exports){
targetElem.each(function(){
var othis = $(this);
var title = othis.children('.layui-tab-title');
var item = othis.children('.layui-tab-content').children('.layui-tab-item');
var STOPE = 'lay-stope="tabmore"';
var span = $('<span class="layui-unselect layui-tab-bar" '+ STOPE +'><i '+ STOPE +' class="layui-icon">&#xe61a;</i></span>');
if(that === window && device.ie != 8){
// call.hideTabMore(true)
@ -262,33 +256,11 @@ layui.define('jquery', function(exports){
});
}
if(typeof othis.attr('lay-unauto') === 'string') return;
// 响应式
if(
title.prop('scrollWidth') > title.outerWidth() + 1 || (
title.find('li').length && title.height() > function(height){
return height + height/2;
}(title.find('li').eq(0).height())
)
){
// 若执行是来自于切换，则自动展开
(
spread === 'change' && title.data('LAY_TAB_CHANGE')
) && title.addClass(MORE);
if(title.find('.'+BAR)[0]) return;
title.append(span);
othis.attr('overflow', '');
// 展开图标事件
span.on('click', function(e){
var isSpread = title.hasClass(MORE);
title[isSpread ? 'removeClass' : 'addClass'](MORE);
});
// 当超出可用空间时，tab 是否应在多行之间换行，或者是否开启滚动模式
if(typeof othis.attr('lay-nowrap') === 'string'){
call.tabNoWrap(othis, spread);
}else{
title.find('.'+ BAR).remove();
othis.removeAttr('overflow');
call.tabWrap(othis, spread);
}
});
}
@ -300,6 +272,87 @@ layui.define('jquery', function(exports){
tsbTitle.find('.layui-tab-bar').attr('title','');
}
}
,tabWrap: function(tabElem, spread){
var tabElem = tabElem;
if(typeof tabElem.attr('lay-unauto') === 'string') return;
var BAR = 'layui-tab-bar';
var MORE = 'layui-tab-more';
var STOPE = 'lay-stope="tabmore"';
var titleElem = tabElem.children('.layui-tab-title');
var checkOverflow = function(titleElem){
if(titleElem.prop('scrollWidth') > titleElem.outerWidth() + 1) return true;
var titleItemsElem = titleElem.find('li');
if(titleItemsElem.length){
var titleFirstElHeight = titleItemsElem.eq(0).height();
return titleElem.height() > titleFirstElHeight + titleFirstElHeight/2;
}
}(titleElem);
if(checkOverflow){
// 若执行是来自于切换，则自动展开
if( spread === 'change' && titleElem.data('LAY_TAB_CHANGE')){
titleElem.addClass(MORE)
}
if(titleElem.find('.'+BAR)[0]) return;
var span = $('<span class="layui-unselect layui-tab-bar" '+ STOPE +'><i '+ STOPE +' class="layui-icon">&#xe61a;</i></span>');
titleElem.append(span);
tabElem.attr('overflow', '');
// 展开图标事件
span.on('click', function(e){
var isSpread = titleElem.hasClass(MORE);
titleElem[isSpread ? 'removeClass' : 'addClass'](MORE);
});
}else{
titleElem.find('.'+ BAR).remove();
tabElem.removeAttr('overflow');
}
}
,tabNoWrap: function(tabElem, spread){
var tabElem = tabElem;
if(typeof tabElem.attr('lay-unauto') === 'string') return;
var BAR = 'layui-tab-bar';
var SCROLL = 'layui-tab-scroll';
var STOPE = 'lay-stope="tabmore"';
var BORDER_BOTTOM = 'layui-tab-border-bottom-container';
var titleElem = tabElem.children('.layui-tab-title');
var checkOverflow = titleElem.prop('scrollWidth') > titleElem.outerWidth() + 1;
var borderBottomPatch = titleElem.find('.' + BORDER_BOTTOM);
// 添加底边框容器，并同步父容器宽度
if(!borderBottomPatch[0]){
borderBottomPatch = $('<div class="'+ BORDER_BOTTOM +'"></div>');
titleElem.append(borderBottomPatch);
}
titleElem.addClass(SCROLL);
if(checkOverflow){
borderBottomPatch.width(titleElem.prop('scrollWidth'));
if(titleElem.find('.'+BAR)[0])return;
var span = $('<span class="layui-unselect layui-tab-bar" '+ STOPE +'><i '+ STOPE +' class="layui-icon">&#xe61a;</i></span>');
titleElem.append(span);
tabElem.attr('overflow', '');
// 不使用 mousewheel，因为要支持滚轮滚动，触摸板，移动设备手势滑动(IE9+)
titleElem.off('wheel.lay_tab').on('wheel.lay_tab', function(e){
e= e.originalEvent
var el = this;
e.preventDefault()
var direction = Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
var distance = 30 * (direction > 0 ? 1 : -1);
var offset = el.scrollLeft + distance
el.scrollTo({
left: offset,
})
})
}else{
titleElem.find('.'+ BAR).remove();
tabElem.removeAttr('overflow');
borderBottomPatch.width('100%');
}
}
//点击一级菜单
/*