SharePoint 2013 Web Part 工具窗格调整

引言

这是一个5分钟的小技巧，我认为应该为所有品牌化的SharePoint项目执行，以解决Web部件属性工具窗格的问题。

在编辑Web部件时，不要让工具窗格干扰页面，而是将其固定在左侧，并且仅在鼠标悬停时滑出！

      

Using the Code

你只需要将CSS类复制到你的自定义样式中，JavaScript也是如此。

JavaScript

$(document).ready(function(){
var IsEditMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;

if (IsEditMode == "1") {        
        $("form#aspnetForm").append($("<div id='editPanel'>"));
        $("#editPanel").css("height", (innerHeight - 240) + "px");
        $("#MSOTlPn_MainTD").css("width", "0");
        $("#editPanel").append($("#MSOTlPn_Tbl"));

        if ($("#MSOTlPn_Tbl").length > 0)
            $("#editPanel").css("min-width", "300px");

        $("#editPanel").animate({ "left": "-320px", "opacity": "1" }, 700);

        $("#editPanel").on("mouseenter", function () {
            $(this).stop();
            $("#MSOTlPn_Tbl").stop();
            $("#MSOTlPn_Tbl").animate({ "opacity": "1" }, 500);
            $(this).animate({ "left": "0" }, 500);
        });

        $("#editPanel").on("mouseleave", function () {
            $(this).stop();
            $("#MSOTlPn_Tbl").stop();
            $("#MSOTlPn_Tbl").animate({ "opacity": "0" }, 500);
            $(this).animate({ "left": "-320px" }, 500);
        })
    } 
}) 

CSS

 #MSOTlPn_Tbl {
    opacity: 0;
}

#editPanel {    
    opacity: 0;
    border-radius: 5px;
	box-shadow: 0 0 50px #aaa;
	border: 4px solid #74A1FF;
	position: fixed;
	bottom: 25px;
	z-index: 9999;
	left: -320px;
	overflow-y: auto;
	padding: 20px;
	background-color: #fff;
} 

试试看！