设置浮出控件中的 WinJs 捕获事件

我有一个反馈设置浮出控件（反馈.html）：

<!DOCTYPE html>
<html>
<head>
    <title>Feedback settings flyout</title>
</head>
<body>
    <div id="helpDiv" data-win-control="WinJS.UI.SettingsFlyout" aria-label="Help Settings flyout"
                data-win-options="{settingsCommandId:'feedback'}">
            <div class="win-header" style="background-color: rgb(246, 84, 84)">
                <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
                <div class="win-label">Feedback</div>
            </div>
            <div class="win-content">
                <section>
                    <label for="titleInput">Title: </label>
                    <input id="titleInput" style="display:block"/>
                </section>
                <section>
                    <label for="feedbackBody">Content: </label>
                    <textarea style="width:250px; height:400px;" id="feedbackBody">
                    </textarea>
                </section>
                <button id="submit">Submit feedback</button>
            </div>
    </div>
</body>
</html>

我的问题是：如何在此浮出控件上运行代码隐藏？反馈.js永远不会加载，我只想当用户单击按钮向我发送他刚刚输入的文本时。我该怎么做？

查看应用设置示例（Win8 |Win8.1），在方案 2 中，你将了解如何构建隐藏的代码。

浮出控件是 WinJS 页面控件的派生版本，因此可以使用 WinJS.UI.Pages.define 构建背后的代码，并在其中定义了就绪和卸载等方法。

更具体地说，示例的方案 2 启用浮出控件，如下所示（js/2-AddFlyoutToCharm.js）：

WinJS.Application.onsettings = function (e) {
    e.detail.applicationcommands = { "help": { title: "Help", href: "/html/2-SettingsFlyout-Help.html" } };
    WinJS.UI.SettingsFlyout.populateSettings(e);
};

浮出控件在 html/2-SettingsFlyout-Help.html 中定义，它定义 WinJS.UI.SettingsFlyout，就像你一样，但在 head 元素中具有以下内容：

<script src="/js/2-SettingsFlyout-Help.js"></script>

该项目的 js 文件夹中的 js 文件具有您需要的页面控件结构，其中包含代码隐藏（此处仅显示其中的一部分）：

(function () {
    "use strict";
    var page = WinJS.UI.Pages.define("/html/2-SettingsFlyout-Help.html", {
        ready: function (element, options) {
            // Register the handlers for dismissal
            document.getElementById("helpSettingsFlyout").addEventListener("keydown", handleKeys);
        },

在该代码中，您可以获取ElementById/querySelector并根据需要添加事件。同样，它为后退按钮添加了一个键盘处理程序（并且还删除了卸载事件中的侦听器）。

顺便说一下，您希望将所有代码放在 ready 方法中，以确保在尝试访问元素之前已将浮出控件添加到 DOM。如果你把JS放在页面控制结构之外，它就会被DOM执行，DOM不会为你准备好。

Kraig（作者，Programming Windows 8 Apps in HTML， CSS and JavaScript，Microsoft Press的免费电子书）

相关内容

最新更新

热门标签：