快速入門：新增瀏覽列 (NavBar)

發行項
12/11/2015

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

了解如何將瀏覽列 (也稱為「瀏覽器列」""或「頂端應用程式列」"") 新增到使用 JavaScript 的 Windows 市集應用程式。適用於 JavaScript 的 Windows Library (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. 使用空白應用程式範本建立新專案

啟動 Visual Studio 2013。

注意第一次執行 Visual Studio 時，會提示您取得開發人員授權。
選擇 [檔案] > [新增專案]，或從 [起始頁] 索引標籤中按一下 [新增專案]。隨即開啟 [新增專案] 對話方塊。
在 [已安裝的]**** 窗格中，展開 [範本] 和 [JavaScript]****，然後選取 [Windows 市集應用程式] 範本類型。適用於 JavaScript 的可用專案範本會顯示在對話方塊的中央窗格中。
在中央窗格中，選取 [空白應用程式]**** 專案範本。
在 [名稱] 文字方塊中，輸入專案的名稱。這個主題中的範例使用瀏覽列示範。
按一下 [確定] 來建立專案。

2. 將瀏覽列定義新增到專案

您的瀏覽列可以在 HTML 頁面中以宣告方式定義，或在執行階段隨頁面載入的 JavaScript 檔案中定義。這個範例會在 HTML 標記中以宣告方式建立瀏覽列。

開啟 default.html，在 body 元素內插入下列 HTML。瀏覽列應該是 body 元素的直屬子系。

我們在此處宣告包含 NavBarContainer 的 NavBar 控制項以及兩個 NavBarCommand 控制項。

注意雖然這是有效的，但建議您不要將 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 屬性 (Attribute) 的 location 屬性 (Property) 中) 取得瀏覽目標的位置 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-tw,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-tw,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 來執行應用程式。應用程式會顯示 [首頁]。
應用程式執行時，使用滑鼠右鍵按一下應用程式中任一處以叫出瀏覽列，然後選擇 [Page2]****。

[Page2] 頁面會顯示於應用程式的頁面控制項中。
再次使用滑鼠右鍵按一下以叫出瀏覽列，然後選擇 [首頁]****。

[首頁] 會顯示於應用程式的頁面控制項中。

摘要與後續步驟

在這個快速入門中，您已經在應用程式中新增了包含一個 NavBarContainer 物件和四個 NavBarCommand 物件的 NavBar 物件。您也為 Navigation.onnavigated 事件新增了一個簡單的處理常式函式。

如需更複雜的階層式瀏覽和配置範例，請參閱我們下一個關於 Hub 控制項的教學課程。

快速入門：針對配置和瀏覽使用 Hub 控制項