CODEWITHSUNDEEP
jquery-mobile
srgstm
srgstm

Reputation: 3759

jQuery Mobile: about the page container ($.mobile.pageContainer)

$.mobile.pageContainer refers to the element that contains other virtual pages. It is set to <body>. So I assume that it can be changed. Indeed, some JQM methods (changePage) lets you specify non-default page container for a page. The JQM docs are lacking the necessary details. So my questions are:

  1. Can you change the default page container in markup/code? How?
  2. What are the reasons to have a page container other than <body>?
  3. Does it mean that there can be multiple page containers with some "pages" residing in one page container and other "pages" residing in other containers? Why would you want to do this?

Upvotes: 3

Views: 3414

Answers (1)

ezanker
ezanker

Reputation: 24738

1 You can place your page divs within a container element in markup.

2 I use ASP.Net Webforms which requires a FORM element, so sometimes I add my jQM pages to a top level FORM instead of the body allowing me to use ASP.Net controls within my separate pages while sharing the same FORM element.

3 I think you need to keep all pages within the same container, otherwise links between pages break. Here is a jsFiddle with 2 pages in a container linking to eachother. Try putting them in separate containers and you will see the linking stop working.

<div id="PageContainer1">
    <div data-role="page" id="page1">
        <div data-role="header">
           <h1>My page 1</h1> 
        </div>
        <div data-role="content"> <a href="#page2" data-role="button">Go to Page 2</a>
        </div>
    </div>
<!-- insert separate container here 
</div>
<div id="PageContainer2">
-->
    <div data-role="page" id="page2" data-theme="a">
        <div data-role="header">
            <h1>My page 2</h1> 
        </div>
        <div data-role="content"> <a href="#page1" data-role="button">Go to Page 1</a>
        </div>
    </div>
</div>

UPDATE: As pointed out in the comments, you can certainly navigate to pages in other containers via changePage, just the standard href="#page2" links break.

    $.mobile.changePage("#page2", {"pageContainer": $("#Container2")});

I am not sure of a use case for having separate containers, perhaps code organization?

Upvotes: 3

Related Questions