JQuery Mobile 1.4.5 - 不要将“返回”导航到对话框页面 [英] JQuery Mobile 1.4.5 - don't navigate 'back' to a Dialog page

问题描述

在JQM 1.4之前，我使用 data-role =dialog创建了对话框，这些页面没有添加到后面的堆栈中，因此导航一个然后按

Prior to JQM 1.4, I created dialogues using data-role="dialog" and those pages were not added to the back stack, so navigating off one and then pressing back would bring you to the page before the dialog.

现在使用1.4.5，对话框定义为 data-role =page with data-dialog =true。使用这种方法，对话框被添加到后面的堆栈中，所以如果我从对话框导航，然后点击，我返回到对话框。这不是我想要的行为。有一种方法，当对话框打开时，告诉JQM不要将它添加到后面的堆栈？

Now with 1.4.5, dialogues are defined as data-role="page" with data-dialog="true". Using this method, the dialog is added to the back stack, so if I navigate off the dialog and then tap back I am returned to the dialog. This is not the behavior I want. Is there a way, when the dialog opens, to tell JQM NOT to add it to the back stack?

推荐答案

更新< h2>

截至jQuery Mobile 1.4，对话框小部件已弃用，将在1.5中删除。现在转换为一个页面 - 正如您所提到的那样，使用 data-dialog =true。

Updated

As of jQuery Mobile 1.4, dialog widget is deprecated and will be removed in 1.5. It is now converted into a page - as you've mentioned - with data-dialog="true".

当您导航到对话框时，jQM更新框架的导航历史以及浏览器的导航历史。即使您以 changeHash 编程方式导航到对话框，当您点击按钮时，您将重定向到第二个历史记录。

When you navigate to a dialog, jQM updates framework's navigation history as well as browser's navigation history. Even if you navigate to a dialog programmatically with changeHash disabled, when you hit back button, you will redirected to second previous history record.

一个工作是听 pagecontainerbeforechange 并将 toPage 更改为导航到调用对话框的页面。

A work around is to listen to pagecontainerbeforechange and alter toPage to navigate to the page where the dialog was called.

$(document).on("pagecontainerbeforechange", function (e, data) {
    if (typeof data.toPage == "string" && data.options.direction == "back") {
        var active = $.mobile.navigate.history.activeIndex;
        for (var i = active; i >= 0; i--) {
            if (!$($.mobile.navigate.history.stack[i].hash).hasClass("ui-dialog") && !$($.mobile.navigate.history.stack[i].hash).hasClass("ui-page-active")) {
                data.toPage = $.mobile.navigate.history.stack[i].url;
                data.options.transition = "flip";
                break;
            }
        }
    }
});

当您想修改 toPage 时，应该是字符串而不是对象。事件每次导航两次，它首先返回 string ，然后返回对象。

When you want to alter toPage, it should be a string and not an object. The event fires twice on each navigation, it returns string first and then an object.

当它返回字符串时，检查导航方向 options.direction 。如果方向是 back ，则以相反的顺序循环通过 $。mobile.navigate.history.stack 。以前的记录不应该是对话框 ui-dialog ，也不应该是活动页面 ui-page-active 。如果两个条件都返回true，则将 toPage 。

When it returns a string, check navigation direction options.direction. If the direction is back, loop through $.mobile.navigate.history.stack in reversed order. The previous record should not be a dialog ui-dialog nor the active page ui-page-active. If both conditions return true, alter toPage.

演示

Demo

这篇关于JQuery Mobile 1.4.5 - 不要将“返回”导航到对话框页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！