页面加载时的 jQuery Mobile 对话框

Posted

技术标签:

【中文标题】页面加载时的 jQuery Mobile 对话框【英文标题】:jQuery Mobile Dialog on page load 【发布时间】:2014-03-07 20:34:58 【问题描述】:

正在开发我的第一个 jQuery Mobile 应用程序。有一个 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 侦听器。我没有选择 where data-role="page",而是通过 id 选择特定页面。然后我重新尝试了我在前两次更新中描述的两种方法,但它仍然无法正常工作。首先,当我尝试使用 allowSamePageTransition 刷新初始页面时,似乎 pageshow 触发了两次,因为对话框启动了两次。然后,当我尝试使用空白初始页面,然后在附加 pageshow 侦听器后立即执行重定向时,没有任何反应,对话框也永远不会出现。如果我导航到任何其他页面,对话框将按预期工作。我不明白为什么第一页这么麻烦。

【问题讨论】:

我已经添加了更多细节,以供将来参考,并解释了超时功能的目的。 【参考方案1】:

设置显示对话框的时间间隔,而不是在页面显示后调用它。

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

这样,对话框将在pageshow 事件时弹出,并且只会弹出一次。

更新

我在blog 上发现了这个有趣的 jQueryMobile 事件图。它解释了在多页结构的情况下,为什么在第一页而不是在其余页面上触发了两次对话框或弹出窗口。一旦页面准备好进入 DOM 并在pageshow 上再次启动,它似乎就会触发。设置超时可防止对话框在 pageinit 上触发,因此会跳过该事件,直到触发 pageshow

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

【讨论】:

虽然这确实有效,但我很想了解为什么在我的更新 #1 (allowSamePageTransition) 中 pageshow 事件会触发两次,以及为什么在我的更新 #2(空白页面重定向)中 pageshow 事件不会重定向后根本不触发。 我个人对这种行为的解释——可能不正确——是 JQM 在正文中呈现所有 HTML,然后专注于第一页。因此,第一页显示了两次。给出一个间隔时间可以确保页面被加载和显示。我猜这个操作至少需要 40 毫秒。 虽然可能有比设置超时更简洁的方法来实现这一点,但我现在肯定找不到。赏金是你的,@Omar @Omar +1 图片。 经过一定时间后获得的点赞应该会获得额外的积分。将近一年过去了,在这里我正在谷歌搜索这个问题,在这里我找到了解决方案。想象一下 Omar 吹口哨 曲子,他在互联网上漫步。【参考方案2】:

很可能是在第一页,当你的代码被执行时,该事件已经被触发。这就解释了为什么您只在第一页上什么也得不到。

关于你的第二点,这很正常,因为changePage会将页面“更改”为对话框,一旦关闭对话框,它将返回到上一个页面。因此,if 被执行了 2 次。

我的建议是,第一次进入第一页,注册pageshow事件回调后,可以重新跳转到同一个页面。

【讨论】:

我试过了: $.mobile.changePage( "#mypage", allowSamePageTransition: true );它和我原来的场景有同样的效果。它启动对话框,然后将其隐藏,然后再次显示。 我已经更新了我的原始帖子,以包含我尝试进行的两个不同的更新。两者都没有成功。【参考方案3】:

我使用了“pagecreate”,这似乎解决了我的问题(到目前为止......)

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

//whatever

);

【讨论】:

以上是关于页面加载时的 jQuery Mobile 对话框的主要内容,如果未能解决你的问题,请参考以下文章

在 jQuery Mobile 中操作历史

关闭弹出窗口并导航到 jQuery Mobile 中的另一个页面

JQuery Mobile 删除确认对话框

页面加载时没有出现jquery对话框[重复]

jQuery Mobile,表单提交时的页面更改

jquery mobile listview使用ajax动态加载后,跳转到其他页面返回时数据没有保存如何解决?