添加带有命令的应用栏 (HTML)

项目
03/04/2016

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

本文章介绍如何向使用 JavaScript 的 Windows 运行时应用添加应用栏。如果使用此示例中显示的默认样式和标记，则放在应用栏中的命令将进行相应的样式设置。命令图标既支持图像的子画面又支持字形。

（仅限 Windows）请将此操作功能视为我们的应用功能大全系列的一部分 : Windows 应用商店应用 UI 全解

先决条件

说明

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

启动 Microsoft Visual Studio。
在“起始页”选项卡中，单击“新建项目”****。随即将打开“新建项目”对话框。
在“已安装”窗格中，展开“模板”和“JavaScript”，然后单击“应用商店应用”模板类型。选择你要面向的平台（“通用应用”、“Windows 应用”或“Windows Phone 应用”），但是对于此快速入门，我们将使用“通用应用”。
在中心窗格中，选取“空白应用（通用应用）****项目模板（暂时不要单击“确定”）。
在“名称”****文本框中，输入“应用栏演示”。
单击“确定”****以创建项目。

2. 将应用栏定义添加到该项目

应用栏在 HTML 文件中使用相应的 JavaScript 文件定义（一个适用于 Windows，另一个适用于 Windows Phone）。

如下所示，对于每个平台（即 Windows 和 Windows Phone），打开 default.html 并使用以下 HTML 替换自动生成的 HTML。最佳做法是为每个应用程序都创建一个全局应用，并且此应用栏应该是 <body> 元素的直接子元素。在 DOM 中，最好将全局命令放在上下文命令之前，以便在用户贴靠应用时获取最佳布局。

以下示例将添加一个应用栏，其中有一个左对齐的命令和三个用分隔符分开的右对齐命令。

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>

小心以下示例代码块只在版本 2.1 时对 Windows Phone 有效。使用 WinJS 4.0 或更高版本时，正确方法是使用适用于 Windows 和 Windows Phone 应用的应用栏相同代码。

仅适用于 Windows Phone 2.1 - 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-cn,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. 开发人员说明

只能在应用栏中使用 AppBarCommands。有关可用图标列表，请参阅 AppBarIcon 枚举。
应用栏是光解除该操作的叠加项，这表示它将始终覆盖屏幕的某些部分。
像所有光解除该操作的叠加项一样，应用栏必须始终是 <body> 元素的直接子项。
若要缓解应用栏叠加项性质以覆盖其他屏幕内容，请为关闭应用栏保留屏幕的顶部或底部空间。按照这种方式，仅打开的应用栏将覆盖其他内容。
可使用其 closedDisplayMode 属性控制关闭的应用栏高度。
应用栏顶部或底部位置由其 placement 属性控制。

摘要

在此快速入门中，已向应用程序添加应用栏。

通过

添加带有命令的应用栏 (HTML)

先决条件

说明

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

2. 将应用栏定义添加到该项目

3. 开发人员说明

摘要

相关主题

其他资源