Navigate to page that is inside div tag in JQuery Mobile

问题

Following are the J Query-Mobile single page structure containing 3 pages first page is immediate child of body tag while other two pages are grand child of body tag so when page load in DOM browser shows the first page now I want to link other pages with main page but they can't show and if remove the parent div of 2nd and 3rd page then works fine but i want to place these page into separate div its my app requirement is there any possible way to call these pages

<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>

回答1:

jQuery Mobile 1.2 - 1.3

Update

For better results, update $.mobile.pageContainer's value before changing page.

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

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

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

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

$.mobile.UrlHistory will be updated, so data-rel=back will handle pageContainer changes.

The default pageContainer that accommodates all pages (direct children) is $("body"). Any other undefined divs are excluded from pageContainer. However, pageContainer can be set to any other value, either Globally before initialization or anytime after initialization.

However, this will require $.mobile.changePage() function to switch between different containers, and re-define pageContainer option in that function.

Give the div that wrapping other pages an id as it will be used in $.mobile.changePage() function. Bind click to the button you want to take you to subpages and change page programmatically.

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

and then

event.preventDefault()

to avoid page flickering.

<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

来源：https://stackoverflow.com/questions/21973129/navigate-to-page-that-is-inside-div-tag-in-jquery-mobile

标签

javascript

jquery

html

jquery-mobile