1

我使用 javaScript 为我的 windows8 应用程序创建了一个 appbar。

我想将 appbar 按钮的标签放在 appbar 图标旁边，而不是 appbar 图标下方。

谁能告诉我这是否可能。如果是，如何？

4

1 回答 1

2

首先，我对以这种方式更改默认行为有点谨慎，因为它会偏离用户对平台上大多数其他应用程序的体验。也就是说，我认为它应该是可行的，至少以一种方式。

以下是一些需要考虑的方法，并不是我认为任何“最佳”方法，但它们可能是您开始的地方：

查看生成对象的结构（您可以在 Blend 中使用交互模式），您可以看到命令是两个堆叠的跨度标签（一个包含图标和圆圈，另一个包含命令文本）。从WinJS.UI.AppBar文档，您可以设置这些 span 的样式，但由于 span 是一个内联元素，我不相信您可以垂直移动它以使其位于按钮旁边。你可以玩margin-right一下margin-left。

现在另一种选择是尝试重写生成的 DOM，以便您将表示作为 span 标签丢弃并自己构建一些东西，但这是很多未知脆弱性的工作。

第三种选择大致相当于修改 DOM 的设计时。不要使用 AppBar 的默认行为，而是创建自定义布局。例如，以下标记（不是生产质量的，具有内联样式和所有 :)）会生成随后的图像：

    <div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{layout: 'custom'}">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd',  icon:'placeholder'}" type="button"></button>
    <span style="margin-left: -28px; font-size: 0.8em">Command 1</span>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd',  icon:'placeholder'}" type="button"></button>
    <span style="margin-left: -28px; font-size: 0.8em">Command 2</span>
</div>

在此处输入图像描述

Windows 开发中心上有一个AppBar 示例，如果您采用自定义路线，它也可能对您有所帮助。

于 2013-01-22T07:35:54.540 回答