新增含自訂內容的 AppBar (HTML)

發行項
03/04/2016

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

您可以將含有自訂內容的 AppBar 新增到使用 JavaScript 的 Windows 市集應用程式。其中包含的 AppBar 控制項與 AppBarCommand 控制項可透過各種方式自訂：您可以新增自訂 HTML 內容、建立飛出視窗、插入切換命令等。

注意如果您要為應用程式建立永久性瀏覽列，請改用 NavBar 控制項。如需如何建立瀏覽列的詳細資訊，請參閱快速入門：新增瀏覽列與上一頁按鈕。

先決條件

指示

使用空白 App 範本建立新專案

啟動 Microsoft Visual Studio。
在 [起始頁] 索引標籤，按一下 [新增專案]****。隨即開啟 [新增專案] 對話方塊。
在 [已安裝的]**** 窗格中，展開 [範本] 和 [JavaScript]****，然後按一下 [Windows 市集應用程式] 範本類型。適用於 JavaScript 的可用專案範本會顯示在對話方塊的中央窗格中。
在中央窗格中，挑選 [空白應用程式]**** 專案範本。
在 [名稱] 文字方塊中，輸入自訂應用程式列示範。
按一下 [確定] 來建立專案。

2. 新增列控制項並自訂它的命令

您可以透過可自訂的 AppBar 命令來自訂 AppBar。您可以使用 AppBarCommand 控制項的 type 屬性來變更該控制項的類型。只有特定 HTML 元素才能裝載某些 AppBar 命令類型。

AppBarCommand.type 屬性會採用下列五個值其中之一：

button— 該類型的預設值。它可定義標準按鈕，且只能套用到 <button> 元素。
flyout— 建立按鈕以顯示與其相鄰的 HTML 片段 (飛出視窗)。若要建立飛出視窗 AppBarCommand，請將類型指定為 "flyout" 並設定 flyout 屬性。flyout 屬性必須參照已定義的 Flyout 控制項。只有 <button> 元素才能裝載 flyout AppBarCommand。
toggle— 建立一個可選取或可清除的按鈕。選取按鈕時，AppBarCommand 的圖示色彩會反轉 (例如黑變白、白變黑)。只有 <button> 元素才能裝載 toggle AppBarCommand。
separator— 在 AppBar 中建立水平線，以在其他 AppBarCommand 控制項之間建立視覺區隔。只有 <hr/> 元素才能裝載 separator AppBarCommand。
content— 建立 AppBarCommand 以在其中裝載其他 HTML 標記。裝載的標記可包括文字、<input> 標記，甚至是適用於 JavaScript 的 Windows Library (WinJS) 控制項子集。只有 <div> 元素才能裝載 content AppBarCommand。

您可在 HTML 中以宣告方式建立 AppBar 與 AppBarCommand 控制項，或使用 JavaScript 在執行階段建立。這個範例會在 default.html 的 HTML 標記中以宣告方式建立 AppBar。範例包含七個 AppBarCommand 控制項。

Hh780658.wedge(zh-tw,WIN.10).gif 將自訂內容新增到 AppBar

在 [方案總管] 中，從方案根目錄開啟 default.html 檔案。

使用下列標記取代 <body> 標記內的標記。

<div data-win-control="WinJS.UI.AppBar"
    data-win-options="{
        placement: 'bottom'
    }">
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'default'
            icon: 'placeholder',
            label: 'Button',
            type: 'button'
    }">
    </button>
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'flyout', 
            icon: 'volume', 
            label: 'Volume', 
            type: 'flyout',
            flyout: select('#volumeFlyout')}">
    </button>
    <button data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{
            id: 'toggle', 
            icon: 'filter', 
            label: 'Filter', 
            type: 'toggle'}">
    </button>
    <hr data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'separator' }"/>
    <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'content' }">
        <p>You can include a wide variety of HTML inside of a 'content' AppBarCommand, <br/>
        including HTML and some WinJS controls.</p>
    </div>
    <div data-win-control="WinJS.UI.AppBarCommand" data-win-options="{ type: 'content' }">
        <div id="itemContainer"
             data-win-control="WinJS.UI.ItemContainer">
            <h3>Item Container</h3>
        </div>
    </div>
</div>
<div id="volumeFlyout"
     data-win-control="WinJS.UI.Flyout">
    <h3>Volume</h3> <input type="range" />
</div>

摘要

在這個快速入門中，您新增了一個含有自訂按鈕的 AppBar 到您的 app 中。

本文不會說明如何建立瀏覽列。若要了解如何建立瀏覽列，請參閱快速入門：新增瀏覽列與上一頁按鈕。

共用方式為

新增含自訂內容的 AppBar (HTML)

先決條件

指示

2. 新增列控制項並自訂它的命令

摘要

相關主題

其他資源