feat(tab): 重命名 `lay-nowrap` -> `lay-scrollable`

src/css/layui.css

@@ -1384,6 +1384,7 @@ 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{overflow: hidden;}
 .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;}
 
@@ -1395,7 +1396,6 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
 /* 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-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: 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);}
 .layui-tab-card > .layui-tab-title{background-color: #fafafa;}

src/modules/element.js

@@ -265,8 +265,9 @@ layui.define('jquery', function(exports){
         }
         
         // 当超出可用空间时，tab 是否应在多行之间换行，或者是否开启滚动模式
-        if(typeof othis.attr('lay-nowrap') === 'string'){
+        var scrollTarget = othis.attr('lay-scrollable');
-          call.tabNoWrap(othis, spread);
+        if(typeof scrollTarget === 'string'){
+          call.tabNoWrap(othis, scrollTarget);
         }else{
           call.tabWrap(othis, spread);
         }
@@ -317,7 +318,7 @@ layui.define('jquery', function(exports){
         tabElem.removeAttr('overflow');
       }
     }
-    ,tabNoWrap: function(tabElem, spread){
+    ,tabNoWrap: function(tabElem, scrollTarget){
       var tabElem = tabElem;
       if(typeof tabElem.attr('lay-unauto') === 'string') return;
      
@@ -326,56 +327,50 @@ layui.define('jquery', function(exports){
       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 overflowElem = scrollTarget ? $(scrollTarget) : titleElem;
       var borderBottomPatch = titleElem.find('.' + BORDER_BOTTOM);
 
-      // 添加底边框容器，并同步父容器宽度
+      // 添加底边框容器补丁，并同步父容器宽度
       if(!borderBottomPatch[0]){
         borderBottomPatch = $('<div class="'+ BORDER_BOTTOM +'"></div>');
         titleElem.append(borderBottomPatch);
       }
-      titleElem.addClass(SCROLL);
+      borderBottomPatch.width('100%').width(titleElem.prop('scrollWidth'));
-      call.tabUpdateShadowHelper(tabElem, titleElem);
+      call.tabUpdateShadowHelper(overflowElem);
 
-      if(checkOverflow){
+      if(titleElem.find('.'+BAR)[0])return;
-        // TODO 计算所有选项卡宽度之和，以规避 float 带来的瑕疵？
-        borderBottomPatch.width('100%');
-        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>');
+      var barElem = $('<span class="layui-unselect layui-tab-bar" '+ STOPE +'><i '+ STOPE +' class="layui-icon">&#xe61a;</i></span>');
-        titleElem.append(span);
+      titleElem.append(barElem);
-        tabElem.attr('overflow', '');
+      overflowElem.addClass(SCROLL);
 
-        titleElem.off('.lay_tab').on(tabWheelEvents, function(e){
+      overflowElem.off('.lay_tab').on(tabWheelEvents, function(e){
-          e.preventDefault();
+        e.preventDefault();
-          e= e.originalEvent;
+        e= e.originalEvent;
-          var el = $(this);
+        var el = $(this);
-          var direction = 0;
+        var direction = 0;
 
-          // IE9+，chrome 和 firefox 同时添加 'wheel' 和 'mousewheel' 事件时，只执行 'wheel' 事件
+        // IE9+，chrome 和 firefox 同时添加 'wheel' 和 'mousewheel' 事件时，只执行 'wheel' 事件
-          if(e.type === 'wheel'){
+        if(e.type === 'wheel'){
-            direction = Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+          direction = Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
-          }else if(e.type === 'mousewheel' ){
+        }else if(e.type === 'mousewheel' ){
-            direction = -e.wheelDelta;
+          direction = -e.wheelDelta;
-          }else if(e.type === 'DOMMouseScroll'){
+        }else if(e.type === 'DOMMouseScroll'){
-            direction = e.detail;
+          direction = e.detail;
-          }
+        }
-          var distance = 30 * (direction > 0 ? 1 : -1);
+        var distance = 30 * (direction > 0 ? 1 : -1);
-          el.scrollLeft(el.scrollLeft() + distance);
+        el.scrollLeft(el.scrollLeft() + distance);
-          call.tabUpdateShadowHelper(tabElem, el);
+        call.tabUpdateShadowHelper(el);
-        })
+      });
-      }else{
-        titleElem.find('.'+ BAR).remove();
-        tabElem.removeAttr('overflow');
-        borderBottomPatch.width('100%');
-      }
     }
-    ,tabUpdateShadowHelper: function(targetEl, scrollEl){
+    ,tabUpdateShadowHelper: function(overflowElem){
-      var scrollLeft = scrollEl.scrollLeft();
+      // 始终添加到剪切元素的父元素
+      var targetElem = overflowElem.parent();
+
+      var scrollLeft = overflowElem.scrollLeft();
       // 阴影 helper 类
-      targetEl.toggleClass('layui-tab-has-start-shadow', scrollLeft > 0);
+      targetElem.toggleClass('layui-tab-has-start-shadow', scrollLeft > 0);
-      targetEl.toggleClass('layui-tab-has-end-shadow', scrollLeft < scrollEl.prop('scrollWidth') - scrollEl.outerWidth() - 1);
+      targetElem.toggleClass('layui-tab-has-end-shadow', scrollLeft < overflowElem.prop('scrollWidth') - overflowElem.outerWidth() - 1);
     }
     
     //点击一级菜单