添加 WinJS 控件

最新推荐文章于 2021-06-10 14:31:13 发布

rainyjune

最新推荐文章于 2021-06-10 14:31:13 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/rainyjune/article/details/9839085

版权

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; 
});

rainyjune

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
添加 WinJS 控件

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

扫一扫