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,903   
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
18 NOV
Angular with Firebase (Classroom)
04:00 PM-07:00 PM IST(+5:30)
18 NOV
Angular2+4 with Firebase (Online)
10:30 AM-12:30 PM IST(+5.30 GMT)
11 NOV
ASP.NET MVC (Online)
08:00 AM-10:00 AM IST / 09:30 PM To 11:30 PM(CST)
11 NOV
ASP.NET MVC (Classroom)
09:00 AM to 12:00 AM
7 NOV
Developing Microsoft Azure Solutions (Online)
07:00 AM-08:30 AM IST/ 8:30 Pm -10:00 PM CST
14 OCT
Angular2 and Angular4 (Online)
03:00 PM-05:00 PM IST (+5.30GMT)
12 OCT
ASP.NET Core (Online)
09:00 PM - 11:00 PM IST(+5:30 GMT)
10 OCT
Microsoft Azure Infrastructure Solutions (Online)
08:00 AM-09:30 AM IST / 09:30 PM -11:00 PM CST
LIKE US ON FACEBOOK
 
+