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

改进 tab whell 事件处理器

pull/2341/head
sight 2024-11-19 15:34:21 +08:00
parent 1026e9986a
commit 4930ffadc4
2 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/css/layui.css
View File

@ -1395,7 +1395,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
/* Tab 简洁风格 */.layui-tab-brief > .layui-tab-title .layui-this{color: #16baaa;} /* Tab 简洁风格 */.layui-tab-brief > .layui-tab-title .layui-this{color: #16baaa;}
.layui-tab-brief > .layui-tab-title .layui-this:after .layui-tab-brief > .layui-tab-title .layui-this:after
,.layui-tab-brief > .layui-tab-more li.layui-this:after{border: none; border-radius: 0; border-bottom: 2px solid #16b777;} ,.layui-tab-brief > .layui-tab-more li.layui-this:after{border: none; border-radius: 0; border-bottom: 2px solid #16b777;}
.layui-tab-brief[overflow] > .layui-tab-title .layui-this:after{top: -1px;} .layui-tab-brief[overflow] > .layui-tab-title .layui-this:after{top: 0px;}
/* Tab 卡片风格 */.layui-tab-card{border-width: 1px; border-style: solid; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);} /* Tab 卡片风格 */.layui-tab-card{border-width: 1px; border-style: solid; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
.layui-tab-card > .layui-tab-title{background-color: #fafafa;} .layui-tab-card > .layui-tab-title{background-color: #fafafa;}

31
src/modules/element.js
View File

@ -9,7 +9,8 @@ layui.define('jquery', function(exports){
var $ = layui.$; var $ = layui.$;
var hint = layui.hint(); var hint = layui.hint();
var device = layui.device(); var device = layui.device();
var tabWheelEvents = 'wheel.lay_tab mousewheel.lay_tab DOMMouseScroll.lay_tab';
var MOD_NAME = 'element'; var MOD_NAME = 'element';
var THIS = 'layui-this'; var THIS = 'layui-this';
var SHOW = 'layui-show'; var SHOW = 'layui-show';
@ -329,23 +330,31 @@ layui.define('jquery', function(exports){
titleElem.addClass(SCROLL); titleElem.addClass(SCROLL);
if(checkOverflow){ if(checkOverflow){
// TODO 计算所有选项卡宽度之和，以规避 float 带来的瑕疵？
borderBottomPatch.width('100%');
borderBottomPatch.width(titleElem.prop('scrollWidth')); borderBottomPatch.width(titleElem.prop('scrollWidth'));
if(titleElem.find('.'+BAR)[0])return; if(titleElem.find('.'+BAR)[0])return;
var 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>');
titleElem.append(span); titleElem.append(span);
tabElem.attr('overflow', ''); tabElem.attr('overflow', '');
// 不使用 mousewheel，因为要支持滚轮滚动，触摸板，移动设备手势滑动(IE9+) titleElem.off('.lay_tab').on(tabWheelEvents, function(e){
titleElem.off('wheel.lay_tab').on('wheel.lay_tab', function(e){ e.preventDefault();
e= e.originalEvent e= e.originalEvent;
var el = this; var el = $(this);
e.preventDefault() var direction = 0;
var direction = Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
// IE9+，chrome 和 firefox 同时添加 'wheel' 和 'mousewheel' 事件时，只执行 'wheel' 事件
if(e.type === 'wheel'){
direction = Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
}else if(e.type === 'mousewheel' ){
direction = -e.wheelDelta;
}else if(e.type === 'DOMMouseScroll'){
direction = e.detail;
}
var distance = 30 * (direction > 0 ? 1 : -1); var distance = 30 * (direction > 0 ? 1 : -1);
var offset = el.scrollLeft + distance el.scrollLeft(el.scrollLeft() + distance);
el.scrollTo({
left: offset,
})
}) })
}else{ }else{
titleElem.find('.'+ BAR).remove(); titleElem.find('.'+ BAR).remove();