Sharepoint自定义菜单栏

Sharepoint2010的UI有很大的改观,一个重要的体现是在Ribbon。然而有些人并不喜欢这种操作,所以我想到之前的2007的工具栏。

在工具栏里面添加了新建,和删除项目,及切换视图。

效果如下图:

image_thumb2

1:ToolBar

需要先放置新建,删除项目按钮的容器。在Sharepoint里面有提供一个用户自定义控件,位置存放在C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\CONTROLTEMPLATES/ToolBar.ascx。因为想偷懒,这个控件都已经做好了样式,直接拿过来用就好了,当然也可以自己去修改样式。该ToolBar.ascx的代码如下:

<%@ Control Language="C#" Inherits="Microsoft.SharePoint.WebControls.ToolBar,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c"   AutoEventWireup="false" compilationMode="Always" %>

<%@ Register Tagprefix="wssawc" Namespace="Microsoft.SharePoint.WebControls" Assembly="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" %>

<table class="<%=CssClass%>" cellpadding="2" cellspacing="0" border="0" id="<%=ClientID%>" width="100%">

  <tr>

<%-- Buttons on the left --%>

<wssawc:RepeatedControls id="RptControls" runat="server">

	<HeaderHtml/>

	<BeforeControlHtml>

		<td class="ms-toolbar" nowrap="nowrap">

	</BeforeControlHtml>

	<AfterControlHtml>

		</td>

	</AfterControlHtml>

	<SeparatorHtml>

		<td class="ms-separator">|</td>

	</SeparatorHtml>

	<FooterHtml/>

</wssawc:RepeatedControls>

	<td width="99%" class="ms-toolbar" nowrap="nowrap"><img src="/_layouts/images/blank.gif" width='1' height='18' alt="" /></td>

<%-- Buttons on the right --%>

<wssawc:RepeatedControls id="RightRptControls" runat="server">

	<HeaderHtml/>

	<BeforeControlHtml>

		<td class="ms-toolbar" nowrap="nowrap">

	</BeforeControlHtml>

	<AfterControlHtml>

		</td>

	</AfterControlHtml>

	<SeparatorHtml>

		<td class="ms-separator">|</td>

	</SeparatorHtml>

	<FooterHtml/>

</wssawc:RepeatedControls>

  </tr>

</table>

如果需要修改样式,建议在自己的样式表里面,重写这些定义的样式为好。

我们引用这个工具栏控件:

<%@ Register Src="/_controltemplates/ToolBar.ascx" TagPrefix="YLSoft" TagName="ToolBar" %> 

 

<YLSoft:ToolBar ID="tbar" runat="server"> 

    <Template_Buttons> 

        

    </Template_Buttons> 

    <Template_RightButtons> 

    	

    </Template_RightButtons> 

</YLSoft:ToolBar>

 

在Template_Buttons和Template_RightButtons分别放置左边,和最右边的按钮集合,一般我们视图选择都放在右边。里面直接拖拽控件也可以,为了美观,这里还是用到Sharepoint的几个控件 。

Menu:

<SharePoint:Menu ID="MenuNew" runat="server" TemplateId="MenuTemplateNew" Text="<%$Resources:wss,multipages_new_menu_text%>" 

            MenuFormat="ArrowAlwaysVisible" MenuAlignment="Left" HoverCellActiveCssClass="ms-menubuttonactivehover" 

            HoverCellInActiveCssClass="ms-menubuttoninactivehover" AccessKey="<%$Resources:wss,tb_NewMenu_AK%>" />

这里有使用到资源文件,<%$Resources:wss,multipages_new_menu_text%>,意思是调用的是wss.resx,key为multipages_new_menu_text的资源。资源文件放在:目录下面。multipages_new_menu_text的值是New(新建)。

  <data name="multipages_new_menu_text">

    <value>New</value>

  </data>

那这个MenuNew西面有哪些子菜单呢?这里有一个很重要的属性:TemplateId。TemplateId指明从哪个Template获取子菜单。这里我指明的是MenuTemplateNew。看看它的定义:

<SharePoint:FeatureMenuTemplate ID="MenuTemplateNew" LargeIconMode="TRUE" runat="server" GroupId="NewMenu">

    <SharePoint:NewMenu MenuAlignment="Default" ID="newMenu" runat="server">

    </SharePoint:NewMenu>

</SharePoint:FeatureMenuTemplate>

我在MenuTemplateNew的菜单模板下面放置了新增菜单。看看效果

image_thumb

NewMenu都是取得当前列表的新增的内容类型。当然也可以自己编码来添加新增的内容。这貌似需要继承来实现。之前有重写过这个NewMenu。

删除项目菜单:

<YLSoft:ToolBarButton ID="btnDel" OnClientClick="getSels();return false;" runat="server" Text="<%$Resources:wss,setanon_deleteitems_display %>"></YLSoft:ToolBarButton>

ToolBarButton样式都Sharepoint的,所以看上去顺眼点,如果直接放Button有点恶心。

最后UI代码如下:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>

<%@ Assembly Name="Microsoft.Web.CommandUI, 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" %>

<%@ Import Namespace="Microsoft.SharePoint" %>

<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"

    Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ListToolBarUserControl.ascx.cs"

    Inherits="YLSoft.Features.Webparts.ListToolBar.ListToolBarUserControl" %>

<%@ Register Src="/_controltemplates/ToolBar.ascx" TagPrefix="YLSoft" TagName="ToolBar" %>

<%@ Register TagPrefix="YLSoft" TagName="ToolBarButton" src="~/_controltemplates/ToolBarButton.ascx" %> 



<!-- Templates --> 

<SharePoint:FeatureMenuTemplate ID="MenuTemplateNew" LargeIconMode="TRUE" runat="server" GroupId="NewMenu"> 

    <SharePoint:NewMenu MenuAlignment="Default" ID="newMenu" runat="server"> 

    </SharePoint:NewMenu> 

</SharePoint:FeatureMenuTemplate> 

<SharePoint:MenuTemplate runat="server" ID="MenuTemplateView"> 

<SharePoint:ViewSelectorMenu ID="viewSelector" runat="server"> 

        </SharePoint:ViewSelectorMenu> 

</SharePoint:MenuTemplate> 

<!--End Template--> 



<YLSoft:ToolBar ID="tbar" runat="server"> 

    <Template_Buttons> 

        <SharePoint:Menu ID="MenuNew" runat="server" TemplateId="MenuTemplateNew" Text="<%$Resources:wss,multipages_new_menu_text%>" 

            MenuFormat="ArrowAlwaysVisible" MenuAlignment="Left" HoverCellActiveCssClass="ms-menubuttonactivehover" 

            HoverCellInActiveCssClass="ms-menubuttoninactivehover" AccessKey="<%$Resources:wss,tb_NewMenu_AK%>" /> 

        <YLSoft:ToolBarButton ID="btnDel" OnClientClick="getSels();return false;" runat="server" Text="<%$Resources:wss,setanon_deleteitems_display %>"></YLSoft:ToolBarButton> 

    </Template_Buttons> 

    <Template_RightButtons> 

    <asp:PlaceHolder ID="PlaceHolder1" runat="server"> 

             <table border="0" cellpadding="0" cellspacing="0" style='margin-right: 4px'> 

              <tr> 

               <td nowrap="nowrap" class="ms-toolbar" id="topPagingCell"></td> 

               <td></td> 

               <td nowrap="nowrap">&#160;</td> 

               <td nowrap="nowrap" class="ms-listheaderlabel"><SharePoint:EncodedLiteral ID="EncodedLiteral1" runat="server" text="<%$Resources:wss,view_selector_view%>" EncodeMethod='HtmlEncode'/>&#160;</td> 

               <td nowrap="nowrap" class="ms-viewselector" onmouseover="this.className='ms-viewselectorhover'" onmouseout="this.className='ms-viewselector'" id="onetPeopleViewSelector"> 

                <SharePoint:Menu ID="MenuViewSelector" runat="server" TemplateId="MenuTemplateView" 

            Text="<%$Resources:wss,mngsubwebs_selectview%>" MenuFormat="ArrowAlwaysVisible" 

            MenuAlignment="Right" AlignmentElementOverrideClientId="onetPeopleViewSelector" 

            HoverCellActiveCssClass="ms-viewselectorhover" HoverCellInActiveCssClass="ms-viewselector" 

            AccessKey="<%$Resources:wss,tb_ViewSelector_AK%>" /> 

               </td> 

              </tr> 

              </table> 

            </asp:PlaceHolder> 

    </Template_RightButtons> 

</YLSoft:ToolBar>

你可能感兴趣的:(SharePoint)