0

我有一个反馈设置弹出 (feedback.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>

我的问题是：如何在此弹出窗口上运行代码隐藏？feedback.js 永远不会加载，我只想在用户单击按钮时向我发送他刚刚输入的文本。我怎样才能做到这一点？

4

1 回答 1

1

查看应用程序设置示例 ( Win8 | Win8.1 )，在场景 2 中，您将了解如何构建背后的代码。

Flyouts 是 WinJS 页面控件的衍生产品，因此您可以使用 WinJS.UI.Pages.define 构建背后的代码，并在其中定义诸如 ready 和 unload 之类的方法。

更具体地说，示例的场景 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);
        },

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

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

Kraig（作者，用 HTML、CSS 和 JavaScript 编写 Windows 8 应用程序， Microsoft Press 提供的免费电子书）

于 2013-09-17T18:26:10.340 回答