添加 WinJS 控件

来源：互联网发布：淘宝网免费下载编辑：程序博客网时间：2024/05/01 05:53

WinJS 控件是针对 Windows 商店应用设计的控件，它提供了众多控件，让开发更加轻松，同时保证了应用风格的一致性。有很多控件非常实用，例如 WinJS.UI.DatePicker，WinJS.UI.Rating等。完整的控件列表。

在应用中添加 WinJS 控件有两种方式，一种是使用标记，另一种是使用 JavaScript 动态添加。先讨论使用标记的情况。

由于 WinJS 的控件没有标准的 HTML 标记，不能像 button 那样直接显示一个按钮，需要用 div 元素并且为它设置 data-win-control 属性指定所需的控件类型。此外还要确保 WinJS.UI.processAll 函数被调用，这个函数会扫描 HTML 文件并为你创建制定的 WinJS 控件。

例如在 default.html 中添加一个 Rating 控件，

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Adding WinJS controls and styles</title>    <!-- WinJS references -->    <link href="//Microsoft.WinJS.2.0.Preview/css/ui-dark.css" rel="stylesheet">    <script src="//Microsoft.WinJS.2.0.Preview/js/base.js"></script>    <script src="//Microsoft.WinJS.2.0.Preview/js/ui.js"></script>    <!-- AddingWinJSControlsAndStyles references -->    <link href="/css/default.css" rel="stylesheet">    <script src="/js/default.js"></script></head><body>    <p>Create a WinJS control in markup</p>    <div id="ratingControlHost" data-win-control="WinJS.UI.Rating">    </div></body></html>

然后在 default.js 中必须确保 WinJS.UI.processAll 函数被调用：

(function () {    "use strict";    var app = WinJS.Application;    var activation = Windows.ApplicationModel.Activation;    WinJS.strictProcessing();    app.onactivated = function (args) {        if (args.detail.kind === activation.ActivationKind.launch) {            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {                // TODO: This application has been newly launched. Initialize                // your application here.            } else {                // TODO: This application has been reactivated from suspension.                // Restore application state here.            }            args.setPromise(WinJS.UI.processAll());        }    };    app.oncheckpoint = function (args) {        // TODO: This application is about to be suspended. Save any state        // that needs to persist across suspensions here. You might use the        // WinJS.Application.sessionState object, which is automatically        // saved and restored across suspension. If you need to complete an        // asynchronous operation before your application is suspended, call        // args.setPromise().    };    app.start();})();

如果你是把控件添加到自定义的页面中，则需要在 DOMContentLoaded 事件中调用 WinJS.UI.processAll 激活控件。

function initialize() {    WinJS.UI.processAll();}document.addEventListener("DOMContentLoaded", initialize(), false);

控件添加成功后，我们可以对控件进行一些配置，例如设置 rating 的默认数值，最大的数值等。可以使用 data-win-options 属性中设置。例如：

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

控件添加后，可以用 JavaScript 来访问它，只是与标准的 HTML 控件有少许不同，需要使用代表 winJS 控件的HTML元素的 winControl 属性来访问它。需要注意的是，必须在 WinJS.UI.processAll 完成之后才能访问。

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