添加带有自定义内容的应用栏 (HTML)

项目
03/04/2016

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

可将带有自定义内容的应用栏添加到使用 JavaScript 的 Windows 应用商店应用。它包含的 AppBar 控件和 AppBarCommand 控件可以采用多种方法进行自定义：可添加自定义 HTML 内容、创建浮出控件、插入切换命令等。

注意如果你想要为应用创建一个永久性导航栏，请改用 NavBar 控件。有关如何创建导航栏的详细信息，请参阅快速入门：添加导航栏和后退按钮。

先决条件

说明

使用“空白应用程序”模板创建新的项目

启动 Microsoft Visual Studio。
在“起始页”选项卡中，单击“新建项目”****。随即将打开“新建项目”对话框。
在“已安装”****窗格中，展开“模板”和“JavaScript”****并单击“Windows 应用商店应用”模板类型。JavaScript 可用的项目模板随即将显示在对话框的中心窗格中。
在中心窗格中，选取“空白应用程序”****项目模板。
在“名称”文本框中，键入“自定义 AppBar 演示”****。
单击“确定”以创建项目。

2. 添加栏控件并自定义其命令

可通过可自定义的应用栏命令自定义应用栏。可通过使用 AppBarCommand 控件的 type 属性，更改该控件类型。仅特定 HTML 元素可以托管某些应用栏命令类型。

AppBarCommand.type 属性采用以下五个值之一：

button—类型的默认值。它定义了标准按钮并仅可以应用到 <button> 元素。
flyout—创建一个要向其显示相邻 HTML 片段的按钮（浮出控件）。若要创建浮出 AppBarCommand，请将类型指定为"浮出控件"并设置其 flyout 属性。flyout 属性必须引用定义的 Flyout 控件。仅 <button> 元素可以托管浮出 AppBarCommand。
toggle—创建一个可被选择或清理的按钮。选中该按钮时，AppBarCommand 图标的颜色将变为相反颜色（例如，黑色变为白色和白色变为黑色）。仅 <button> 元素可以托管切换 AppBarCommand。
separator—在 AppBar 中创建一条水平线，以在其他 AppBarCommand 控件之间创建可视分离。仅 <hr/> 元素可以托管分隔符 AppBarCommand。
content—创建一个可在其中托管其他 HTML 标记的 AppBarCommand。托管的标记可以包括文本、<input> 标记、甚至是 Windows JavaScript (WinJS) 库控件的子集。仅 <div> 元素可以托管内容 AppBarCommand。

可以声明方式在 HTML 中或通过使用 JavaScript 在运行时创建 AppBar 和 AppBarCommand 控件。此示例将使用 default.html 的 HTML 标记以声明方式创建应用栏。本示例包含七个 AppBarCommand 控件。

Hh780658.wedge(zh-cn,WIN.10).gif 向应用栏添加自定义内容

在“解决方案资源管理器”中，从解决方案的根目录中打开 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>

摘要

在此快速入门中，你向应用添加了一个带有自定义按钮的应用栏。

本文未介绍如何创建导航栏。若要了解如何创建导航栏，请参阅快速入门：添加导航栏和后退按钮。

添加带有自定义内容的应用栏 (HTML)

先决条件

说明

2. 添加栏控件并自定义其命令

摘要

相关主题

其他资源