zoukankan      html  css  js  c++  java
  • 自定义母版页之列表过滤菜单位置issue fix

    问题描述:

    自定义母版页,为了使左边导航和顶部导航位置不变(不滚动),将原本位于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上。

  • 相关阅读:
    Centos操作系统配置VIP以及网络
    heartbeat+nginx搭建高可用HA集群
    sudo -s/sodo -i/su root
    mysql数据库使用sql查询数据库大小及表大小
    Caffe机器学习框架
    TensorFlow实战:Chapter-4(CNN-2-经典卷积神经网络(AlexNet、VGGNet))
    深度工作:充分使用每一份脑力
    Laravel 的中大型专案架构
    python数据分析之numpy
    lumen-Permission 权限管理使用心得
  • 原文地址:https://www.cnblogs.com/jianyi0115/p/3777755.html
Copyright © 2011-2022 走看看