RSS

Tag Archives: JavaScript

左侧导航太长了?

这是目前正在做的这个POC的一个副产品,嗯。

当左侧导航太长的时候,通过js加上一个折叠展开的效果(用jquery,嗯),在页面里导航加载后的任何地方以任何一种形式执行如下的js(引用jquery的部分略掉):

   1: $('div.vertical > ul.root > li').each(function () {
   2:   var $a = $("<a style='float:right' href='javascript:void(0)' exp='1'><img border='0' src='/_layouts/images/dlmin.gif'/></a>")
   3:               .click(function () {
   4:                 if ($(this).attr('exp') == '1') {
   5:                   $(this).find('img').attr('src', '/_layouts/images/dlmax.gif');
   6:                   $(this).attr('exp', '0');
   7:                   $(this).parents('.menu-item').next().slideUp();
   8:                 } else {
   9:                   $(this).find('img').attr('src', '/_layouts/images/dlmin.gif');
  10:                   $(this).attr('exp', '1');
  11:                   $(this).parents('.menu-item').next().slideDown();
  12:               }
  13:             });
  14:   $(this).find('span:eq(2)').append($a);
  15: });

代码很简单,我就不解释啥了,效果如下图(归功于jquery,这个是带收缩展开动态效果的哦):

image

(这个导航的样式是靠CSS实现的,跟本文没啥关系)

当然,现在这个打开的时候依然是所有二级导航都处于展开状态,稍微修改一下上面的代码就可以很容易实现页面刚加载的时候默认折叠一些或所有的一级导航。

 

Posted by on 2011 年 06 月 24 日 in SharePoint

Leave a comment

Tags:

在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 by on 2010 年 11 月 20 日 in SharePoint

Leave a comment

Tags: , ,