Sharepoint2010的UI有很大的改观,一个重要的体现是在Ribbon。然而有些人并不喜欢这种操作,所以我想到之前的2007的工具栏。
在工具栏里面添加了新建,和删除项目,及切换视图。
效果如下图:
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的菜单模板下面放置了新增菜单。看看效果
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"> </td> <td nowrap="nowrap" class="ms-listheaderlabel"><SharePoint:EncodedLiteral ID="EncodedLiteral1" runat="server" text="<%$Resources:wss,view_selector_view%>" EncodeMethod='HtmlEncode'/> </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>