19
DecUnderstanding jQuery Mobile Pages
A jQuery Mobile webpage must start with an HTML5 doctype to take full advantage of all of the framework's features. In the head section of a webpage, references to jQuery, jQuery Mobile and the mobile theme CSS are also all required. jQuery Mobile has guidelines on the structure of pages themselves. In general, a page structure should have the following sections:
Page
This is the page displayed in the browser. The attribute
data-role="page"
is used to specify a page which can contains header, content and footer.Header
This creates a toolbar at the top of the page. The attribute
data-role="header"
is used to specify a page's header. Typically, it contains the page title or search button or back button.Content
The attribute
data-role="content"
is used to specify a page's content. This contains the content for your page, like text, images, forms and buttons, etc.Footer
The attribute
data-role="footer"
is used to specify a page's footer. This creates a toolbar at the bottom of the page. Typically, it contains navigation links, copyright information or whatever you need to add to the footer.
Structure of a jQuery Mobile Page
<!DOCTYPE html> <html> <head> <title>jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Header Text</h1> </div> <div data-role="content"> <p>jQuery Mobile framework introduction!!</p> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> </body> </html>
All of the above containers can have any HTML elements like paragraphs, images, headings, lists, etc.

Using Page as Dialog
A dialog box is used to show information or take input from users. You can also open a page within dialog box by using data-rel="dialog"
attribute to the link as given below:
<div data-role="page" id="page1"> <div data-role="header"> <h1>Header text</h1> </div> <div data-role="content"> <h1>Welcome to Page1!</h1> <a href="#page2" data-rel="dialog">Go to Next Page</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div> <div data-role="page" id="page2"> <div data-role="header"> <h1>Dialog Box</h1> </div> <div data-role="content"> <h1>Welcome to Page2!</h1> <a href="#page1">Go to Previous Page</a> </div> <div data-role="footer"> <h1>Footer Text</h1> </div> </div>
When you will click on link Go to Next Page
, page2 will be open in the dialog box as shown below:

What do you think?
I hope you have enjoyed the article and would able to have a clear picture about jQuery Mobile pages. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.
Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.