精通用JavaScript构建的Windows应用商店应用中的控件和设置

精通用JavaScript构建的Windows应用商店应用中的控件和设置2014-06-10 MSDN Rachel Appel良好的用户体验可将数据自然而然地以直观的方式展现给用户，无论什么外观尺寸都是如此。展现数据和内容时，需要使用经过更新的 API、控件和工具创造新式体验。在 Windows 应用商店应用中，所需的代码量以及控件的复杂程度取决于创建何种应用程序、它是生产力应用程序、游戏、社交应用程序还是财务应用程序。任何用 JavaScript 构建 Windows 应用商店应用的开发人员均可轻松掌握 Windows JavaScript 库（WinJS）控件，接下来我将谈论这些控件。

Windows 8 引入了新的 UI 范例和新的 UI 控件

Windows 应用商店应用的外观和行为与在 Windows 早期版本中运行的程序大相径庭。Windows 中已进行了重大革新，启动后显示新的“开始”页面，上面全都是动态磁贴，作为您与应用程序的第一层交互。其他的明显变化是 Windows 应用商店应用以全屏模式或对齐视图运行，使内容在正面居中，同时命令和菜单停留在视线之外，直到用户请求它们时才出现。

曾经无处不在的最小化、最大化和关闭按钮等 Windows UI 元素在 Windows 应用商店应用中不复存在，因为触摸轻扫和鼠标移动已使这些控件失去用处。若要关闭应用程序，只需从屏幕顶部到底部轻扫或下移鼠标。甚至菜单都不再固定出现在每个屏幕的顶部。在 Windows 应用商店应用中，菜单保持隐藏，直至触摸轻扫或鼠标手势从 AppBar 底部展现这些菜单，如图 1 所示，其中使用一个小型倒计时器应用程序作为示例。

图 1：应用程序底部的 AppBar

如您可在图 1 中所见，菜单在外侧，命令元素先是图形，后是一些文字，而非传统的先是文字菜单，偶尔配有图形。这些元素也完全符合手指大小。如果除了只是底部还需要更多空间容纳选项，则可放置导航栏，即页面顶部的 AppBar。

在传统 Windows 菜单中导航有时非常麻烦。我们都讨厌级联菜单深达 13 级的程序，以至于忘记最初所寻找的内容。在 Windows 应用商店应用中，导航本身与内容交织在一起，因为对 ListView 项的触摸和鼠标手势将调用其他页面。手指开合手势与 Ctrl 键+鼠标滚轮可激活语义式缩放（bit.ly/16IDtdi），即 Windows 应用商店应用中的控制和导航范例。SemanticZoom 是整个 WinJS 控件列表（bit.ly/w1jLM5）的一部分。

使用 HTML 和 WinJS 控件

Windows 应用商店应用中主要有两种使用 JavaScript 的控件：标准 HTML 元素和 WinJS 控件。WinJS 控件是 HTML 与扩展 HTML 元素外观或行为的预生成 JavaScript 相结合。由于这些控件是 HTML，因此可用 CSS 设置 WinJS 控件的样式。图 2 是一个基本 WinJS 控件的示例 WinJS DatePicker，它是由表示日、月和年的多个 DropDown 控件组成的一个控件，显示此代码的默认输出：

图 2：WinJS DatePicker 控件

当然，图 2 中的 DatePicker 控件在默认 WinJS 样式之外没有其他样式，但可通过重写 .win-datepicker-date、.win-datepicker -month 和 .win-datepicker-year WinJS CSS 选择器，改变这种情况。使用 .win- datepicker 设置整个控件的样式。

DatePicker（或任何 WinJS 控件）之所以正常工作是因为 HTML5 data-* 特性，称为 data-win-control。data-win-control 特性表示 WinJS 将在适当位置呈现的控件类型，因此当您将 data-win-control 特性的值设置为 WinJS.UI.DatePicker 时，该控件呈现图 2 中的下拉列表。通过 data-win- options 特性，可设置控件的其他属性。例如，可对 DatePicker 设置默认显示日期以及最小和最大日期范围的 data-win-options。虽然它名叫 DatePicker，但可更改该控件，让其改为捕获时间，例如小时、分钟和秒。

由于 WinJS 生成并呈现最终控件输出，因此设计时 HTML 与运行时 HTML 看起来颇有区别。图 3 演示 WinJS 在运行时注入到 host 元素的 HTML。可从 DOM 资源管理器（“调试”|“Windows”|“DOM 资源管理器”）中查看它。

图 3： DatePicker 呈现三个 DropDown，其中填写了日期/月/年的选项

<span class="win-datepicker" id="eventDate" role="group" lang="en-US" dir="ltr" data-win-control="WinJS.UI.DatePicker"><select tabindex="0" class="win-datepicker-month win-order0" aria-label="Select Month"><option value="January">January</option><option value="February">February</option><option value="March">March</option><option value="April">April</option><！-- more <options> that show the other months --></select><select tabindex="0" class="win-datepicker-date win-order1" aria-label="Select Day"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><！-- more <options> thatshow day numbers --></select><select tabindex="0" class="win-datepicker-year win-order2" aria-label="Select Year"><option value="1913">1913</option><option value="1914">1914</option><option value="1915">1915</option><option value="1916">1916</option><！—more <options> that show years --><option value="2112">2112</option><option value="2113">2113</option></select>