SharePoint Tricks - HTML & CSS & JavaScript
1. 隐藏Quick Launch
<style type="text/css">
/*-- Hide Quick Launch --*/
#s4-leftpanel
{
display:none;
}
/*-- Move the content placeholder to the left border --*/
.s4-ca
{
margin-left:0px;
}
</style>
2. 隐藏Ribbon
<style type="text/css">
/*-- Hide ribbon --*/
#s4-ribbonrow
{
display:none;
}
/*-- Hide top link bar --*/
.s4-pr
{
display:none;
}
/*-- Hide title --*/
.s4-title
{
display:none;
}
/*-- Force content to display --*/
#s4-mainarea
{
display:block;
}
</style>
3. 隐藏列表web part中的列名
<style type="text/css">
/*-- Hide column headers from Web Parts --*/
tr.ms-viewheadertr
{
display:none;
}
</style>
4. 隐藏列表web part中的'Add new item',
<style type="text/css">
/*-- Hide "Add new item" row from Web Parts --*/
td.ms-addnew
{
display:none;
}
</style>
5.
6. sharepoint弹出菜单背景色 （比如下图）
ul.dynamic
{
background-color:AntiqueWhite!important;
}
7. SharePoint 2010 中 Focus on Content （顶部、左侧都会隐藏）
页面：
<style type="text/css"> #s4-titlerow{ display:none } #s4-leftpanel{ display:none } #s4-ribbonrow{ display:none } </style>
列表：
<style type="text/css"> #s4-titlerow { DISPLAY: none } #s4-leftpanel { DISPLAY: none } #s4-ribbonrow { DISPLAY: none } #s4-titlerow > div{ display:none } </style>
文档库：
<style type="text/css"> #s4-titlerow { DISPLAY: none } #s4-leftpanel { DISPLAY: none } #s4-ribbonrow { DISPLAY: none } #s4-titlerow > DIV { DISPLAY: none }
//仅当webpart左侧与浏览器有一定间隔时使用 #MSO_ContentTable{ margin-left:0px; } td.ms-addnew { display:none; } </style>
8. SharePoint控件ID中的"."，需要使用"\."来进行转义，例如：
//隐藏Ribbon中的Commit区域： #Ribbon\.ListForm\.Edit\.Commit{ display:none; }
9. Flyout Menu:
<style type="text/css"> .s4-ql ul.root ul > li > a { background-color:AntiqueWhite; border-style:solid; border-width:thin; border-color:#DBDDDE; color:blue; } .s4-ql ul.root ul > li > a:hover { background-color:#F3FBFF; } </style> <SharePoint:AspMenu id="V4QuickLaunchMenu" runat="server" EnableViewState="false" DataSourceId="QuickLaunchSiteMap" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Vertical" StaticDisplayLevels="1" MaximumDynamicDisplayLevels="2" SkipLinkText="" CssClass="s4-ql" />
效果图：
10.
11. 隐藏"Recently Modified" 区域：
<style> .s4-recentchanges{ display:none; } </style>
12.
13. SharePoint 2013中点击文件类型图标icon时，不会打开文件（微软已经移除此功能），但可以在页面添加以下代码来实现点击图标打开文件的功能：
For document libraries 和 infopath libraries containing client forms:
<html> <head> <script src="http://XXX/sites/xxx/SiteAssets/jquery.min.js"></script> </head> <body> <script> _spBodyOnLoadFunctionNames.push('iconLinks'); function iconLinks(){ $('td.ms-vb-icon > img').each(function(){ $(this).parent().html('<a href="' + '../' + $(this).attr('title') + '">' + $(this).prop('outerHTML') + '</a>'); }); } </script> </body> </html>
For infopath libraries containing browser enabled forms:
<html> <head> <script src="http://XXX/sites/xxx/SiteAssets/jquery.min.js"></script> </head> <body> <script> _spBodyOnLoadFunctionNames.push('iconLinks'); function iconLinks(){ $('td.ms-vb-icon > img').each(function(){ $(this).parent().html('<a href="' + '../' + $(this).attr('title') + '?openIn=Browser">' + $(this).prop('outerHTML') + '</a>'); }); } </script> </body> </html>
14. Page Viewer web part不能接收参数，但可以用iframe来替代，参考此文章；
<script type="text/javascript"> function getQueryStringRegExp(name) { var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i"); if (reg.test(location.href)) return unescape(RegExp.$2.replace(/\+/g, " ")); return ""; } document.write("<iframe src='http://www.sitename.com/default.aspx?param1="+ getQueryStringRegExp('param1') + "' width=100% height=100%></iframe>"); </script>
15.
