快速入门：添加导航栏 (NavBar)

项目
12/11/2015

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

了解如何将导航栏（也称为"导航栏"或"顶部应用栏"）添加到使用 JavaScript 的 Windows 应用商店应用。 Windows JavaScript 库 (WinJS) 包括 NavBar、NavBarCommand 和 NavBarContainer 控件，可帮助你构建单个页面导航页面。

注意 NavBar、NavBarCommand 和 NavBarContainer 控件是 Windows 8.1 的新控件。在 Windows 8 中，请使用 AppBar 控件和 placement 属性来提供导航栏。

大部分面向 Windows 应用商店应用的 Microsoft Visual Studio 2013 模板可实现导航框架，所以你不必执行此操作。包括页面控件项模板（请参阅添加页面控件）在内的模板包含 BackButton 控件，可让你向用户提供向后导航。

注意 Windows 应用商店应用通常使用两种导航模式（平面和分层）之一。我们建议不要在平面导航应用中使用 BackButton 对象。有关详细信息，请参阅导航模式。

我们在此处讨论的示例使用 Microsoft Visual Studio 空白应用模板。如果你使用默认样式和标记，则你放在 NavBar 控件中的命令将进行相应的样式设置。这包括命令图标的子画面和字形。

有关为你的应用选择最佳导航模式的帮助，请参阅导航模式。

同样，你可以在操作时参阅平面导航和分层导航模式，它们是应用功能大全系列的一部分。

先决条件

说明

1. 使用 Blank App 模板新建项目

启动 Visual Studio 2013。

注意首次运行 Visual Studio 时，它会提示你获取开发人员许可证。
选择“文件”>“新建项目”或从“起始页”选项卡单击“新建项目”。将打开“新建项目”对话框。
在“已安装”窗格中，依次展开“模板”和“JavaScript”，然后选择“Windows 应用商店应用”模板类型。JavaScript 可用的项目模板显示在对话框的中心窗格中。
在中心窗格中，选择“空白应用程序”****项目模板。
在“名称”文本框中，键入项目名称。本主题中的示例使用导航栏演示。
单击“确定”以创建项目。

2. 将导航栏定义添加到项目

导航栏既可以声明方式在 HTML 页面中进行定义，也可在运行时在与此页面一起加载的 JavaScript 文件中进行定义。此示例将使用 HTML 标记以声明方式创建导航栏。

打开 default.html 并将以下 HTML 插入 body 元素中。导航栏应是 body 元素的直接子项。

此处，我们声明一个包含带有两个 NavBarCommand 控件的 NavBarContainer 的 NavBar 控件。

注意有效时，我们不建议你将 NavBarCommand 控件添加为 NavBar 的直接子元素。按钮布局和键盘辅助功能都将受到威胁。


<div id="navBar" data-win-control="WinJS.UI.NavBar">
  <div id="globalNav" data-win-control="WinJS.UI.NavBarContainer">
    <div data-win-control="WinJS.UI.NavBarCommand"
      data-win-options="{
                    label: 'Home',
        tooltip: 'Take me home',
        id:'homeButton',
        icon: WinJS.UI.AppBarIcon.home,
        location: '/pages/home/home.html',
      }">
    </div>
    <div data-win-control="WinJS.UI.NavBarCommand"
      data-win-options="{
                    label: 'Page 2',
        tooltip: 'Take me to Page 2',
        id:'page2Button',
        icon: WinJS.UI.AppBarIcon.page,
        location: '/pages/page2/page2.html',
      }">
    </div>
  </div>
</div>

3. 添加导航处理程序代码

在标记中声明的 NavBarCommand 对象本身会引发导航事件（Navigation.onnavigating 和 Navigation.onnavigated），因此无需向 NavBarCommand 对象添加处理程序代码。但需要向与 default.html 文件相关的 default.js 文件中的 Navigation.onnavigating 或 Navigation.onnavigated 事件中添加处理程序代码。

以下的示例将一个处理程序添加到 Navigation.onnavigated 事件。该处理程序从事件对象（在 NavBarCommand 的 data-win-options 属性的 location 属性中定义）获取导航的位置的 URL。然后处理程序清空现有内容的内容主机（页面控件）并呈现主机中的新页面。

在“解决方案资源管理器”中，打开 js 文件夹中的 default.js。

在 default.js 中，将默认代码替换为以下代码。


(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;
    var nav = WinJS.Navigation;

    app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // Add your initialization code here.
            } else {
                // Restore app state here.
            }

            var start = WinJS.UI.processAll().
                then (function () {
                    return nav.navigate("/pages/home/home.html");
                                                                });

            args.setPromise(start);
        }
    };

    app.oncheckpoint = function (args) {
        // Add app suspension code here.
    };

    nav.onnavigated = function (evt) {
        var contentHost = 
            document.body.querySelector("#contenthost"),
            url = evt.detail.location;

        // Remove existing content from the host element.
        WinJS.Utilities.empty(contentHost);

        // Display the new page in the content host.
        WinJS.UI.Pages.render(url, contentHost);
    }

    app.start();
})();

4. 添加要在其间导航的两个页面

你可以手动或通过 Visual Studio 页面控件项模板添加这些页面，该模板可提供所有所需的标记和 JavaScript 代码。

Dn376409.wedge(zh-cn,WIN.10).gif 手动将新页面添加到项目

在“解决方案资源管理器”中，右键单击项目名称（“导航栏演示”），然后依次选择“添加”、“新建文件夹”。将此新文件夹命名为 "pages"。
右键单击你刚刚创建的“pages”文件夹并选择“添加”****、“新文件夹”。将此新文件夹命名为 "home"。
在“pages”****下创建第二个文件夹。将此文件夹命名为 "page2"。
右键单击“home”文件夹并选择“添加****、“新 HTML 文件”。在“添加新项”****对话框中，将此文件命名为 "home.html" 并选择“添加”。

将默认 HTML 替换为以下内容。
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>Home</p>
</body>
</html>
```
对“page2”****文件夹重复执行前面的步骤。将此文件命名为 " page2.html"。

将默认 HTML 替换为以下内容。
```
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>Page2</p>
</body>
</html>
```

此外，可使用 Visual Studio 中的面向 Windows 应用商店应用的 JavaScript 项模板。

Dn376409.wedge(zh-cn,WIN.10).gif 使用页面控件项模板将新页面添加到项目

如之前所述，创建带有“home”和“page2”****子文件夹的“pages”文件夹。
右键单击“home”文件夹，然后选择“添加”>“新建项目...”。即会出现“添加新项目”对话框。
从列表中选择“页面控件”。在“名称”****文本框中，键入 "home.html"。
单击“添加”。然后新的 PageControl 对象将显示在“解决方案资源管理器”中。

新的 PageControl 包含三个文件：home.css、home.html 和 home.js。

注意用此方式添加的 HTML 文件包括 BackButton 控件的代码。如之前所述，如果你要使用平面导航模式，我们建议你不要使用 BackButton。这样你可以安全地删除此代码。有关详细信息，请参阅导航模式。
右键单击“page2”文件夹，然后选择“添加”>“新建项目...”****。即会出现“添加新项目”对话框。
从列表中选择“页面控件”****。在“名称”文本框中，键入 "page2.html"。
单击“添加”****。然后新的 PageControl 对象将显示在“解决方案资源管理器”中。

新的 PageControl 具有三个文件：page2.css、page2.html 和 page2.js。

5. 测试应用

按 F5 以运行应用。应用将显示“Home”页面。
当应用运行时，右键单击应用的任意位置，以显示导航栏，然后选择“Page2”****。

“Page2”页面随即显示在应用的页面控件中。
再次右键以单击导航栏，然后选择“Home”****。

“Home”页面随即显示在应用的页面控件中。

摘要和后续步骤

在本快速入门中，你向应用中添加了一个具有一个 NavBarContainer 对象和四个 NavBarCommand 对象的 NavBar 对象。此外，还为 Navigation.onnavigated 事件添加一个简单的处理程序函数。

有关更复杂的分层导航和布局示例，请参阅我们的下一个关于 Hub 控件的教程。

快速入门：为布局和导航使用中心控件