1,243 views(since 2013/10/08)

SharePointの左メニュ(Left Menu)と検索(Search) を動的もしくは静的に変更する方法(Sharepoint, C#, Style Sheet, CSS, JavaScript)

ShaerPointの開発をしていると左メニュー(LeftMenu)やサーチ(Search)を非表示にしたい場合があります。その方法を解説します。

方法1:静的:スタイルシート(CSS)

まずは一番シンプルなスタイルシートによる記述 通常は以下のように左にメニューがありますが。

以下のように左メニューを非表示にします。

 

 

<%@ Page language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ID="phPageTitle" ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
 <SharePoint:ProjectProperty ID="ppTitle" Property="Title" runat="server"/>
</asp:Content>

<asp:Content ID="phMain" ContentPlaceHolderId="PlaceHolderMain" runat="server">
 <STYLE type='text/css'>
#s4-leftpanel
 {
 display : none;
 }
 .s4-ca
 {
 margin-left : 0px !important;
 }
 #s4-searcharea
 {
 display : none;
 }
</STYLE>
</asp:Content>

 

方法2:動的:JavaScript

JavaScriptで制御する場合 非表示の場合でも、ボタンをクリックすると表示できます。

表示の場合でも、ボタンをクリックすると非表示できます。

<%@ Page language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c"  %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ID="phPageTitle" ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
    <SharePoint:ProjectProperty ID="ppTitle" Property="Title" runat="server"/>
</asp:Content>

<asp:Content ID="phMain" ContentPlaceHolderId="PlaceHolderMain" runat="server">
    <input type="button"  value="左パネル表示" onClick="ContorlVisibility(true)">
    <input type="button"  value="左パネル非表示" onClick="ContorlVisibility(false)">

    <WebPartPages:SilverlightWebPart 
        runat="server" 
        Height="600px" 
        Url="~sitecollection/SiteAssets/EAP_Office365/SilverlightWebPartMain/SilverlightProjectMain.xap?version=0_0_1" 
        ImportErrorMessage="$Resources:core,ImportErrorMessage;" 
        ApplicationXml="" 
        WindowlessMode="False"
        Description="EAP_Office365" 
        ID="g_7e129824_46fc_4902_9bbf_b28bf5573d20" 
        Width="955px" 
        Title="EAP_Office365 - SilverlightWebPartMain" 
        __MarkupType="vsattributemarkup" 
        __WebPartId="{37DA73F0-C708-4DAC-A1D5-90A7B500EB9B}" 
        WebPart="true" 

        __designer:IsClosed="false">
    </WebPartPages:SilverlightWebPart>

    <script type="text/javascript">
        function ShowErrorAlert(ex) {
            try
            {
                alert("EAP JavaScript エラー内容: " + ex.message);
            }
            catch(ex2)
            {
                alert("EAP JavaScript エラー内容: " + ex2.message);
            }
        }

        var DIV_Style_Visibility_LeftPanel_Search = 'DIV_Style_Visibility_LeftPanel_Search ';
        function ContorlVisibility(IsVisible) {

            try {
                var div_mso = document.getElementById('ctl00_MSO_ContentDiv');

                if (IsVisible) {
                    //表示
                    var divSytle = document.getElementById(DIV_Style_Visibility_LeftPanel_Search)
                    if (null != divSytle) {
                        div_mso.removeChild(divSytle);
                    }
                }
                else {
                    //非表示
                    var divSytle = document.createElement('div')
                    divSytle.id = DIV_Style_Visibility_LeftPanel_Search;
                    div_mso.appendChild(divSytle)

                    //左パネル非表示(Left Panel)
                    AddCSS(divSytle, '#s4-leftpanel {display: none;}');
                    AddCSS(divSytle, '.s4-ca {margin-left : 0px !important;}');
                    //検索非表示(Search)
                    AddCSS(divSytle, '#s4-searcharea {display: none;}');
                }
            }
            catch (ex) {
                ShowErrorAlert(ex);
            }

            function AddCSS(divSytle, cssText) {
                try {
                    var divStyle = document.createElement('style');
                    divStyle.setAttribute("type", "text/css");
                    divStyle.styleSheet.cssText = cssText;
                    divSytle.appendChild(divStyle);
                }
                catch (ex) {
                    ShowErrorAlert(ex);
                }

            }

        }
    </script>
</asp:Content>

Filed Under: Office365 App

About the Author

野呂清二(ご連絡はこちらまで (http://www.exceedone.co.jp/inquiry/)

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.