jQuery移动端页面加载时的对话框

Question

jQuery移动端页面加载时的对话框

3

我正在开发我的第一个jQuery移动应用程序。有一个localStorage值必须在整个应用程序中都有值，所以我利用pageshow事件来检查这个值：

$(function () {
$("div[data-role='page']").on("pageshow", function (event, ui) {
    if (getValue() == null) {
        // show the dialog
        $.mobile.changePage("#dialog");
    }
});
});

这在浏览不同页面时有效，但在第一页加载时永远不会被调用。我试过将上面的 If 语句再次复制到添加 pageshow 监听器的部分下面，但这样做会使对话框显示、隐藏，然后再次显示。

在第一页上，打开对话框似乎会触发 pageshow（考虑到我的选择器，这很奇怪），从而触发另一个对话框。有没有人能给出如何避免这种情况或更好的方法呢？

更新 #1：我尝试了…

$.mobile.changePage( "#mypage", { allowSamePageTransition: true, transition: "none" } );

但它产生了与我最初的问题相同的效果，即启动对话框，然后隐藏它，然后再次显示它。似乎以某种方式启动对话框会触发pageshow事件，尽管我尝试在选择器中过滤掉它。请注意，如果删除transition: "none"选项，则根本不会出现对话框。

更新#2：我还尝试创建一个空白初始页面，然后进行简单的页面转换。

$.mobile.changePage("#mypage");

但它仍然没有正确的行为。在这种情况下，它确实带我到了下一页，但是pageshow事件没有触发，因为我的对话框没有出现。我知道它没有触发，因为我可以从我的导航菜单中选择另一个页面，然后对话框就会出现。

更新#3：我更改了附加pageshow监听器的选择器。我不再选择data-role="page"的位置，而是通过它们的id选择特定的页面。然后我重新尝试了我在前两个更新中描述的两种方法，但仍然不能正确工作。首先，当我尝试使用allowSamePageTransition刷新初始页面时，似乎pageshow会触发两次，因为对话框会启动两次。然后，当我尝试使用空白的初始页面，并立即在附加pageshow监听器后进行重定向时，什么也没有发生，对话框永远不会出现。如果我导航到任何其他页面，则对话框将按预期工作。我不明白为什么这个第一页如此麻烦。

- tjc59

我已经添加了更多细节，以供将来参考，并解释了超时函数的目的。 - Omar

3个回答

0

我使用了“pagecreate”，目前似乎解决了我的问题。

$(document).on('pagecreate', "#page-formyID", function () {

//whatever

});

- user3163139

0

最有可能的情况是，当您执行代码时，在第一页上已经触发了该事件。这解释了为什么您只在第一页上得不到任何东西。

关于您的第二个观点，这是正常的，因为changePage将“更改”页面到对话框，一旦您关闭对话框，它将返回到之前的页面。因此，if语句会执行两次。

我的建议是，当您第一次进入第一页时，您可以在注册pageshow事件的回调之后重新过渡到相同的页面。

- wmfairuz

我尝试了以下代码： $.mobile.changePage( "#mypage", { allowSamePageTransition: true } ); 它产生了与我的原始情况相同的效果。它启动对话框，然后隐藏它，再次显示它。 - tjc59

我已经更新了原始帖子，包括我尝试过的两个不同的更新。都没有成功。 - tjc59

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Omar · Accepted Answer

设置一个时间间隔来显示对话框，而不是在页面显示后立即调用它。

$(document).on('pageshow', '#myPage' ,function () {
 if (getValue() == null) {
  setTimeout(function () {
   $.mobile.changePage('#dialog');
  }, 100); // delay above zero
 }
});

通过这种方式，对话框将在 pageshow 事件上弹出，并且仅弹出一次。

更新

我在这篇博客上发现了这个有趣的jQuery Mobile事件图。它解释了为什么在多页面结构的情况下，对话框或弹出窗口会在第一个页面上触发两次，而在其他页面上不会触发。看起来它会在页面准备完毕后进入DOM时触发一次，然后再在 pageshow 上触发一次。设置一个超时时间可以防止对话框在 pageinit 上触发，从而跳过该事件直到触发 pageshow。

enter image description here

图片/图表来源: http://bradbroulik.blogspot.co.nz/2011/12/jquery-mobile-events-diagram.html