共用方式為


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

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

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

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

 

先決條件

指示

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

  1. 啟動 Microsoft Visual Studio。

  2. 在 [起始頁] 索引標籤,按一下 [新增專案]****。隨即開啟 [新增專案] 對話方塊。

  3. 在 [已安裝的]**** 窗格中,展開 [範本] 和 [JavaScript]****,然後按一下 [Windows 市集應用程式] 範本類型。適用於 JavaScript 的可用專案範本會顯示在對話方塊的中央窗格中。

  4. 在中央窗格中,挑選 [空白應用程式]**** 專案範本。

  5. 在 [名稱] 文字方塊中,輸入自訂應用程式列示範

  6. 按一下 [確定] 來建立專案。

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 中以宣告方式建立 AppBarAppBarCommand 控制項,或使用 JavaScript 在執行階段建立。這個範例會在 default.html 的 HTML 標記中以宣告方式建立 AppBar。範例包含七個 AppBarCommand 控制項。

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

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

  2. 使用下列標記取代 <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 中。

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

相關主題

WinJS.UI.AppBar

WinJS.UI.AppBarCommand.type

WinJS.UI.AppBarCommand.flyout

快速入門:新增飛出視窗