win8：添加WinJS控件

最新推荐文章于 2024-11-02 11:32:21 发布

weixin_34001430

最新推荐文章于 2024-11-02 11:32:21 发布

阅读量107

点赞数

文章标签： ui javascript ViewUI

其实在 win8: hello gril 已经添加过了WinJS的Rating的控件。现在简单抽出小结一下添加WinJS控件的方法。

Check：http://msdn.microsoft.com/en-us/library/windows/apps/hh465493.aspx

使用标记添加 WinJS 控件

与 HTML 控件不同的是，适用于 JavaScript 的 Windows 库控件没有专用的标记元素：例如，你不能通过添加 <rating /> 元素来创建 Rating 控件。若要添加适用于 JavaScript 的 Windows 库控件，可以创建 div 元素并使用 data-win-control 属性指定所需的控件类型。若要添加Rating 控件，请将该属性设置为 "WinJS.UI.Rating"。

你还必须在 JavaScript 代码中调用 WinJS.UI.processAll 函数。WinJS.UI.processAll 分析你的标记并实例化它所找到的任何适用于 JavaScript 的 Windows 库控件。

在标记中设置 WinJS 控件的属性

与 HTML 控件不同的是，适用于 JavaScript 的 Windows 库控件没有专用的元素或属性标记；例如，你不能使用以下标记为所创建的 Rating控件设置属性：

<!-- Not valid markup. -->
<rating maxRating="10" averageRating="6" />

改用 data-win-options 特性在标记中设置属性。它采用一个包含一个或多个属性/值对的字符串(多个用逗号隔开)：

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

处理 WinJS 控件的事件

在 JavaScript 中，检索该控件的主机元素并使用它的 winControl 属性检索该控件。
调用该控件的 addEventListener 函数并指定一个事件和一个事件处理程序。

            args.setPromise(WinJS.UI.processAll().then(function () {
                var control = document.getElementById("ratingControlHost").winControl;
                control.addEventListener("change", ratingChanged, false); 
            }));

注意要在异步操作WinJS.UI.processAll() 之后执行。ratingChanged是处理方法。