SharePoint 2010 MasterPage 去Ribbon的方法

需求

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

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

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

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

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

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

最终效果

1. 一般用户看到的页面

$(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 "";
}

View Code

弹出页面效果

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





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





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





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





5. 在Chrome浏览器下看效果





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

出处：http://www.cnblogs.com/flowman/archive/2012/04/16/2445836.html