windows 8.1上的WinJS.UI.Flyout HTML

Question

我正在尝试创建一个具有单个输入字段和一个按钮的WinJS.UI.Flyout，以允许用户在输入字段中输入一个新值，然后单击该按钮来保存它。但是，在windows 8.1中，不支持刷新。

我怎么才能解决这个问题？有没有一种方法可以在电话8.1上模拟WinJS.UI.Flyout组件的行为？

提前谢谢。

Answer 1

个人对这里的体系结构有自己的看法，但我相信，如果您要有一个提示性的API，并且希望人们实际使用它，那么您需要确保它在所有环境中都得到支持。

下面是我为Flyouts使用的内容(我使用它作为弹出的自定义提示，不会将用户导航到页面之外)：

default.css：

/* Used to help emulate the Flyout when on a Windows Phone device. */
.matting {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: black;
    opacity: 0.6;
    display: none;
}

/* Applied when forcing a Flyout on a Windows Phone device. */
/* Removed when hiding it. */
/* Creates it like a WP dialog. */
.wp-flyout {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    /* The height should be left alone. */
    z-index: 1000;
    display: block;
    opacity: 1.0;
    background-color: dimgray;
}

在中，将其与WinJS.UI.Flyout div放在一起：

<div id="matting" class="matting"></div>

在Javascript中，除了主页定义的ready和卸载函数之外，我还有以下两个附加函数：

    // Shows a flyout, even on Windows Phone.
    // flyoutId is the WinJS.UI.Flyout structure.
    // launchButtonId is the button that is launching this flyout.
    Flyout: function (flyoutId, launchButtonId) {
        var flyoutElement = document.getElementById(flyoutId);
        if (flyoutElement.winControl) {
            // Windows.
            var launchButton = document.getElementById(launchButtonId);
            flyoutElement.winControl.show(launchButton);
        } else {
            // Windows Phone.
            // Fake it with a dialog.
            var flyout = WinJS.Utilities.query("#" + flyoutId);
            // Show the matting.
            var matting = WinJS.Utilities.query("#matting");
            matting.setStyle("display", "block");
            // Apply click-cancel to the matting.
            matting[0].cancel = function () { that.UnFlyout(flyoutId); return true; };
            matting.listen("click", matting[0].cancel, false);
            // Apply the wp-flyout class.
            flyout.addClass("wp-flyout");
            // Add back-button-cancel event.
            WinJS.Application.addEventListener("backclick",
                matting[0].cancel);
            // Show the flyout.
            flyout.setStyle("display", "block");
        }
    },

    // Hides a flyout, even on Windows Phone.
    UnFlyout: function (flyoutId) {
        var flyoutElement = document.getElementById(flyoutId);
        if (flyoutElement.winControl) {
            // Windows.
            flyoutElement.winControl.hide();
        } else {
            // Windows Phone.
            // We're faking it with a dialog.
            var flyout = WinJS.Utilities.query("#" + flyoutId);
            // Hide the flyout.
            flyout.setStyle("display", "none");
            // Remove the wp-flyout class.
            flyout.removeClass("wp-flyout");
            // Remove the click-cancel from the matting.
            var matting = WinJS.Utilities.query("#matting");
            matting.removeEventListener("click", matting[0].cancel, false);
            // Remove back-button-cancel event.
            WinJS.Application.removeEventListener("backclick",
                matting[0].cancel);
            // Hide the matting.
            matting.setStyle("display", "none");
        }
    }

注意到，我在ready()函数中使用了流行的“in = this;”函数，其中包含一个"var in“；在一个标准导航通用应用程序中，主页上定义了一个变量。

Net结果:在HTML中创建正常的flyouts。当你想要飞离时，你只需打电话：

that.Flyout("flyoutId", "launchButtonId");

这将显示在Windows中的正常情况，但在Windows上，现在将显示为WP对话框(或足够接近它)。如果在“飞出”中有Ok / Cancel /等按钮，请确保呼叫：

that.UnFlyout("flyoutId");

代替普通的".hide()“。

请随意使用它，如果您有任何改进，请告诉我。