jquery mobile - 通过changePage请求多页页面答案

【问题标题】：jquery mobile - requesting multi-page page via changePagejquery mobile - 通过changePage请求多页页面
【发布时间】：2011-12-10 20:33:23
【问题描述】：

从网站的索引页面，我正在加载另一个页面，该页面有 3 个具有页面数据角色的 div。但是，jquery mobile 只会将其中一个页面附加到 dom。

我认为 changePage 函数正在获取具有页面数据角色的第一个 div 并将其插入。我想知道是否有办法让它插入所有具有页面或对话框数据角色的 div。

任何帮助都超过赞赏。谢谢

【问题讨论】：

我不确定您要做什么，这听起来不像 jQM 可以使用，因为每个 data-role="page" 都被视为 t 自己的页面。你能解释一下你想要完成的事情吗？请编辑您的问题，添加一些您正在尝试的代码，谢谢

标签： jquery-mobile

【解决方案1】：

JQM 目前无法实现您尝试执行的操作，因为只有多页的第一页才会加载到 DOM 中。

我会向您指出 JQM 文档中的一个链接可以解释这种行为，但没有一个...我已经在 Github 上将此作为问题提交，因此文档至少可以说明多页可以做什么，什么不可以。

当我遇到同样的问题时，我开始编写一个插件来加载多页（除其他外）。我还有一些事情要整理，但是当它工作时，我可以将链接发送给您。

【讨论】：

谢谢，我最后做了一个快速破解。基本上我将其他页面包装在脚本标签中，并根据需要将它们附加到 dom 中。
如果有官方答案或插件，请告诉我！ :)
@serbanghita：好的，JQM 正在开发 nav-refactor，最终也将支持多个容器，所以这只是时间问题。我的插件马马虎虎（肯定很难）。这是github 和demo page。两者都需要大量更新。

【解决方案2】：

您可以使用“子页面”插件来获得您想要的行为。基本上一个页面包含一堆子页面，它们都被加载到 DOM 中。模式是：

<div data-role="page">
    <div data-role="subpage">
    </div>
    <div data-role="subpage">
    </div>
    <div data-role="subpage">
    </div>
</div>

该项目可在此处获得：https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget。我个人一直遇到这个插件的问题，但我认为对于简单的场景，它工作正常。此外，没有它的文档。例如，我仍然不知道使用此插件调用 $.mobile.changePage() 的正确方法。 :)

【讨论】：

【解决方案3】：

根据this page 的 JQM： “jQuery Mobile 目前仅支持通过 AJAX 加载单页文档。要导航到多页文档，您必须通过添加 data-ajax="false" 属性来禁用链接上的 ajax。还有一个小部件允许支持 sub - Todd Thompson 的页面可在https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget 获得”

您也可以在指向Page B的href中添加rel="external"属性。

rel="external" 和 data-ajax="false" 将强制 JQM 将整个页面加载为新页面。不幸的是，这似乎取消了使用从 PageA 到 PageB 的页面转换的能力。

示例：<a href="/view/pageB/" rel="external"> Page B </a>

我现在希望使用 JQM 方法加载页面 B，而不是依赖于自动机制。如果您希望在最初加载 DOM 后在“单页”内进行标签转换，则您必须始终使用单页模板（如推荐的那样）或 pagecontainer load method（与单页基本相同）。例如，链接到单个页面，该页面的listen to "pageinit"，然后使用pagecontainer("load")。确保后续页面（您要注入的页面）不需要作为直接传入页面。

【讨论】：