How to: Hide the Ribbon in SharePoint 2010
About the Ribbon in SharePoint 2010
The SharePoint 2010 ribbon provides a similar user experience as the Microsoft Office client products. The ribbon is a toolbar which appears on top of the page to provide the most commonly used tools, controls, and commands.
The ribbon hierarchy is organized as follows (see Figure 1 and Figure 2):
- Contextual Tag Group - A contextual tab enables you to provide a set of user interface (UI) controls within a certain context. For example, when you select a table in a document, a set of tabs is displayed to work with the table. When the
table is deselected, the contextual tabs are hidden. Contextual tabs with a similar context are organized in a contextual tab group so you can have more than one tab in a group. - Tabs – Tabs are used to organize groups of related controls. For example, an Insert tab displays controls that enable you to insert various objects into a document such as files, tables, images, and so forth.
- Groups – Groups are used to organize related controls such as the font group, styles group, document views group, and so forth.
- Controls – Buttons, dropdown controls, radio buttons, and other controls that enable you to perform a singular task from the ribbon.
The ribbon can have multiple tabs, tabs can have multiple groups, and group can have multiple controls.
Figure 1. Ribbon tabs and groups
Figure 2. Ribbon contextual tab group and controls
Hiding the Ribbon in SharePoint 2010
There are multiple ways to hide the ribbon in SharePoint 2010. For example:
- When publishing a website template (which you should use for public websites), there is a
Show/Hide ribbon option under the Site Actions drop-down menu. - By using the Security Trimmer control. The Security Trimmer control can be place around the ribbon in Master page to conditionally hide it based on user permissions. The following example shows that a user without manage permissions will not be able to
see the ribbon. The PermissionString attribute value can be changed based on the requirement.
<SharePoint:SPSecurityTrimmedControl PermissionsString="ManagePermissions" runat="server">
<div id="s4-ribbonrow" class="s4-pr s4-ribbonrowhidetitle">
</div>
</SharePoint:SPSecurityTrimmedControl>
- By using custom code. JavaScript can be used to show or hide the ribbon in SharePoint 2010.
Creating JavaScript to Hide the Ribbon
In this section, you create a file that contains JavaScript code to show or hide the ribbon while loading a website and webpage. You then create an empty SharePoint 2010 project in Microsoft Visual Studio 2010 and then add the JavaScript file to it. Next,
you reference the JavaScript file in the Master page. Finally, you deploy and test the solution.
To create the JavaScript file
- Open Notepad.
- Add the following JavaScript code to the file and then save it as custom.js.
function ShowRibbon() {
$("#s4-ribbonrow").show();
$("#s4-workspace").height($(document).height() - $("#s4-ribbonrow").height() * 2);
}
function HideRibbon() {
$("#s4-ribbonrow").hide();
var newHeight = $(document).height();
if ($.browser.msie) {newHeight = newHeight - 3; }
$("#s4-workspace").height(newHeight);
}
_spBodyOnLoadFunctionNames.push("HideRibbon");
To create the Empty SharePoint 2010 Project
- Start Microsoft Visual Studio 2010.
- On the File menu, point to New, and then click
Project. - In the New Project dialog window, in the Installed Templates section, click
Visual C#, click SharePoint, and then click
2010. - Click Empty SharePoint Project from the project items.
- In the Name box, type RibbonDemo and then click
OK. - In the SharePoint Customization Wizard, type the local website that you want to use for this exercise (such as
http://localhost/SampleWebSite). - For the trust level, select Deploy as a farm solution and then click
Finish. - In Solution Explorer, right-click the RibbonDemo project name, point to
Add, and then click Existing Item. - Navigate to the JavaScript file you created previously (custom.js) and then click
Add. - Open the SharePoint 2010 Designer to the website you specified when you created the Visual Studio project.
- Open the website Master page; add the following code, and then save it.
<SharePoint:ScriptLink language="javascript" name="RibbonDemo/jquery-1.6.4.min.js" runat="server"/>
<SharePoint:ScriptLink language="javascript" name="RibbonDemo/custom.js" runat="server"/>
To deploy and test the solution
- In Solution Explorer, right-click the RibbonDemo project name, and then click
Deploy. - Start Internet Explorer and browse to the website specified previously. The ribbon is hidden when the webpage loads.
This post discussed the SharePoint 2010 ribbon and how to hide it by using JavaScript. You can find more information about the topics discussed here at the following locations.
How to: Hide the Ribbon in SharePoint 2010的更多相关文章
- Custom Ribbon in SharePoint 2010 & which not wrok when migrate from 2010 to 2013
博客地址 http://blog.csdn.net/foxdave 1. First of all, let me show you the ribbon modal in our project w ...
- SharePoint 2010 Ribbon with wrong style in Chrome and Safari
When we add custom ribbon to SharePoint 2010, it may display well in IE but not in Chrome and Safari ...
- Sharepoint 2010 根据用户权限隐藏Ribbon菜单(利用css)
本文介绍的是根据用户权限隐藏整个Ribbon菜单项. 操作环境:Windows Server 2008 r2+ SharePoint 2010 1.关于SharePoint 权限详细请参考:http ...
- [转]SharePoint 2010 Download as Zip File Custom Ribbon Action
在SharePoint 2010文档库中,结合单选框,在Ribbon中提供了批量处理文档的功能,比如,批量删除.批量签出.批量签入等,但是,很遗憾,没有提供批量下载,默认的只能一个个下载,当选择多个文 ...
- sharepoint 2010 显示和隐藏Ribbon区域条
在sharepoint 2010的页面中,我们在页面的最上方,有一条深灰色的Ribbon工具栏,如下图,这里可以通过下面的脚本,做一些脚本,来控制它的隐藏和显示. 最后把这些脚本,放在v4.maste ...
- sharepoint 2010 怎样在Ribbon区加入功能button
继续前面的一篇博客,sharepoint 2010 怎样在列表中加入功能菜单操作项.这次主要是记录下,在Ribbon区域加入功能button.比如加入收藏button.例如以下图所看到的: 1. 还是 ...
- SharePoint 2010 Modal Dialog
SharePoint 2010 Modal Dialog Tweet Modal dialog play very important role to improve the user exper ...
- Upgrade from SharePoint 2010 to SharePoint 2016
[转]http://nikcharlebois.com/upgrade-from-sharepoint-2010-to-sharepoint-2016/ In this blog, I will go ...
- 使用SharePoint 2010 母版页
SharePoint 2010母版页所用的还是ASP.NET 2.0中的技术.通过该功能,实现了页面框架布局与实际内容的分离.虽然在本质上自定义母版页的过程和以前版本的SharePoint大致相同,但 ...
随机推荐
- Convert.ToInt32()与int.Parse()的区别 (转载)
Convert.ToInt32()与int.Parse()的区别(1)这两个方法的最大不同是它们对null值的处理:Convert.ToInt32(null)会返回0而不会产生任何异常,但int.Pa ...
- Win7 钩子 超时 失效
这段时间在程序中,使用了全局钩子,但是在测试时发现,会偶尔失效. 在网上搜索到了这两篇文章: VC底层钩子程序在Win7/Vista下无效 Hooking problem in Windows 7 这 ...
- 服务控件与html标签的一点
前言 很久没有用服务器控件开发了,在新公司待了三四个月了,这个公司一直都用服务器控件.所以在开发的过程中也发现了一丢丢的东东,也许以前就知道,只是没有认真的发现. 过程 前几天在开发页面的时候,有个需 ...
- thinkphp分页实现
以上为我对于thinkphp分页的实现效果,两种方法,一种调用公共函数中的函数方法(参考http://www.cnblogs.com/tianguook/p/4326613.html),一种是在模型中 ...
- NFS挂载及写入故障
最近在做架构时,分离出来一台图片服务器,图片服务器是通过NFS(网络文件系统)给两台web服务器提供图片存储的,在编辑NFS配置文件(/etc/exports)时:想了一下,允许访问NFS共享目录的范 ...
- 在C#中IEnumerable与IEnumerator
对于很多刚开始学习C#同学来说经常会遇到IEnumerable这个关键字,enumerate在字典里的解释是列举,枚举,因此可想而知这个关键字肯定是和列举数据有关的操作. public interfa ...
- NGUI系列教程三
接下来我们再来看Progress Bar和Slider,对比参数我们可以发现,Progress Bar和slider的明显区别在于slider多一个Thumb选项,这里的Thumb就是我们拖动的时候点 ...
- 一步步学习ASP.NET MVC3 (9)——JsonReslt,JavaScript,@Ajax
请注明转载地址:http://www.cnblogs.com/arhat 在上一章中,我们讲述了ActionResult的三个子类,非别是EmptyResult,RediretResult和Conte ...
- .net entity framework 泛型 更新与增加记录
static public bool SaveOrUpdate<T>(T entity) where T: class { bool result = false; using (wech ...
- Win8.1设置窗口背景颜色为护眼色
更改注册表 window+R --->输入regedit(点击确定后进入注册表编辑器) 需要修改以下两个地方,重启电脑生效: [HKEY_CURRENT_USER\Control Panel\C ...