Search within TutorialsPark

jQuery Mobile : Creating Pages


Learn to create the most critical components of any jQuery Mobile Application - Pages


jQuery Mobile: Learning about Pages

We create a minimal jQuery Page comprising of only two components, each of which has data-role attribute to denote the role of each block.

Example: jQuery Mobile - Basic Page

Give it a TRY! » Note: You can create multiple components with different roles as well.


jQuery Mobile: Adding Heading and Footers to a Page

jQuery Mobile pages usually have a header as well as a footer wrapping the text content between them.

The data-role of the header and footer are set to header and footer respectively. The footer is displayed at the end of the content rather than the bottom of page.

Syntax: jQuery Mobile - Adding Header and Footer to a Page

Give it a TRY! » Note: You can fix the footer at the bottom of the page using CSS rules.


jQuery Mobile: Positioning the footer at the bottom using CSS

The footer of a jQuery Mobile page can be positioned at the bottom of the content using CSS position rule.

Syntax: jQuery Mobile Fix footer at the bottom using CSS rules

Give it a TRY! » Note: Given that smartphones have different resolutions it is difficult to set the position properly