使用 jquery mobile 修复 url答案

【问题标题】：fix url using jquery mobile使用 jquery mobile 修复 url
【发布时间】：2012-02-16 18:53:59
【问题描述】：

我正在使用 jquery mobile 构建网站，但是当我单击一个按钮并且此按钮指向一个对话框页面时，URL 中会出现 #&ui-state=dialog。如果我输入了<a data-ajax="false"></a>，那么没有#&ui-state=dialog 的url 是正确的，但是对话框窗口不能正确显示，因为显然ajax 被禁用了。有什么方法可以解决吗？

【问题讨论】：

标签： jquery url jquery-mobile dialog

【解决方案1】：

尝试在弹出的 div 标签中使用 data-history="false"，例如：

<div data-history="false" data-role="popup" id="options-list-div" data-theme="b" data-overlay-theme="b">

祝你好运！ :-)

【讨论】：

帮我修好了 :) 谢谢
对我来说它不起作用..如果我添加 data-history="false" 它不会添加 #&ui-state=dialog 但它仍然会回到第一页并且不会移动到下一个与以前完全一样（一段时间后它应该移动到新页面）。如果我在 changePage 函数中添加“changeHash”，则不会发生任何事情..

【解决方案2】：

打开对话框时，使用$.mobile.changePage() 并将changeHash 选项设置为false：http://jquerymobile.com/demos/1.0.1/docs/api/methods.html

//delegate the event binding so elements in the DOM now and in the future will be bound-to
$(document).delegate('#my-dialog-button', 'click', function () {

    //change to the dialog, forcing the hash to remain the same and the page to be viewed as a dialog
    $.mobile.changePage($('#my-dialog'), {
        changeHash : false,
        role       : 'dialog'
    });
});

【讨论】：

这个功能很好，但是这样页面只显示为一个页面，而不是像禁用 ajax 那样的对话框
这是一个演示：jsfiddle.net/qzzW5。该页面在我测试的每个浏览器中都以对话框的形式打开。
我在 jsfiddle 中尝试了我的示例并且工作正常。但在我的页面中不起作用。可能是因为我之前在页面中使用过发布表单 data-ajax="false"？
我不能说，如果您可以发布指向您网站的链接，我可以签出。
我面临同样的问题。我尝试了 Jasper 发布的小提琴。它工作正常。当我更新 jquery 移动版本时它停止工作。而且对话框也无法关闭.有没有其他方法可以做到这一点？那将是一个很大的帮助。

【解决方案3】：

不知道为什么，但是当我尝试集成 Jasper 示例时，它也不起作用。

我在按钮上使用data-* 属性来配置对话框。

现在我在changePage 函数中声明所有选项，它工作正常。

<a href="#" data-role="button" id="#my-dialog-button"></a>

$("#my-dialog-button").click(function() {
    $.mobile.changePage( "page_containing_the_dialog.html", {
        type: "get",
        transition: 'pop',
        role: 'dialog',
        changeHash : false
    });
});

【讨论】：

【解决方案4】：

使用changeHash 将禁用历史记录的更改，因为 url 不会更改。因此，如果用户单击/点击关闭按钮，它将传播到前一页（如果有的话）。

此外，当用户点击移动设备上的返回按钮时可能会导致问题，因为打开弹出窗口时没有历史记录更改，它会再次将用户带回上一页而不是而不是关闭弹出窗口，这将是不正确的行为。

如果我们使用transition，而不是changeHash，它会像一个对话框一样工作，让哈希值也改变历史。

@Vincentp 既然您正在使用transition，您是否尝试过从“changePage”调用中删除changeHash 属性？

$("#my-dialog-button").click(function () {
    var default_transition = "pop";
    $.mobile.changePage("page_containing_the_dialog.html", {
        role : 'dialog',
        transition: $(this).data('transition') || default_transition
    });
    return false;
});

【讨论】：