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大致相同,但 ...
随机推荐
- Linux下UDP收/发广播消息简单实现
发送广播消息 #include<stdio.h> #include<stdlib.h> #include<string.h> #include<sys/typ ...
- 使用Notepad++将多行数据合并成一行
1.按Ctrl+F,弹出“替换”的窗口: 2.选择“替换”菜单: 3.“查找目标”内容输入为:\r\n: 4.“替换为”内容为空: 5.“查找模式”选择为正则表达式: 6.设置好之后,点击“全部替换” ...
- C#生成二维码名片
摘自<31天学会CRM项目开发<C#编程入门级项目实战>> 本例将使用ThoughtWorks.QRCode类库生成二维码名片.正式编码前,先了解一下什么是vCard?它是一种 ...
- php文本操作方法集合
fgets和fputs.fread和fwrite.fscanf和fprintf 字符串读写函数fgets和fputs 一.读字符串函数fgets函数的功能是从指定的文件中读一个字符串到字符数组中,函 ...
- 整理sed实战修改多行配置技巧
老男孩老师有关sed实战技巧分享,来自课堂教学内容实战1.在指定行前插入两行内容,分别为oldboy和oldgirl.提示:被修改的文件内容必须要大于等于2行 1 sed -i '2 ioldboy\ ...
- python初准备:安装easy_install和pip
安装easy_install wget http://peak.telecommunity.com/dist/ez_setup.py python ez_setup.py 安装pip wget htt ...
- qt 5 小练习 创建无边框界面
我们大家都知道QT5 自带的界面不是那么美观,并且每个软件我们都发现他们的边框是自定义的,所以我决定写一篇这样的博文,也许已经有许许多多篇大牛写的论文了,但我还是想写一篇记录自己的学习QT的历程 首先 ...
- cxlibw-5-0.dll was not found
However every once in a while we are getting the following error message: "This application has ...
- Objective-c开发中混合使用ARC
首选“Compile Sources”的位置: 选中工程->TARGETS->相应的target然后选中右侧的“Build Phases”,向下就找到“Compile Sources”了. ...
- Python 学习日志(一)
第一天: (一)安装Python3.3: (二)试运行: 1.在IDLE中输入:print("Hello,world"); //回车查看结果 2.使用"File" ...