问题描述:

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

自定义母版页之列表过滤菜单位置issue fix的更多相关文章

  1. 重新想象 Windows 8 Store Apps (69) - 其它: 自定义启动屏幕, 程序的运行位置, 保持屏幕的点亮状态, MessageDialog, PopupMenu

    [源码下载] 重新想象 Windows 8 Store Apps (69) - 其它: 自定义启动屏幕, 程序的运行位置, 保持屏幕的点亮状态, MessageDialog, PopupMenu 作者 ...

  2. 自定义鼠标右键(层叠式菜单:cascading menu)

    Author:KillerLegend From:http://www.cnblogs.com/killerlegend/p/3575391.html Date:Tuesday, February 1 ...

  3. 我的菜单在母版页,如何更改菜单点击后的效果 Ver2

    很久之前,Insus.NET使用ASP.NET实现一个功能,非javascript.<我的菜单在母版页,如何更改菜单点击后的效果>http://www.cnblogs.com/insus/ ...

  4. JavaScript 自定义html元素鼠标右键菜单

    自定义html元素鼠标右键菜单 实现思路 在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...

  5. Sharepoint2010设置自定义母版页

    前言 这个文档是为Microsoft Sharepoint2010 上海文档库公司站点设计的母版页,其版本为1.0,为相关的源文件编写的使用说明书. 使用SharePoint Designer 201 ...

  6. .NET混合开发解决方案13 自定义WebView2中的上下文菜单

    系列目录     [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...

  7. 17_Vue列表过滤_js模糊查询

    列表过滤 需求分析 这里呢有张列表,假设这个列表有一百多条数据 当我在这个 搜索框当中 搜索 单个关键字的时候 (冬,周,伦),它能把带了这几个关键字的信息都给我罗列出来 === 跟数据库的 模糊查询 ...

  8. jQuery自定义Web页面鼠标右键菜单

    jQuery自定义Web页面鼠标右键菜单 右键菜单是固定的,很多时候,我们需要自定义web页面自定义菜单,指定相应的功能. 自定义的原理是:jQuery封装了鼠标右键的点击事件(“contextmen ...

  9. log4.net 配置 - 自定义过滤器按LoggerName过滤日志

    自定义过滤器按LoggerName过滤日志,本来想使用 PropertyFilter 来实现,后来研究发现一直不能成功,源代码debug了一下获取一直为null,时间关系只好用 StringMatch ...

随机推荐

  1. [转]PHP的执行流程,PHP扩展加载过程

    原文:http://www.imsiren.com/archives/535 为了以后能开发PHP扩展..就一定要了解PHP的执行顺序..这篇文章就是为C开发PHP扩展做铺垫. web环境 我们假设为 ...

  2. MVC4做网站六后台管理:6.2网站信息设置

    用来实现网站标题.名称.关键字.描述.版权等信息的设置. 模型字段: 网站的设置信息前后台都要用到,所以要把模型方式Ninesky/Models文件夹中,代码如下: ///////////////// ...

  3. Android 文件读写

    一.分类 文件读写作为Android四大数据存储方式之一,又分为内部存储和外部存储两种: (1)内部存储(Internal storage): 总是可用. 文件默认情况存储在/data/data/包名 ...

  4. 楼主,可否发一份代码给我!QQ....

    一般来说,但凡博主写一篇很赞的文章,然后贴上演示demo的图片或者结果之后,下面一定有一大堆要代码的.不论你在博客中,把算法讲得多么透彻清晰,各种流程图伪代码一清二楚:也不论你提出了任何漂亮的思路和设 ...

  5. JSP页面静态化

    Ps:好久没写博客了,不是我太懒,是因为苦逼的我出差去上海了,天天加班 刚回成都.... 今天说说jsp页面静态化,知道静态化的朋友都不陌生,说白了就是访问后缀是html 而不是jsp. 没听说过静态 ...

  6. 十进制(decimal system)转换函数说明

    一,十进制(decimal system)转换函数说明 1,十进制转二进制 decbin() 函数,如下实例 echo decbin(12); //输出 1100 echo decbin(26); / ...

  7. 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  8. 站在巨人的肩膀上---重新自定义 android- ExpandableListView 收缩类,实现列表的可收缩扩展

    距离上次更新博客,时隔略长,诸事繁琐,赶在去广州答辩之前,分享下安卓 android 中的一个 列表收缩 类---ExpandableListView 先上效果图: 如果想直接看实现此页面的代码请下滑 ...

  9. Node.js Express 路由文件分类

    前言 基于上一篇Web Api Controller分类,在MVC中我们通常要按自己的业务来划分Controller层, 好处多多,那么Express框架作为Node.js的一款MVC框架,那么自然也 ...

  10. ASP.NET系统国际化总结

    引言 系统要求同时支持中英文,以前对国际化这块只是听说过,从来没有自己动手过,提到国际化那么首先肯定想到的就是资源文件,也确实是这样,于是乎我从开始着手系统国际化功能时前前后后共投入了4次时间段,每次 ...