javascript - 如何关闭对话框并返回另一个链接(而不是返回)？

Question

我想要关闭对话框打开第 2 页而不是返回第 1 页。

我尝试像这样在对话框上绑定(bind)pagehide事件，但它首先返回page1然后打开page2，而不是直接打开page2。

$("#dialog").bind("pagehide", function() {
  $.mobile.changePage("#page2");
});

<div data-role="page" id="page1">
  <div data-role="content">
    page1
    <a href="#dialog" data-iconpos="notext" data-transition="slide">open dialog</a>
    <a href="#page2" data-iconpos="notext" data-transition="slide">open page2</a>
  </div>
</div>
<div data-role="page" id="page2">
  <div data-role="content">page2</div>
  <a href="#page1" data-iconpos="notext" data-transition="slide">open page1</a>
</div>
<div data-role="dialog" id="dialog">
  <div data-role="header"><h1>dialog</h1></div>
  <div>Dialog</div>
</div>

Answer 1

在 jQM 1.4 中，您可以通过指定 data-dialog="true" 来定义一个看起来像对话框的页面:

<div data-dialog="true" id="dialog">

然后要在关闭时重定向，您可以这样处理:

$(document).on("pagecreate", "#page1", function () {
    $("body").on("pagecontainerbeforetransition", function (event, ui) {
        var oldpageid = $("body").pagecontainer("getActivePage").prop("id");
        var newpageid = ui.toPage.prop("id");
        if (oldpageid == "dialog" && newpageid == "page1") {
            $("body").pagecontainer("change", "#page2", {"transition": "slide"});
            return false;
        }
    });
});

基本上在转换之前捕获页面，看看我们是否处于对话状态并前往 page1，如果是，则重定向到 page2。

DEMO