From 044c83089440f2ae8c8171220a7f2e3324f7deca Mon Sep 17 00:00:00 2001 From: zhizou Date: Tue, 25 Jun 2019 18:15:17 +0800 Subject: [PATCH] =?UTF-8?q?=E5=B0=8F=E6=94=B9=E5=8A=A8;?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/layui/lay/okmodules/okTab.js | 51 +++++++++++++++++++------------- 1 file changed, 31 insertions(+), 20 deletions(-) diff --git a/lib/layui/lay/okmodules/okTab.js b/lib/layui/lay/okmodules/okTab.js index 9fe4b3b..3fccd42 100644 --- a/lib/layui/lay/okmodules/okTab.js +++ b/lib/layui/lay/okmodules/okTab.js @@ -60,8 +60,13 @@ layui.define(["element", "jquery"], function (exports) { superWidth = parseInt(superEle.width()) - 40 * 3,//可显示的宽度 subWidth = ele.outerWidth(),//当前元素宽度 elePrevAll = ele.prevAll(),//左边的所有同级元素 - leftWidth = 0;//左边距离 + leftWidth = 0,//左边距离 + postLeft = Math.abs(contEle.position().left);//当前移动的位置 + var maxMoveWidth = contWidth - superWidth;//最大可移动的宽度 + /*console.log("maxMoveWidth:" + maxMoveWidth); + console.log("superWidth:" + superWidth); + console.log("contWidth:" + contWidth);*/ for (let i = 0; i < elePrevAll.length; i++) { leftWidth += $(elePrevAll[i]).outerWidth() * 1; } @@ -69,24 +74,29 @@ layui.define(["element", "jquery"], function (exports) { /** * 移动tab栏的位置 */ - if (leftWidth + subWidth > superWidth) { - var moveWidth = leftWidth - subWidth; - if (moveWidth > contWidth - superWidth) { - contEle.animate({ - left: -(contWidth - superWidth) - }, 50); - } else { - contEle.animate({ - left: -moveWidth - }, 50); + var showPost = leftWidth - postLeft;//当前点击的元素位置(显示区域的位置) + var halfPlace = parseInt(superWidth / 2);//可显示的宽度的一半 + + if (halfPlace < showPost) {//从右往左移动 + var tempMove = leftWidth - subWidth;//预留一部分距离 + if(tempMove > maxMoveWidth){//当前移动的距离超过最大可移动的宽度 + tempMove = maxMoveWidth; } - } else { contEle.animate({ - left: -leftWidth + left: -tempMove + }, 50); + }else{//从左往右移动 + console.log("从左往右移动"); + var tempMove = leftWidth - halfPlace;//预留一部分距离 + if(tempMove < 0){ + tempMove = 0; + } + contEle.animate({ + left: -tempMove }, 50); } } - + /** * 左侧菜单的样式和多级菜单的展开 */ @@ -223,13 +233,13 @@ layui.define(["element", "jquery"], function (exports) { if (data.children != undefined && data.children.length > 0) { temp += ''; if (data.icon != undefined && data.icon != '') { - if(!data.fontFamily || data.fontFamily.indexOf("layui-icon") >= 0){ + if (!data.fontFamily || data.fontFamily.indexOf("layui-icon") >= 0) { if (data.icon.indexOf("&#") >= 0) { temp += ('{0}').format(data.icon); - }else{ + } else { temp += ('').format(data.icon); } - }else if (data.fontFamily) { + } else if (data.fontFamily) { if (data.icon.indexOf("&#") >= 0) { temp += ('{1}').format(data.fontFamily, data.icon); } else { @@ -256,13 +266,13 @@ layui.define(["element", "jquery"], function (exports) { temp += ('').format(tabID, data.href, isClose); } if (data.icon != undefined && data.icon != '') { - if(!data.fontFamily || data.fontFamily.indexOf("layui-icon") >= 0){ + if (!data.fontFamily || data.fontFamily.indexOf("layui-icon") >= 0) { if (data.icon.indexOf("&#") >= 0) { temp += ('{0}').format(data.icon); - }else{ + } else { temp += ('').format(data.icon); } - }else if (data.fontFamily) { + } else if (data.fontFamily) { if (data.icon.indexOf("&#") >= 0) { temp += ('{1}').format(data.fontFamily, data.icon); } else { @@ -400,6 +410,7 @@ layui.define(["element", "jquery"], function (exports) { tips: [1, '#000'], time: 2000 }); + moveLeft = -moveWidth; } if (superWidth + Math.abs(moveLeft) >= contWidth) { moveLeft = -moveWidth;