导航到 JQuery Mobile 中 div 标签内的页面答案

【问题标题】：Navigate to page that is inside div tag in JQuery Mobile导航到 JQuery Mobile 中 div 标签内的页面
【发布时间】：2014-02-23 19:10:08
【问题描述】：

以下是包含 3 页的 J Query-Mobile 单页结构，第一页是 body 标记的直接子级，而其他两页是 body 标记的子级，所以当 DOM 浏览器中的页面加载时，我现在想显示第一页将其他页面与主页链接，但它们无法显示，如果删除第 2 和第 3 页的父 div 则工作正常，但我想将这些页面放入单独的 div 它我的应用程序要求是否有任何可能的方法调用这些页面

<body>
<div data-role="page" id="mainPage">
    <div data-role="content">
        <a data-role="button">SubPage1</a>    <!--<a href="#subPage1" data-role="button">SubPage1</a> I write this but not show other page what value should href have -->
    </div>
</div>
<div>
    <div data-role="page" id="subPage1">
        <div data-role="content">
            <a href="#subPage2" data-role="button">SubPage2</a>
        </div>
    </div>
    <div data-role="page" id="subPage2">
        <div data-role="content">
            <a data-role="button">Main Page</a>
        </div>
    </div>
</div>
</body>

【问题讨论】：

你用的是哪个版本？

标签： javascript jquery html jquery-mobile

【解决方案1】：

jQuery Mobile 1.2 - 1.3

更新

为了获得更好的结果，请在更改页面之前更新 $.mobile.pageContainer 的值。

$.mobile.pageContainer = $("#ContainerID"); /* New pageContainer */

$.mobile.changePage("#pageID"); /* New pageContainer */

$.mobile.pageContainer = $("body"); /* Default pageContainer */

$.mobile.changePage("#pageID"); /* Default pageContainer */

$.mobile.UrlHistory 将被更新，因此data-rel=back 将处理pageContainer 的更改。

容纳所有页面（直接子级）的默认pageContainer 是$("body")。 pageContainer 中排除了任何其他未定义的 div。但是，pageContainer 可以设置为任何其他值，无论是在初始化之前全局还是在初始化之后的任何时间。

不过，这需要$.mobile.changePage() 函数在不同的容器之间切换，并在该函数中重新定义pageContainer 选项。

给包装其他页面的 div 一个id，因为它将在$.mobile.changePage() 函数中使用。将click 绑定到您希望将您带到子页面 的按钮并以编程方式更改页面。

$.mobile.changePage("#subPage1", { pageContainer: $("#subContainer") });

然后

event.preventDefault()

避免页面闪烁。

<body>
  <div data-role="page" id="mainPage">
  </div>

  <!-- container -->
  <div id="subContainer">
    <div data-role="page" id="subPage1">

    <div data-role="page" id="subPage2">
    </div>
  </div>

</body>

Demo

【讨论】：

我用这个event.preventDefault()，但页面闪烁仍然让我很烦
在我的演示中我使用了e.preventDefault()。请仔细检查您的代码。
在您的演示中也闪烁，所以我用return false 更改该行并且它停止闪烁但在我的应用程序中它仍然存在。我再次查看我的代码然后发表评论
当view 从body container 移动到sub container 部分时，我的url 没有更新。也许这是个问题，但我不确定
@BluAngel 我仅在 iPhone 和 iPad 上使用 preventDefault 对其进行了测试。它不闪烁。我会尝试在代码中进行一些更改，我会更新您。