Multi-page Layout

You can implement a template containing multiple page containers in the application index.html file.

In the multi-page layout, the main page is defined with the ui-page-active class. If no page has the ui-page-active class, the framework automatically sets up the first page in the source order as the main page. You can improve the launch performance by explicitly defining the main page to be displayed first. If the application has to wait for the framework to set up the main page, the page is displayed with some delay only after the framework is fully loaded.

You can link to internal pages by referring to the ID of the page. For example, to link to the page with an ID of two, the link element needs the href="#two" attribute in the code, as in the following example.

<!--Main page-->
<div id="one" class="ui-page ui-page-active">
   <header class="ui-header">
      <h2 class="ui-title">First Page</h2>
   </header>
   <div class="ui-content"></div>
   <footer class="ui-footer">
      <a href="#two" class="ui-btn">to second page</a>
   </footer>
</div>

<!--Secondary page-->
<div id="two" class="ui-page ui-page-active">
   <header class="ui-header">
      <h2 class="ui-title">Second Page</h2>
   </header>
   <div class="ui-content"></div>
   <footer class="ui-footer">
      <a href="#one" class="ui-btn">to first page</a>
   </footer>
</div>

To find the currently active page, use the ui-page-active class.

Where to Go Next