WINJS：添加WINJS控件

HTML有很多固有的控件：input、div、span等，但是winJs没有特殊的标记元素，想要添加winJs控件，可以通过创建div，然后使用 data-win-control 属性指定所需的控件类型，例如：

添加 Rating控件

<div data-win-control="WinJS.UI.Rating"></div>

你还必须在 JavaScript 代码中调用 WinJS.UI.processAll 函数。WinJS.UI.processAll 分析你的标记并实例化它所找到的任何 WinJS 控件（调用这个函数后你的WINJS控件就渲染出来了）。

以下是winJs控件列表：

 

控件	描述
AppBar	显示命令。
BackButton	为用户提供向后导航的按钮。
DatePicker	使用户能够选择日期。
FlipView	显示一个项集合，一次显示一项。
Flyout	显示要求用户交互的消息。（与对话框不同的是，Flyout 不创建单独的窗口。）
ListView	以网格或列表布显示一个项集合。
HtmlControl	显示 HTML 页面。
ItemContainer	创建可以按、轻扫和拖动的项。
Menu	用来显示命令的菜单弹出窗口。
NavBar	可以显示导航命令的 AppBar 类型。
PageControl	一组描述页面的 HTML、JavaScript 和 CSS。你可以导航至 PageControl 或像使用自定义控件那样使用 Page 控件。
Rating	允许用户对项进行分级。
Repeater	从一组数据和模板生成 HTML。
SearchBox	使用户可以执行搜索查询并选择建议。
SemanticZoom	允许用户在两个子控件所提供的两个不同视图之间进行缩放。 一个子控件提供缩小视图，另一个子控件提供放大视图。
SettingsFlyout	为用户提供在上下文中对应用设置的快速访问。
TimePicker	使用户能够选择时间。
ToggleSwitch	打开或关闭项。
Tooltip	显示可支持丰富内容（例如图像和带格式文本）的工具提示，以显示有关某个对象的详细信息。
ViewBox	缩放单独的子元素，从而能够不调整大小来填充可用空间。此控件对容器的大小变化和子元素的大小变化进行响应。例如，当媒体查询导致纵横比发生变化时，此控件会进行响应。
x-ms-webview	显示 HTML 内容。使用该控件在你的应用中显示网页。

 

为Document增加load监听以在load时执行WinJS.UI.processAll函数：

function initialize() {
    WinJS.UI.processAll();
}

document.addEventListener("DOMContentLoaded", initialize(), false);

 

如果要设置winJs控件的属性，可以用data-win-options属性来设置，此属性的值像一个JSON串，例如：

<div id="ratingControlHost" data-win-control="WinJS.UI.Rating" data-win-options="{maxRating: 10, averageRating: 6}">
</div>

在JS中获取上面定义的WINJS控件方式如下：

var control = document.getElementById("ratingControlHost").winControl; 

由于WinJS.UI.processAll函数是异步的，所以在此函数执行完之前不要去访问或操作页面的WINJS控件，WinJS.UI.processAll 返回一个 WinJS.Promise 对象，该对象可用来在 WinJS.UI.processAll 方法完成时调用函数。 以下示例定义一个用来检索控件并将它的 averageRating 设置为 3 的完成函数：

WinJS.UI.processAll().then(function () {
    var control = document.getElementById("ratingControlHost").winControl;
    control.averageRating = 3; 
});

 

使用JS来动态创建WINJS控件，先创建一个ID为‘hostElement’的DIV，然后是JS代码：

var hostElement = document.getElementById("hostElement");
var ratingControl = new WinJS.UI.Rating(hostElement);