zoukankan      html  css  js  c++  java
  • 在SharePoint 2007中呈现一个干净的Main区域

    在几乎所有SharePoint网站的母版页中,经常都包含了顶部Logo、顶部导航、左侧导航、页面边框等等内容,当然最主题的部分还是ID为“PlaceHolderMain”的一个ContentPlaceHolder,所有的页面主要内容都呈现在这个容器中。

    在有些情况下,我们经常会需要去掉那些周围的内容,而在页面中只呈现这个主要区域的内容,一些典型的应用场景包括:在类似对话框的弹出窗口中,把页面嵌入到一个iframe中,等等。

    在SharePoint 2010里面,我们可以很简单地在页面的Url地址之后加上一个“IsDlg=1”,SharePoint自己就会去掉那些周围的元素,只显示PlaceHolderMain这个容器和相应的Ribbon区域。实际上,在2010的那些对话框窗口中,都是使用了这种机制来实现的。

    如果您还在使用SharePoint 2007,又想要在某些场景中实现类似的效果,我们可以完全仿照2010的机制来在2007中实现这样的功能。

    在SharePoint 2010的母版页中,所有需要在对话框中隐藏的区域,都有一个class:“s4-notdlg”,当页面Url中设置了“IsDlg=1”这个查询参数之后,就会由脚本将这个class的display属性设置为“none”,从而将这些内容隐藏掉。

    到这里,我们就知道在2007里面应该如何实现这个功能了:

    第一步,打开冰箱门

    使用SharePoint Designer编辑我们的母版页(不管是默认母版页还是您自定义的母版页),把在这种状态下需要隐藏的容器的元素标签(div、table、tr、td等等)都加上一个我们自定义的class(假设叫做“Erucy-notdlg”)。我数了一下,在2007的默认母版页default.master中,如果需要把周围元素都隐藏干净,只需要在8个元素中增加这个标签;在默认的layouts下的applicatioin.master(绝大多数layouts下页面的母版页)中,同样只需要8个。(在本文末会给出我修改好的这两个文件供大家参考)

    第二步,把大象装进去

    接下来,我们就需要在IsDlg=1或者的情况下,来设置“Erucy-notdlg”这个class的display属性,我们可以通过js来实现这一点。这里面,我们使用一种标准的SharePoint做法:创建一个feature,加入一个ControlId为“AdditionalPageHead”的用户控件,将一部分代码加入到页面的head标签中(AdditionalPageHead是SharePoint所有母版页中都有的一个DelegateControl控件,在head区域中,允许我们通过feature的方式将自定义的一些css引用、js脚本等内容灵活地添加到head标签中,很多开发人员在编辑母版页的时候都会把这个看似无用的控件去掉,实际上,这是非常不可取的做法)。

    首先,我们来编写这个需要的css文件,非常简单:

       1: .Erucy-notdlg{
       2:   display:none;
       3: }

    然后,编写一个Feature,先是feature.xml:

       1: <?xml version="1.0" encoding="utf-8" ?>
       2: <Feature Id="FEC9EB94-004C-4E02-AE5D-32D350C6CD5B"
       3:     Title="开启干净的Main区域"
       4:     Version="1.0.0.0"
       5:     Scope="Site"
       6:     xmlns="http://schemas.microsoft.com/sharepoint/">
       7:   <ElementManifests>
       8:     <ElementManifest Location="Controls.xml" />
       9:   </ElementManifests>
      10: </Feature>

    然后是Feature的主体文件,Controls.xml,来加入一个用户控件:

       1: <?xml version="1.0" encoding="utf-8" ?>
       2: <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
       3:   <Control Id="AdditionalPageHead" 
       4:       ControlSrc="~/_controltemplates/ClearMain.ascx" />
       5: </Elements>

    最后,就是编写这个最重要的ascx。在这个ascx中,我们会判断,如果页面Url中包含了IsDlg=1、或者页面在一个iframe中,那么就输入上面的那个css文件引用:

       1: <%@ Control Language="C#" ClassName="ReferenceControl" %>
       2: <script type="text/javascript">
       3: if (window.location.search.indexOf('IsDlg=1') > 0 ||
       4:   (window.parent != null && window.parent != window)) {
       5:     document.writeln('<link rel="stylesheet" type="text/css" href="/_layouts/Erucy/dlgframe.css"/>');
       6: }
       7: </script>

    第三步,关上冰箱门

    把这些feature文件、css文件、ascx文件都做成一个wsp包(如果你不知道怎么做的话,可以去搜搜……SDK里面也有讲),然后部署之,进到网站集管理里面激活feature,搞定!

    这个时候,如果我们需要在弹出窗口中隐藏掉周围内容,只需要在弹出窗口的Url中加上IsDlg=1;如果是放到页面中的iframe里面(比如自带的“网页查看器”Web部件),默认就会去掉所有周围内容:

    image

    修改后的default.master和application.master下载:点我点我!

  • 相关阅读:
    解决 Mac launchpad 启动台 Gitter 图标无法删除的问题
    React 与 React-Native 使用同一个 meteor 后台
    解决 React-Native mac 运行报错 error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by ope
    一行命令更新所有 npm 依赖包
    swift学习笔记
    IOS语言总结
    focusSNS学习笔记
    别小看锤子,老罗真的很认真
    windowsphone开发页面跳转到另一个dll中的页面
    【令人振奋】【转】微软潘正磊谈DevOps、Visual Studio 2013新功能、.NET未来
  • 原文地址:https://www.cnblogs.com/erucy/p/2416100.html
Copyright © 2011-2022 走看看