Please enable Javascript to correctly display the contents on Dot Net Tricks!

Understanding jQuery Mobile Pages

 Print 
  Author : Shailendra Chauhan
Posted On : 19 Dec 2013
Total Views : 5,698   
Updated On : 26 Sep 2016
 

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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.



Free Interview Books
 
COMMENTS
24 SEP
Angular2 and Angular4 (Classroom)
08:30 AM-11:30 AM IST
23 SEP
MEAN Stack (Classroom)
8:30 Am To 11:30 Am
23 SEP
Microsoft Azure Infrastructure Solutions (Online)
08:00 PM-11:00 PM IST / 9:30 AM-12:30 PM CST
20 SEP
MEAN Stack (Online)
07:00 AM-09:00 AM IST
20 SEP
ASP.NET MVC with Angular4 (Online)
9:00PM- 11:00PM IST(+5:30GMT)
16 SEP
Angular2 and Angular4 (Online)
08:00 AM-10:00 AM IST(+5.30 GMT)
7 SEP
ASP.NET MVC with Angular4 (Online)
09:00 PM to 11:00 PM IST (+5:30 GMT)
22 AUG
ASP.NET Core with Angular4 (Online)
07:00 AM - 9:00 AM IST(+5:30 GMT)
19 AUG
MEAN Stack 2 (Online)
5:30 Pm - 7:00 PM IST (+5:30 GMT)
19 AUG
ASP.NET MVC with Angular4 (Online)
10:30 Am to 12:30 PM IST (+ 5:30 GMT)
19 AUG
NodeJS with Angular4 (Classroom)
04:00 PM to 07:00 PM IST (+5:30 GMT)
12 AUG
ASP.NET MVC with Angular4 (Classroom)
11:30 AM - 1:30 PM IST (+5:30GMT)
15 JUL
ASP.NET MVC with Angular4 (Online)
03:30 PM - 05:30 PM IST(+5.30 GMT)
LIKE US ON FACEBOOK
 
+