SharePoint Tricks - HTML & CSS & JavaScript

1. 隐藏Quick Launch

</style>

2. 隐藏Ribbon

</style>

3. 隐藏列表web part中的列名

/*-- Hide column headers from Web Parts --*/
tr.ms-viewheadertr
{
display:none;
}

</style>

4. 隐藏列表web part中的'Add new item',

/*-- Hide "Add new item" row from Web Parts --*/

td.ms-addnew
{
display:none;
}
</style>

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.

posted @ 2014-03-20 10:14 Jacky Ge 阅读(308) 评论(0) 编辑收藏举报

刷新页面返回顶部

Jacky Ge

SharePoint Tricks - HTML & CSS & JavaScript

公告