WinJS.UI.Flyout在Windows Phone 8.1上的HTML
我正尝试创建一个带有单个输入字段和单个按钮的WinJS.UI.Flyout，以允许用户在输入字段中输入一个新值并单击该按钮进行保存。 但是，在Windows Phone 8.1上，Flyouts不受支持。
我该如何解决这个问题？ 有没有办法模仿手机8.1上的WinJS.UI.Flyout组件的行为？
提前致谢。
个人对这里的体系结构的看法，但我相信如果你要有一个提示的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");
}
}
请注意 ，我使用流行的“that = this;” 在ready（）函数中，用“var that;” 在主页上方定义的标准导航通用应用程序中定义。
净结果：在HTML中正常创建您的弹出窗口。 当您想要弹出窗口时，只需拨打以下电话：
that.Flyout("flyoutId", "launchButtonId");
这将在Windows中像往常一样展示弹出窗口，但在Windows Phone上，现在将弹出窗口显示为WP对话框（或足够接近它）。 如果您在弹出窗口中有Ok / Cancel / etc.按钮，请确保您致电：
that.UnFlyout("flyoutId");
代替正常的“.hide（）”。
随意玩，并告诉我，如果你有任何改善。
我不认为有这样的控制......我不认为我会用手机。 查看日历应用中的日期和时间选择器，他们会带您到一个新的“页面”输入您的数据。
你想要做什么可以用标准的HTML来实现，但我只是不确定我想要它。
在这些情况下，我将我的用户带到一个新的页面，在那里他们输入所需的数据。
链接地址: http://www.djcxy.com/p/22623.html