SharePoint 2010 母版页定制小思路介绍

      介绍:我们使用SharePoint2010做门户网站,经常需要定制母版页,但是2010提供的Ribbon的方式,定制干掉了他以后,使用起来会发生不便,很多功能接口都需要从Ribbon里面进入,编辑也会无法编辑等出现各种问题,或者弹出脚本异常等。所以,我们要考虑下其他的方式,更加合理的使用Ribbon和左侧导航。

     方法一 使用JS脚步的方式

     所以就想用JS隐藏的方式,处理一下母版页,把不需要的默认隐藏掉,然后通过url传参,在需要的时候,把Ribbon还原回来。这就是我的思路,给大家看看我做的例子吧。

     如下图,是引用的SharePoint默认母版页的一个页面,大家很熟悉吧,V4.master就是我引用的母版页,效果就是这样的,我要处理掉Ribbon和左侧导航,因为要做门户首页嘛,这两个挺碍事儿的,呵呵。

                 

     

     通过IE开发工具栏,找到Ribbon和左侧导航区域的id,分别是” s4-ribbonrow”和” s4-leftpanel”,使用脚本把这两个东西隐藏掉,就变成了下图我们需要的效果,中间灰色区域是PlaceHolderMain的区域,我加了一个Div,方便识别和调整。

     我们要做的不仅仅是隐藏,还要在Url上传一个参数,我这里明明为“show”,通过JS获取到参数,然后进行操作,如果有参数show并且show的值是“true”的情况下,我们把ribbon和左侧导航还显示出来。

<script>

function QueryString(item)

{

         var sValue=location.search.match(new   RegExp("[?&]"+item+"=([^&]*)(&?)","i"))  

         return sValue?sValue[1]:sValue

}

var   ShowID=QueryString("ShowAll");

document.getElementById("s4-leftpanel").style.display='none';

document.getElementById("s4-ribbonrow").style.display='none';

document.getElementById("MSO_ContentTable").style.margin='0';

if(ShowID=="true")

{

document.getElementById("s4-leftpanel").style.display='block';

document.getElementById("s4-ribbonrow").style.display='block';

document.getElementById("MSO_ContentTable").style.margin='0   0 0 155px';

}

</script>

     下图就是加脚本隐藏Ribbon和左侧导航后效果,大家如果想隐藏其他的东西,也可以采取这样的方法,自己感觉比直接隐藏在母版页上style=”display:none”的方法要稍微合理一点,或者直接删除是最不可取的方法了。

 

     下面是传参数返回正常效果的图,大家可以看一下,ribbon和左侧导航都显示出来了,也可以正常的使用。当然,这样的操作,有可能在网络比较差的情况出现先加载出来ribbon和左侧导航的,然后消失掉,这样可以在母版页里隐藏掉,然后通过脚步显示出来也是可以的。

 

     方法二 通过权限进行控制

<Sharepoint:SPSecurityTrimmedControl   ID="SPSecurityTrimmedControl2" runat="server"   PermissionsString="AddAndCustomizePages">

       <script type="text/javascript">

        JS脚步          

       </script>

 </Sharepoint:SPSecurityTrimmedControl>

     给大家权限控制的脚步,有兴趣的可以试试,其实效果和上面的是一样的,只是js执行由传参控制,变成了权限控制。当然,PermissionsString不仅仅是这一个权限的,还有很多权限,顺便给列一个吧。

     微软官方PermissionsString所有值:

 

*************************************************************************************

作者:霖雨
出处:http://www.cnblogs.com/jianyus
本文版权归 霖雨和博客园共有,欢迎转载,但请注明出处。

posted @ 2012-06-11 16:09 霖雨 阅读(...) 评论(...) 编辑 收藏