A typical page will be divided as: header, content, and footer.


<div data-role="page">
  <div data-role="header">
  </div>
  <div data-role="content">
  </div>
  <div data-role="footer">
  </div>
</div>

The header and footer are optional.  All code inside a page must be within one of the 3 sections.

Hiding The Browsers Address Bar

On compatible devices, such as Android-, webOS- and iOS- devices, jQuery Mobile will try to hide the browser’s address bar by manipulating the initial scroll. This hack will only work if the content is tall enough to fit the available space.

Orientation Changes

jQuery Mobile will manage orientation changes between portrait or landscape itself on most devices adapting the UI automatically to the new viewport.

Browser Title

The documents title is the browsers title which will be stored when bookmarking etc.  I fyou want to change it when in different pages within a document use data-title:


<div data-role="page" id="page2" data-title="New Title To Use">

Page Title

Set using the <h1> tag in the header (h1 using the standard stylesheet).  If it doesn't fit on a device it will be auto cropped.

Footer Title Text

Set using the <h4> tag in the footer (h4 using the standard stylesheet).  If it doesn't fit on a device it will be auto cropped.

Multiple Pages Within 1 Document

If there is not dynamic content you can have lots of pages in 1 document and its a balance between the user getting all of the pages in a single download of a file and the file being so big that its slow to download.

Accessing the current page

Use the $.mobile.activePage attribute that is automatically linked to the current visible data-role="page" element. 


	var currentPageId = $.mobile.activePage.id;

You can access the current page container (usually the body element) with the $.mobile.pageContainer attribute. 

 

 

 

UK Electronic Designer
USEFUL?
We benefit hugely from resources on the web so we decided we should try and give back some of our knowledge and resources to the community by opening up many of our company’s internal notes and libraries through mini sites like this. We hope you find the site helpful.
Please feel free to comment if you can add help to this page or point out issues and solutions you have found, but please note that we do not provide support on this site. If you need help with a problem please use one of the many online forums.

Comments

Your email address will not be published.