新增包含命令的 AppBar (HTML)

發行項
03/04/2016

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

本文說明如何使用 JavaScript 將 AppBar 新增到 Windows 執行階段 app。如果使用這個範例中的預設樣式與標記，就會為您放入 AppBar 中的命令適當地設定樣式。命令圖示支援影像精靈和字型字符。

(僅限 Windows) 如需了解此功能的運作情形，請參閱應用程式功能，從開始到完成系列 : Windows 市集應用程式 UI，從開始到完成

先決條件

指示

1. 使用空白應用程式範本建立新專案

啟動 Microsoft Visual Studio。
在 [起始頁] 索引標籤，按一下 [新增專案]****。隨即開啟 [新增專案] 對話方塊。
在 [已安裝]**** 窗格中，展開 [範本] 和 [JavaScript]，然後按一下 [市集應用程式] 範本類型。選擇您要做為目標的平台 ([通用應用程式]、[Windows 應用程式] 或 [Windows Phone 應用程式]****)，但是針對這個快速入門，我們將使用 [通用應用程式]。
在中央窗格中，選取 [空白應用程式 (通用應用程式)]**** 專案範本 (還不要按 [確定])。
在 [名稱]**** 文字方塊中，輸入 AppBar 示範。
按一下 [確定] 來建立專案。

2. 將 AppBar 定義新增到專案

您的 AppBar 會定義在具有對應之 JavaScript 檔案的 HTML 檔案中 (一個用於 Windows，一個用於 Windows Phone)。

如下所示，針對每個平台 (也就是 Windows 和 Windows Phone)，開啟 default.html 並使用下列 HTML 取代自動產生的 HTML。最好的做法是為每個應用程式各建立一個全域 AppBar，且此 AppBar 應該為 <body> 元素的直接子項。也建議在 DOM 中，將全域命令放在關聯式命令前面，以在使用者貼齊 app 時取得最佳配置效果。

這個範例新增的 AppBar 包含一個靠左對齊的命令和三個靠右對齊的命令，並以分隔符號區隔。

Windows - default.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>App_bar_demo.Windows</title>

  <!-- WinJS references -->
  <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
  <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
  <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>

  <!-- App_bar_demo.Windows references -->
  <link href="/css/default.css" rel="stylesheet" />
  <script src="/js/default.js"></script>
  <script src="/js/appbar.js"></script> <!-- Not part of the stock template. -->
</head>
<body>
  <ol>
    <li>
      To show the AppBar, swipe up from the bottom of the screen, swipe down from
      the top of the screen, right-click, or press Windows&nbsp;Logo&nbsp;+&nbsp;Z.
    </li>
    <li>
      Click or tap one of the following AppBar buttons: <strong>Camera</strong>,
      <strong>Add</strong>, <strong>Remove</strong>, or <strong>Delete</strong>
    </li>
    <li>
      To dismiss the AppBar, click or tap in the application, swipe, right-click,
      or press Windows&nbsp;Logo&nbsp;+&nbsp;Z again.
    </li>
  </ol>
  <!-- BEGINTEMPLATE: Template code for an AppBar -->
  <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdAdd', label:'Add', icon:'add', section:'primary', tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove', section:'primary', tooltip:'Remove item'}"></button>
    <hr data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{type:'separator',section:'primary'}" /> <!-- SEPARATOR NOT AVAILABLE ON PHONE prior to WinJS 4.0 -->
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdDelete', label:'Delete', icon:'delete', section:'primary', tooltip:'Delete item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera', section:'secondary', tooltip:'Take a picture'}"></button>
  </div>
  <!-- ENDTEMPLATE -->
  <div id="statusMessage"></div>
</body>
</html>

注意下列範例程式碼區塊僅適用於 Windows Phone 2.1 版。使用 WinJS 4.0 和更新版本時，正確的方法是對 Windows 和 Windows Phone App 的 AppBar 使用相同的 HTML 程式碼。

Windows Phone 2.1 only - default.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>App_bar_demo.WindowsPhone</title>

  <!-- WinJS references -->
  <!-- At runtime, ui-themed.css resolves to ui-themed.light.css or ui-themed.dark.css
  based on the user’s theme setting. This is part of the MRT resource loading functionality. -->
  <link href="/css/ui-themed.css" rel="stylesheet" />
  <script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
  <script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>

  <!-- App_bar_demo.Phone references -->
  <link href="/css/default.css" rel="stylesheet" />
  <script src="/js/default.js"></script>
  <script src="/js/appbar.js"></script> <!-- Not part of the stock template. -->
</head>
<body class="phone">
  <p>
    Tap the Add, Remove, or Delete AppBar button, or swipe the ellipsis and tap the Camera AppBar button.
  </p>
  <!-- BEGINTEMPLATE: Template code for an AppBar -->
  <div id="appBar" data-win-control="WinJS.UI.AppBar" data-win-options="">
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdAdd', label:'Add', icon:'add', section:'primary', tooltip:'Add item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdRemove', label:'Remove', icon:'remove', section:'primary', tooltip:'Remove item'}"></button>
    <!-- <hr data-win-control="WinJS.UI.AppBarCommand"
        data-win-options="{type:'separator',section:'primary'}" /> SEPARATOR NOT AVAILABLE ON PHONE -->
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdDelete', label:'Delete', icon:'delete', section:'primary', tooltip:'Delete item'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'cmdCamera', label:'Camera', icon:'camera', section:'secondary', tooltip:'Take a picture'}"></button>
  </div>
  <!-- ENDTEMPLATE -->
  <div id="statusMessage"></div>
</body>
</html>

Hh465309.wedge(zh-tw,WIN.10).gif 新增 Appbar.js 檔案

在 [方案總管] 中，使用滑鼠右鍵按一下 [js] 資料夾、指向 [加入]****，然後按一下 [新增項目]。
在已安裝窗格中，展開 [JavaScript]，按一下 [JavaScript 檔案]**** (位於對話方塊的中央窗格)。
在 [名稱] 文字方塊 (靠近對話方塊的底部) 中，輸入 Appbar.js。
按一下 [加入] 以建立檔案，並將它新增到專案。

開啟 Appbar.js (如有必要)，然後新增下列程式碼。

(function () {
  "use strict";

  WinJS.UI.Pages.define("default.html", {
    ready: function (element, options) {
      // Use element.querySelector() instead of document.getElementById() to ensure that the correct default.html page is targeted:
      element.querySelector("#cmdAdd").addEventListener("click", doClickAdd, false);
      element.querySelector("#cmdRemove").addEventListener("click", doClickRemove, false);
      element.querySelector("#cmdDelete").addEventListener("click", doClickDelete, false);
      element.querySelector("#cmdCamera").addEventListener("click", doClickCamera, false);
    }
  });

  // Command button functions
  function doClickAdd() {
    WinJS.log && WinJS.log("Add button pressed", "status");
  }

  function doClickRemove() {
    WinJS.log && WinJS.log("Remove button pressed", "status");
  }

  function doClickDelete() {
    WinJS.log && WinJS.log("Delete button pressed", "status");
  }

  function doClickCamera() {
    WinJS.log && WinJS.log("Camera button pressed", "status");
  }

  WinJS.log = function (message, messageType) {
    var statusDiv = document.getElementById("statusMessage"); // For a multi-page app, always ensure that each element ID is unique (across all pages).

    if (statusDiv && messageType === "status") {
      statusDiv.innerText = "STATUS: " + message;
    }
  };
})();

Appbar.js 檔案會透過其 <script src="/js/appbar.js"></script> 標記插入到兩個 default.html 檔案中。

3. 開發人員注意事項

您在 AppBar 中只能使用 AppBarCommands。如需可使用的圖示清單，請參閱 AppBarIcon 列舉。
AppBar 是一個淺色可解除的覆疊，表示它永遠會覆蓋在畫面的某個部分。
AppBar 就像所有淺色可解除的覆疊一樣，必須永遠是 <body> 元素的直接子項。
若要減輕 AppBar 覆疊覆蓋住其他螢幕內容的特性，請在畫面的頂端和底部保留空間供關閉的 AppBar 使用。如此一來，只有開啟的 AppBar 會覆蓋其他內容。
關閉的 AppBar 高度可使用其 closedDisplayMode 屬性控制。
AppBar 的頂端或底部位置則是由其 placement 屬性控制。

摘要

在這個快速入門中，您新增了一個 AppBar 到您的應用程式中。

新增包含命令的 AppBar (HTML)

先決條件

指示

1. 使用空白應用程式範本建立新專案

2. 將 AppBar 定義新增到專案

3. 開發人員注意事項

摘要

相關主題

其他資源