Application Page Layout

In the Web UI Framework for Mobile Web Applications, the page and its elements (header, content, and footer) are all <div> blocks with a specific data-role property. The header is placed at the top, and displays the page title. The content is the area below the header, showing the main content of the page. The footer is at the bottom, and contains the page menu.

The following table describes the specific information for each section.

Table: Page sections
Section data-role Description
Page "page"

Defines the element as a page.

The page component is used to manage a single item in a page-based architecture.

A page is composed of the header (optional), content (mandatory), and footer (optional) elements.

Header "header"

Defines the element as a header.

Avoid using the header element on small screens.

Content "content"

Defines the element as content.

Footer "footer"

Defines the element as a footer.

The footer section is mostly used to include option buttons.

To add a page to the application, use the following code:

<div data-role="page">

<!--Page area-->
   <div data-role="header"><!--Header area--></div>
   <div data-role="content"><!--Content area--></div>
   <div data-role="footer"><!--Footer area--></div>
</div>

In your application, you can: