问题描述:
自定义母版页,为了使左边导航和顶部导航位置不变(不滚动),将原本位于ribbon下方的#s4-workspace调整到左侧导航右边。
<div id="s4-workspace" style="position: relative; margin-left: 155px; "> body #s4-workspace { overflow-y: scroll; overflow-x: auto; position: relative; left: 0px; }
这时,如果视图字段较多,需要往右滚动主区域,会出现过滤菜单被左侧导航压住的情况。
解决:
1) 修改web.config将编译模式调整为debug,这时候,moss会采用调试模式的js,如core.debug.js.
2)跟踪js代码,最终发现设置菜单位置的js函数位于Core.debug.js的SetMenuPosition
3)SetMenuPosition这个函数比较复杂,但是好在它是在最后设置菜单位置的:
oPopup.style.left=posLeft+"px"; oPopup.style.top=posTop+"px"; oPopup.LeftForBackIframe=posLeft; oPopup.TopForBackIframe = posTop;
这样,我们就可以直接把代码附加到这个函数后面来修复菜单的位置。
修复逻辑:
1-检测菜单是否处于#s4-workspace内,若否,则不做操作(因为moss中的其他弹出菜单,包括网站操作,也是采用这个js来设置位置的)
2-如果菜单的left小于#s4-workspace的左侧滚动宽度,则将菜单的left设置为#s4-workspace的左滚动宽度(scrollLeft)
4)修该moss自带的js文件不是一个推荐的做法,因为系统升级的时候自带的js文件可能被覆盖掉。所以,这里采用一种类似于“重载”的方式。代码如下:
//fix function begin-------------------- //add by zjy to fix the filter menu is hidden by left bar issue var defaultSetMenuPosition = SetMenuPosition; SetMenuPosition = function (oMaster, oParent, oPopup, oInnerDiv, fFlipTop, fTopLevel) { defaultSetMenuPosition(oMaster, oParent, oPopup, oInnerDiv, fFlipTop, fTopLevel); var $parentWs = $(oPopup).closest("#s4-workspace"); if($parentWs.length==0) return; var wsScrollLeft = $parentWs.scrollLeft(); var leftStr = "" + oPopup.style.left; var intMenuLeft = parseInt(leftStr.substring(0,leftStr.length-2)); //2px to 2 if(intMenuLeft<wsScrollLeft){ oPopup.style.left = wsScrollLeft + "px"; oPopup.LeftForBackIframe = wsScrollLeft; } } //fix function end-----------------------
备注:
1)将以上函数添加到任意地方即可,如自定义的母版页中。
此函数依赖jquery,请确保母版页引用jquery.
因为core.js是采用SOD加载的,所以需要用ExecuteOrDelayUntilScriptLoaded确保SetMenuPosition函数已加载:
// Fix issue: popup menu was hidden by left menu bar. ExecuteOrDelayUntilScriptLoaded(function () { var defaultSetMenuPosition = SetMenuPosition; SetMenuPosition = function (oMaster, oParent, oPopup, oInnerDiv, fFlipTop, fTopLevel) { defaultSetMenuPosition(oMaster, oParent, oPopup, oInnerDiv, fFlipTop, fTopLevel); var $parentWs = $(oPopup).closest("#s4-workspace"); if ($parentWs.length == 0) return; var wsScrollLeft = $parentWs.scrollLeft(); var leftStr = "" + oPopup.style.left; var intMenuLeft = parseInt(leftStr.substring(0, leftStr.length - 2)); //2px to 2 if (intMenuLeft < wsScrollLeft) { oPopup.style.left = wsScrollLeft + "px"; oPopup.LeftForBackIframe = wsScrollLeft; } } }, "core.js") </script>
2)为避免列表项上下文菜单位置异常,滚动条一定要设置在s4-workspace上。