SharePoint 2010 MasterPage去Ribbon 的方法

需求

SharePoint2010的默认的母板页兼容性和适应性做的很好,兼容了IE7,IE8和IE8兼容模式,也自适应了浏览器的分辨率和IE窗体非全屏的大小。

但国内很多客户,特别是给一般用户使用SharePoint的时候,有一个经常提到的需求,就是一般用户不要看到Ribbon,起初想法很简单,CSS直接隐藏掉就好了啊,但事实不那么简单,因为为了适应IE浏览器的高度,会有一个滚动条,而这个滚动条出现的判断是和这个Ribbon的div相关的,并且这段脚本是微软自己写的,你不可能在短时间内把这个脚本看明白。

那么下面就要解决这个问题

 

最终效果

1. 一般用户看到的页面

 

00一般用户

 

2. 管理员看到的页面

 

 

 

基本配置

1. 打开Microsoft SharePoint Designer

 

01Designer打卡网站集

 

2. 打开网站集

 

02打开网站集

 

3. 单击All Files和_catalogs。

 

clip_image010

 

4. 展开_catalogs和masterpage,复制V4.master再粘贴,将v4_copy(1).master,重命名为MyMasterPage.master

 

03复制v4

 

5. 编辑MyMasterPage.maser,单击Edit file。

 

04编辑这个MasterPage

 

6. 在head加入链接MasterPage.css, jquery-1.4.4.min.js和MasterPage.js

 

05head加入链接

 

7. 在安装SharePoint2010的服务器,在C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\ 创建MasterPage文件夹,在MasterPage文件夹下创建Css和Javascript文件夹,根据后缀名放入相应的3个文件。

 

06脚本和css

 

用户名部分

1. 在图中的位置,方便用户切换用户名。

 

07 1welcome位置

 

2. 这个div原来的位置在图的位置,将其注释或剪切删除(注意用<!--->是无效的)

 

08welcom原来的位置

 

3. 将代码拷贝到网页的顶部,外面套一层class为masterpagetop的div中。

 

07welcom

 

4. 打开MasterPage.Css,编写样式。

.masterpagetop{ background-color: #21374c; height: 30px;}

 

Logo的部分

1. 公司都要有Logo,注意背景图片可以随着拖动不受影响,没有留白或滚动条。

 

09 1logo的位置

 

2. 在MyMasterPage.maser中设置div。

 

09公司图标

 

3. 在MyMasterPage文件夹下建Image文件夹,里面放置相关的图片。一个是图标,一个是背景延伸的图片。

 

10图片

 

5. 打开MasterPage.Css,编写样式。

.masterpagelogobg{background: url(/_layouts/MyMasterPage/Image/LogoBg.jpg) repeat-x; height: 66px;}

.masterpagelogo{background: url(/_layouts/MyMasterPage/Image/Logo.jpg) no-repeat; height: 66px;}

 

 

顶部站点的导航部分

1. 当网站集下有多个网站,或者有其他导航设置,那么用SharePoint默认的导航控件比较好。

 

11toplink的位置

 

2. 这个div原来的位置在图的位置,将其注释或剪切删除

 

12toplink原来的位置

 

3. 将代码拷贝到Logo部分的下面,外面套一层class为masterpagetoplinks的div中。

 

10toplink

 

4. 打开MasterPage.Css,编写样式。

.masterpagetoplinks{ height:25px; overflow:hidden; border-bottom:1px solid #ccc; }

 

隐藏Ribbon控制弹出滚动条

1. 打开MasterPage.Css,编写样式。

#s4-titlerow{ display:none; height:0px; overflow:hidden;}

#s4-ribbonrow{ display:none; height:0px; overflow:hidden; }

.s4-specialNavLinkList{ display:none}

.s4-recentchanges{ display:none}

 

 

2. 编写脚本代码,有控制IE浏览器兼容性的,有控制滚动条的,有控制管理员账号显示Ribbon的。

$(document).ready
(
    function () {

        var userName = $(".s4-trc-container-menu a.ms-menu-a span").text();
        var version_temp = $.browser.version;

        //如果不是管理员页面
        if (userName != "系统帐户" && userName != "SystemAdmin") {

            //隐藏ribbon
            if (Request("IsDlg") == "1") {

                $(".masterpagetop").hide();
                $(".masterpagelogobg").hide();
                $(".masterpagetoplinks").hide();

            } else {

                $(window).resize(function () {

                    changheight();

                });
            }

        } else {

            if (Request("IsDlg") == "1") {

                $(".masterpagetop").hide();
                $(".masterpagelogobg").hide();
                $(".masterpagetoplinks").hide();

            } else {
   
	        $("#s4-titlerow").show();
                $("#s4-ribbonrow").show();

            }
        }
	//如果是IE7
        if (version_temp == "7.0") {

            if (Request("IsDlg") == "1") {
                changwidth();

            }
        }   
   }
);

//自适应宽高
function changwidth() {

    var _maxwidth = 400;

    $("#s4-workspace div").each(function () {

        if ($(this).width() > _maxwidth)
            _maxwidth = $(this).width();

    });

    _maxwidth = _maxwidth + 60;

    if (_maxwidth > screen.width) {

        _maxwidth = screen.width - 150;

    }

    $("#s4-workspace").css({ "width": _maxwidth + "px" });

}

function changheight() {

    var _maxheight = 300;

    $("#s4-workspace div").each(function () {

        if ($(this).height() > _maxheight){

            _maxheight = $(this).height();
	}

    });

    _maxheight = $(window).height() - 120;

    if (_maxheight > screen.height) { 
    
	_maxheight = screen.height;

    }
    
    $("#s4-workspace").css({ "height": _maxheight + "px" });
}

function Request(strName) {
    
    var strHref = window.document.location.href;
    var intPos = strHref.indexOf("?");
    var strRight = strHref.substr(intPos + 1);
    var arrTmp = strRight.split("&");

    for (var i = 0; i < arrTmp.length; i++) {

        var arrTemp = arrTmp[i].split("=");
        if (arrTemp[0].toUpperCase() == strName.toUpperCase()) return arrTemp[1];

    }
    return "";
}

 

 

弹出页面效果

1. 一般用户全屏状态,打开一个高度比较高的列表,弹出页面也没有了Ribbon,SharePoint的确定和取消按钮自动会出来。

 

15一般用户弹出页面

 

2. 改变浏览器的高度,宽度

 

16改变浏览器大小

 

3. 默认的是IE8的模式,现在调整到IE7模式下看效果。

 

17切换到IE7

 

4. 再调整到IE8兼容模式下看效果。

 

18ie8兼容

 

5. 在Chrome浏览器下看效果

 

20Chrome的效果也没有影响

 

这个去Ribbon的母版页就可以使用了。但是,因为没有了Ribbon,所以一些方法就需要编码做按钮的方式加载到页面上。

posted @ 2012-04-16 09:56  水杉技术博客  阅读(2332)  评论(5编辑  收藏  举报