在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下载:点我点我!

posted on 2010-11-20 16:55  Erucy  阅读(333)  评论(0编辑  收藏  举报

导航