jquery mobile $ mobile.changepage方法

Question

我有一个页面很少的html文件，当用户按下特定页面上的按钮时，我正在加载一个包含结果页面的新html文件。 页面加载工作很好，问题是我无法在新的html中的新页面之间进行导航。 当我在浏览器上手动加载页面时，它的工作非常完美。

任何人都知道为什么？ 我认为我需要在加载完成后对页面执行一种刷新操作，但我不会这样做，因为页面从远程服务器检索数据，我不知道刷新操作是否会尝试再次从远程服务器检索数据（这将复制用户等待他得到答案的时间）。

这是我使用的代码行： $ .mobile.changePage（“menu.php？q =”+ query，{transition：“slide”}）;

谢谢

Answer 1

... the problem is that i can't manage to navigate between the new pages in the new html.

此行让我相信您正在尝试返回远程URL链接的多页模板（这意味着您按下的链接不链接到同一文档上的伪页面，而是另一个文档全部一起）。 jQuery Mobile默认不允许这样做（我认为您可以找到该功能的插件）。 jQuery Mobile仅从返回的外部文档中检索第一个data-role="page或data-role="dialog"元素。

您可以使用单页模板，其中每个伪页都包含在自己的文档中，并通过普通URL链接到每个伪页（例如“/contact-us/index.php")

或

您可以将所有必要的页面放在一个文档中，并使用基于哈希的链接（例如“#home”）在它们之间进行链接。执行此操作时，您仍然可以从数据库中检索数据，但是您必须通过AJAX创建代码（并且很可能绑定到页面事件）。

或

也许有一个插件。如果没有，实际上并不是那么困难，你只需要自己抓取外部data-role="page"元素而不是让jQuery Mobile这样做，将它们全部添加到DOM中，然后转换到第一个像平常一样。

<强>更新

如果您想一次加载多个伪页面，请尝试以下方法：

//hijack link clicks on links with the `click-hijack` class
$(document).on('click', '.click-hijack', function () {

    //show loader
    $.mobile.loading('show');

    //create AJAX request for pseudo-page(s)
    $.ajax({
        url      : $(this).attr('href'),
        dataType : 'html',
        success  : function (response) {

            //hide loader
            $.mobile.loading('hide');

            //get the pseudo-page(s) from the AJAX response
            var $pages = $(response).find('[data-role="page"], [data-role="dialog"]');

            //append the pseudo-page(s) to the DOM
            //(this may need to change if you are using a framework like ASP.NET as they can add wrapper DOM elements)
            $("body").append($pages);

            //now that the pesueo-page(s) is/are in the DOM, we can transition to them normally
            $.mobile.changePage('#' + $pages.eq(0).attr('id'));
        },
        error    : function () {
            //don't forget to handle errors
        }
    });

    //stop the default behavior of the link, as well as propagation of the click event
    return false;
});

注意：此代码未经测试，请在使用代码时考虑这一点。

Answer 2

默认情况下，当您链接到外部页面时，jQuery Mobile via ajax jQuery Mobile将仅提取第一个data-role="page"，或者如果找不到它，它将获取内容并将其包装在一个data-role =“page”div。

您可以通过链接到没有ajax的页面链接到外部多页文档（将data-ajax="false"添加到您的链接中）。

如果你想通过ajax一次加载几个页面，你可以使用像@Jasper建议的那样自己手动加载，或者你可以使用专门为此目的制作的jQuery-Mobile-Subpage-Widget。