WinJS.UI.Flyout HTML 在Windows Phone 8.1上的应用

Question

我正在尝试创建一个WinJS.UI.Flyout，其中包含一个单独的输入字段和一个单独的按钮，以允许用户在输入字段中输入新值，并单击按钮保存它。然而，在Windows Phone 8.1上，不支持Flyouts。

有什么方法可以解决这个问题吗？是否有一种方法可以在手机8.1上模仿WinJS.UI.Flyout组件的行为？

提前致谢。

- Daroosh

Answer 1

我认为没有相关的控件......而且我不认为我会希望在手机上使用它。您可以查看日历应用程序中的日期和时间选择器，它们将带您进入新的“页面”以输入数据。

您想要做的事情可以通过标准HTML实现，但我只是不确定是否需要它。

在这些情况下，我会带我的用户去一个新页面，让他们输入所需的数据。

- sebagomez

---

很遗憾，我找不到适当的控件，所以我只能采用HTML方式。我必须创建一些Div元素并将它们样式化，使其看起来像正常的Flyout。这样做唯一的问题是，Flyout会阻止用户交互，直到用户点击Flyout上的任何按钮（确定/取消）。 - Daroosh

然而，如果您决定使用HTML来模拟Flyout行为，则必须强制用户停止与应用程序的交互，直到他解除创建的Div元素（自定义Flyout）。最简单的方法是在页面上的所有其他元素上叠加具有更高“z-index”的另一个Div元素。这样，由于覆盖了所有内容，用户将无法与任何内容进行交互。 - Daroosh

这就是为什么我提到将用户带到一个新面板的原因，其中他拥有的一切都是您的“flyout”数据（例如XAML日期和时间选择器）。 - sebagomez

Answer 2

我认为架构是个人观点，但如果你要使用一个促进 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;
}

在HTML中，将此放置在WinJS.UI.Flyout div旁边：

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

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

    // 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()函数中我使用了流行的"that = this;"，并在标准导航通用应用程序中定义主页之前声明了一个"var that;"。

最终结果：按照正常的HTML方式创建您的弹出菜单。当您需要弹出菜单时，只需调用：

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

这将在Windows中按照通常的方式显示Flyout，但在Windows Phone上将会以WP对话框的形式（或者接近它）显示Flyout。如果您的Flyout中有“确定/取消”等按钮，请确保调用：

that.UnFlyout("flyoutId");

在正常的“.hide()”之外，可以使用它。

随意尝试，并让我知道您是否有任何改进。

- Thought