0

我有一个带有两个页面的 JQuery Mobile 应用程序：page1和page2

上page1，我page2通过以下代码将用户重定向到：

$.mobile.changePage("/home/page2/", { transition: "slide" });

Page2其中包含三个data-role="page"元素。这些页面中的每一个在页脚中都有以下内容：

<div data-role="footer" data-position="fixed"> 
    <div data-role="navbar">
        <ul>
          <li><a href="#screen1">Screen 1</a></li>
          <li><a href="#screen2">Screen 2</a></li>
          <li><a href="#" class="ui-btn-active">Screen 3</a></li>
        </ul>
    </div>
</div>

如果我直接导​​航到/home/page2选项卡工作正常。但是，当我通过 将用户重定向到 page2 时changePage()，选项卡不起作用。什么会导致这个？

4

1 回答 1

0

来自jQuery Mobile 文档：

在多页文档中链接

请务必注意，如果您从通过 Ajax 加载的移动页面链接到包含多个内部页面的页面，则需要在链接中添加 rel="external" 或 data-ajax="false"。这告诉框架重新加载整个页面以清除 URL 中的 Ajax 哈希。这一点很关键，因为 Ajax 页面使用哈希 (#) 来跟踪 Ajax 历史，而多个内部页面使用哈希来指示内部页面，因此这两种模式之间的哈希会发生冲突。

changePage()固有地使用 Ajax 来加载页面，这就是您的问题的原因，因为只会#screen1被加载。

如果您的应用程序 UI 和逻辑允许您使用链接进行Page1重定向Page2：

<a href="page2.html" rel="external" data-transition="slide">Go to Page 2</a>

如果您必须以编程方式重定向，请考虑将多页拆分Page2为单独的 JQM 页面（例如 page21.html、page22.html、page23.html）并适当地链接它们或在用户单击导航栏选项卡时动态生成您的内容。

于 2013-01-07T03:57:49.853 回答