Share via

导航控件

  • 项目

上次修改时间： 2010年11月1日

适用范围： SharePoint Foundation 2010

本文内容
痕迹导航
顶部链接栏
快速启动
树视图

Microsoft SharePoint Foundation 网站的部件版式包含一组控件，其目的是帮助用户导航网站，更便于用户找到重要内容，了解其在网站中的当前位置以及快速返回前一位置。

您可以在网站主页的母版页中找到这些控件的标记。在 SharePoint Foundation 2010 中，内容页和应用程序页的主母版页是 v4.master。

备注

有关默认母版页的详细信息，请参阅 SharePoint Foundation 中的默认母版页。

在 v4.master 中定义了四个帮助导航的主体：

  • 痕迹导航

  • 顶部链接栏

  • 快速启动

  • 树视图

痕迹导航

痕迹导航是一个导航元素，显示在 SharePoint Foundation 网站中内容页顶部的功能区上紧邻"网站操作"的右侧。它用外观类似叠加向上箭头的文件夹的图标进行标记。当您的鼠标指针悬停在该图标上方时，工具提示将显示"导航级别上移"。单击该图标时，将显示一个弹出菜单。此菜单显示您当前在网站层次结构中的位置。单击您当前位置前面的任意链接即可打开相应位置，同时提供返回起始点的快速路径。

在 v4.master 中，痕迹导航由以下标记进行定义：

备注

为使标记更易于读取，资源表达式 ("$Resources:wss,resource_id") 替换为其本地化的字符串值。

<asp:contentplaceholder id="PlaceHolderGlobalNavigation" runat="server">
    <SharePoint:PopoutMenu
        runat="server"
        ID="GlobalBreadCrumbNavPopout"
        IconUrl="/_layouts/images/fgimg.png"
        IconAlt="Navigate Up"
        IconOffsetX=0
        IconOffsetY=112
        IconWidth=16
        IconHeight=16
        AnchorCss="s4-breadcrumb-anchor"
        AnchorOpenCss="s4-breadcrumb-anchor-open"
        MenuCss="s4-breadcrumb-menu">
        <div class="s4-breadcrumb-top">
            <asp:Label 
                runat="server" 
                CssClass="s4-breadcrumb-header" 
                Text="This page location is:" />
        </div>
        <asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
            <SharePoint:ListSiteMapPath
                runat="server"
                SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
                RenderCurrentNodeAsLink="false"
                PathSeparator=""
                CssClass="s4-breadcrumb"
                NodeStyle-CssClass="s4-breadcrumbNode"
                CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode"
                RootNodeStyle-CssClass="s4-breadcrumbRootNode"
                NodeImageOffsetX=0
                NodeImageOffsetY=353
                NodeImageWidth=16
                NodeImageHeight=16
                NodeImageUrl="/_layouts/images/fgimg.png"
                RTLNodeImageOffsetX=0
                RTLNodeImageOffsetY=376
                RTLNodeImageWidth=16
                RTLNodeImageHeight=16
                RTLNodeImageUrl="/_layouts/images/fgimg.png"
                HideInteriorRootNodes="true"
                SkipLinkText="" />
            </asp:ContentPlaceHolder>
    </SharePoint:PopoutMenu>
    <div class="s4-die">
        <asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server" Visible="false">
        </asp:ContentPlaceHolder>
    </div>
</asp:contentplaceholder>

关于此标记首先需要注意的是，整个痕迹导航包含在 ContentPlaceHolder 控件 (ID="PlaceHolderGlobalNavigation") 中。这意味着您可以选择创建内容页，并添加 Content 控件，来覆盖母版页中定义的默认内容。

大部分标记都涉及定义弹出菜单。如您可以从标记中看到的，这类菜单由 PopoutMenu 控件呈现。该控件包含一个对应菜单标头的 Label 控件和一个使用户能够导航网站的超链接所对应的 ListSiteMapPath 控件。ListSiteMapPath 控件嵌套在另一个 ContentPlaceholder 控件 (ID="PlaceHolderTitleBreadcrumb") 中，这样也可以在内容页中覆盖该控件。

ListSiteMapPath 控件从 SPSiteMapProvider 和 SPContentMapProvider 这对提供程序中获取其导航数据。第一个提供网站层次结构中的网站相关数据；第二个提供列表、库、文件夹和网页等网站内容的相关数据。这两个导航提供程序都派生自 SiteMapProvider 类，该类作为标准 ASP.NET 网站上的站点地图数据的源。

备注

导航提供程序在 web.config 文件的 <system.web> 节中声明，该文件位于 Web 应用程序的根目录中的驱动器:\inetpub\wwwroot\wss\VirtualDirectories\ 端口号\web.config 路径上。

顶部链接栏

顶部链接栏是一个选项卡式的条带区，显示在网站标题和说明的正下方。顶部链接栏上的第一个链接是"主页"位置。通常，此链接指向定义该栏的网站，其余链接指向网站层次结构中较低级别的网站。但是，该标准不是强制实施的。任何有效的 URL 都可用作链接，链接也可按任意顺序排列。

子网站可从其父网站继承顶部链接栏。完成继承后，顶部链接栏可在多个网站之间提供一致的导航体验。有关详细信息，请参阅如何：共享网站之间的顶部链接栏。

在 v4.master 中，顶部链接栏由以下标记进行定义：

<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server">
    <SharePoint:AspMenu
      ID="TopNavigationMenuV4"
      Runat="server"
      EnableViewState="false"
      DataSourceID="topSiteMap"
      AccessKey="1"
      UseSimpleRendering="true"
      UseSeparateCss="false"
      Orientation="Horizontal"
      StaticDisplayLevels="2"
      MaximumDynamicDisplayLevels="1"
      SkipLinkText=""
      CssClass="s4-tn"/>
    <SharePoint:DelegateControl 
        runat="server" 
        ControlId="TopNavigationDataSource" 
        Id="topNavigationDelegate">
        <Template_Controls>
            <asp:SiteMapDataSource
              ShowStartingNode="False"
              SiteMapProvider="SPNavigationProvider"
              id="topSiteMap"
              runat="server"
              StartingNodeUrl="sid:1002"/>
        </Template_Controls>
    </SharePoint:DelegateControl>
</asp:ContentPlaceHolder>

与痕迹导航的标记类似，定义顶部链接栏的标记包含在 ContentPlaceHolder 控件中，从而为内容页设计人员提供使用自己的内容覆盖默认内容的选项。

顶部链接栏由 AspMenu 控件呈现。菜单在水平方向上呈现，通过将 Orientation 属性设置为"Horizontal"，由该控件的标记指定方向。StaticDisplayLevels 属性的设置为"2"。通常，该设置意味着：如果菜单上某节点具有一个子节点，则子节点显示在父节点的下一行。但是，在实际做法中，子节点在同一级别显示在父节点右侧。这种效果是通过 CssClass 属性设置附加到菜单的级联样式表 (CSS) 类导致的。若要更易于使用 CSS 控制菜单项，该控件的标记将 UseSimpleRendering 属性设置为"true"。

如果菜单结构深度超过两级，则第三级上的项目在弹出菜单上显示，这种效果通过 MaximumDynamicDisplayLevels 属性设置控制。由于此设置为"1"，因此弹出菜单仅显示在静态菜单上显示的两级别下的一个级别。丢弃其他所有级别。

菜单后面的数据源是 SiteMapDataSource 控件。如您可以从标记中看到的，SiteMapProvider 属性将该数据源控件绑定到从 SiteMapProvider 类派生的 SPNavigationProvider 类的一个实例。

您可能还会注意到，ShowStartingNode 属性的值为 False。这是因为实际起始节点是形成顶部链接栏的节点树的根节点；它作为一个内部函数，不会在页面上呈现。StartingNodeUrl 属性的值"sid:1002"不是正确的 URL，而是一个指向顶部链接栏根节点的 SharePoint 标识符的表达式。

可以使用下面一行代码来检索根节点：

SPNavigationNode toplinkbar = web.Navigation.GetNodeById(1002);

Dim toplinkbar as SPNavigationNode = web.Navigation.GetNodeById(1002)

检查该对象时，您会发现该对象的 Title 属性返回"SharePoint 顶部导航栏"，Url 属性返回"/"。

提示提示

如果在 SharePoint Designer 2010 中打开 v4.master，并将 ShowStartingNode 的值更改为 True，则可以获得类似结果。保存更改并在浏览器中显示网站主页时，您应该会看到，顶部链接栏上的第一个节点包含显示文本"SharePoint 顶部导航栏"。

表示顶部链接栏节点树的根节点的 SPNavigationNode 对象具有一个 Children 属性，该属性返回 SPNavigationNode 对象的集合。该集合中的对象表示顶部链接栏上的可见节点。该集合是可枚举的，因此您可以轻松地循环访问该集合，如下面的小控制台应用程序中所示：

using System;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Navigation;

namespace ConsoleApp
{
    class Program
    {
        static void Main(string[] args)
        {
            using (SPSite site = new SPSite("https://localhost"))
            {
                using (SPWeb web = site.OpenWeb())
                {
                    SPNavigationNode toplinkbar = web.Navigation.GetNodeById(1002);
                    if (toplinkbar != null)
                    {
                        foreach (SPNavigationNode node in toplinkbar.Children)
                        {
                            Console.Write("| {0} ", node.Title);
                        }
                        Console.WriteLine("|");
                    }
                }
            }
            Console.Write("\nPress ENTER to continue....");
            Console.ReadLine();
        }
    }
}

Imports System
Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.Navigation

Module ConsoleApp

    Sub Main()

        Using site As New SPSite("https://localhost")

            Using web As SPWeb = site.OpenWeb()

                Dim toplinkbar As SPNavigationNode = web.Navigation.GetNodeById(1002)

                If toplinkbar IsNot Nothing Then

                    For Each node As SPNavigationNode In toplinkbar.Children
                        Console.Write("| {0} ", node.Title)
                    Next
                    Console.WriteLine("|")

                End If

            End Using

        End Using

        Console.Write(vbCrLf & "Press ENTER to continue....")
        Console.Read()
    End Sub

End Module

快速启动

"快速启动"是一个可以显示在网站页面左侧的链接菜单。该菜单供在网站中导航使用，通常包含指向列表、文档库及其他网站内容的链接。它还可包含指向外部内容的链接。

网站所有者可以通过访问"网站操作"菜单上的管理用户界面，启用或隐藏"快速启动"菜单。开发人员可以通过编写代码完成相同的操作。有关详细信息，请参阅如何：显示或隐藏快速启动。

在 v4.master 中，定义"快速启动"菜单的标记嵌套在 ContentPlaceHolder 控件 (ID="PlaceHolderLeftNavBar") 内，该控件中还包含树视图控件标记。因此，页面设计人员可以选择将这两个导航控件替换为自己的内容。与某些内置 Web 模板关联的内容页会替换其他内容。"会议工作区"模板就是一个示例。

"快速启动"菜单标记定义两个版本，每个版本位于一个 UIVersionedContent 控件内。对于一个 UIVersionedContent 控件，UIVersion 属性值为"3"，而对于另一个控件，该值为"4"。在页面上呈现哪个版本取决于网站集管理员是否对网站集内的网站应用了新用户界面。有关详细信息，请参阅直观升级。

备注

通过访问 SPWeb.UIVersion 属性，可以编程方式获取用户界面的版本号。

"快速启动"菜单版本 4 由以下标记进行定义：

<SharePoint:AspMenu 
    id="V4QuickLaunchMenu" 
    runat="server" 
    EnableViewState="false" 
    DataSourceId="QuickLaunchSiteMap" 
    UseSimpleRendering="true" 
    UseSeparateCss="false" 
    Orientation="Vertical" 
    StaticDisplayLevels="2" 
    MaximumDynamicDisplayLevels="0" 
    SkipLinkText="" 
    CssClass="s4-ql" />

"快速启动"菜单显示为一系列标题，这些标题下面可能具有一个或多个级别的菜单项。页面上实际呈现的菜单级别数取决于呈现该菜单的 AspMenu 控件的配置。

在上一个示例中，StaticDisplayLevels 属性值为"2"，这表示显示两个菜单级别：一个标题，加上该标题下的一个级别。这两个标题下的其他级别可在动态弹出菜单中显示。在弹出菜单上显示多少级别受 MaximumDynamicDisplayLevels 属性的设置控制。在此示例中，该属性值为"0"，表示禁用弹出菜单。因此，如果"快速启动"具有两个以上的菜单级别，则不会显示它们。

AspMenu 控件标记中的 DataSourceID 属性指向 SiteMapDataSource 控件，该控件由以下标记配置：

<asp:SiteMapDataSource 
    SiteMapProvider="SPNavigationProvider" 
    ShowStartingNode="False" 
    id="QuickLaunchSiteMap" 
    StartingNodeUrl="sid:1025" 
    runat="server" />

与顶部链接栏的数据源的情况一样，"快速启动"菜单数据源的 ShowStartingNode 属性设置为 False。根节点包含有关"快速启动"菜单本身的信息，但这些信息不会显示。该菜单上的所有其他节点（链接）都是该节点的子级。StartingNodeUrl 属性值"sid:10252"指示"快速启动"根节点的 SharePoint 标识符。

可以使用下面一行代码来检索根节点：

SPNavigationNode quicklaunch = web.Navigation.GetNodeById(1025);

Dim quicklaunch as SPNavigationNode = web.Navigation.GetNodeById(1025)

检查该对象时，您会发现该对象的 Title 属性返回"快速启动"，Url 属性返回"/"。

节点树的根节点处的 SPNavigationNode 对象具有一个 Children 属性，该属性返回表示第一级别菜单项（即标题）的 SPNavigationNode 对象集合。每个标题还可以包含表示第二级别菜单项的子节点。第二级别的节点也可以包含子节点，在树结构上依次往下。

下面的控制台应用程序演示如何向下浏览"快速启动"菜单，并枚举各个项。该应用程序打印"快速启动"菜单上每个标题的显示文本，然后调用递归方法打印每个标题下所有菜单级别的显示文本。

using System;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Navigation;

namespace ConsoleApp
{
    class Program
    {
        static void Main(string[] args)
        {
            using (SPSite site = new SPSite("https://localhost"))
            {
                using (SPWeb web = site.OpenWeb())
                {
                    SPNavigationNode quicklaunch = web.Navigation.GetNodeById(1025);
                    if (quicklaunch != null)
                    {
                        foreach (SPNavigationNode heading in quicklaunch.Children)
                        {
                            PrintNode(heading);
                            Console.WriteLine(new String('-', 10));
                        }
                    }
                }
            }
            Console.Write("\nPress ENTER to continue....");
            Console.ReadLine();
        }

        static void PrintNode(SPNavigationNode node)
        {
            Console.WriteLine(node.Title);
            foreach (SPNavigationNode item in node.Children)
                 PrintNode(item);
        }
    }
}

Imports System
Imports Microsoft.SharePoint
Imports Microsoft.SharePoint.Navigation

Module ConsoleApp

    Sub Main()

        Using site As New SPSite("https://localhost")

            Using web As SPWeb = site.OpenWeb()

                Dim quicklaunch As SPNavigationNode = web.Navigation.GetNodeById(1025)

                If quicklaunch IsNot Nothing Then

                    For Each heading As SPNavigationNode In quicklaunch.Children

                        PrintNode(heading)
                        Console.WriteLine(New String("-", 10))

                    Next

                End If

            End Using

        End Using

        Console.Write(vbCrLf & "Press ENTER to continue....")
        Console.Read()
    End Sub

    Sub PrintNode(ByRef node As SPNavigationNode)

        Console.WriteLine(node.Title)
        For Each item As SPNavigationNode In node.Children
            PrintNode(item)
        Next

    End Sub

End Module

树视图

树视图导航元素用于显示所有网站内容的分层视图。默认情况下，禁用树视图。启用树视图时，它会显示在页面的左侧导航区域。如果启用"快速启动"，则树视图显示在它的下方。

网站管理员可以通过转到管理用户界面中的"树视图"页，启用树视图。若要查看"树视图"页，则单击"网站操作"，再单击"网站设置"。在"外观"下，单击"树视图"。

通过将 SPWeb.TreeViewEnabled 属性设置为 true，可以在代码中启用树视图。

与"快速启动"一样，树视图具有两个版本。在 v4.master 中，这两个版本均由嵌套在 SPRememberScroll 控件内的 SPTreeView 控件呈现。SPTreeView 控件从 SPHierarchyDataSourceControl 类的一个实例获取其数据。

在 v4.master 中，版本 4 由以下标记定义：

<SharePoint:DelegateControl runat="server" ControlId="TreeViewAndDataSource">
  <Template_Controls>
    <SharePoint:SPHierarchyDataSourceControl 
        runat="server" 
        id="TreeViewDataSourceV4" 
        RootContextObject="Web" 
        IncludeDiscussionFolders="true" />
    <SharePoint:SPRememberScroll 
        runat="server" 
        id="TreeViewRememberScrollV4" 
        onscroll="javascript:_spRecordScrollPositions(this);" 
        style="overflow: auto;height: 400px;width: 155px; ">
        <SharePoint:SPTreeView 
            id="WebTreeViewV4" 
            runat="server" 
            ShowLines="false" 
            DataSourceId="TreeViewDataSourceV4" 
            ExpandDepth="0" 
            SelectedNodeStyle-CssClass="ms-tvselected" 
            NodeStyle-CssClass="ms-navitem" 
            SkipLinkText="" 
            NodeIndent="12" 
            ExpandImageUrl="/_layouts/images/tvclosed.png" 
            ExpandImageUrlRtl="/_layouts/images/tvclosedrtl.png" 
            CollapseImageUrl="/_layouts/images/tvopen.png" 
            CollapseImageUrlRtl="/_layouts/images/tvopenrtl.png" 
            NoExpandImageUrl="/_layouts/images/tvblank.gif">
        </SharePoint:SPTreeView>
    </SharePoint:SPRememberScroll>
  </Template_Controls>
</SharePoint:DelegateControl>

请注意，树视图控件的数据源是一个 SPHierarchyDataSourceControl 对象，并且该对象的 RootContextObject 属性设置为"Web"。这样会设置树根节点所在的上下文。因此，树视图会呈现指向当前网站所有子网站的链接，后跟文档库和列表。

请参阅

任务

如何：向顶部链接栏或快速启动菜单添加子网站

如何：自定义快速启动显示

概念

如何：共享网站之间的顶部链接栏

如何：自定义顶部链接栏的显示

使用自定义数据源进行导航