Question

以下是包含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>

Answer 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")。任何其他未定义的div都将从pageContainer中排除。但是，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

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

1 个答案:

更新