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

Understanding jQuery Mobile Pages

  Author : Shailendra Chauhan
Updated On : 26 Sep 2016
Total Views : 4,833   
 

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.

YOU MIGHT LIKE
Free Interview Books
 
COMMENTS (0)
14 DEC
ASP.NET MVC with AngularJS Development (online)

MON-FRI 07:30 AM- 09:00 AM IST

Know More
5 DEC
AngularJS Development (online)

Mon - Fri     6:30 AM-7:30 AM IST

3 DEC
AngularJS Development (offline)

SAT,SUN     11:00 AM-12:30 PM IST

3 DEC
MEAN Stack Development (offline)

Sat, Sun     (09:30 AM-11:00 AM IST)

26 NOV
ASP.NET MVC with AngularJS Development (offline)

(SAT,SUN)     03:30 PM-05:00 PM IST

24 NOV
ASP.NET MVC with AngularJS Development (online)

MON-FRI     09:30 PM-11:00 PM IST

12 NOV
ASP.NET MVC with AngularJS Development (offline)

SAT,SUN     08:00 AM-09:30 AM

3 NOV
ASP.NET MVC with AngularJS Development (online)

MON-FRI     07:30 AM-09:00 AM IST

25 OCT
.NET Development (offline)

Mon-Fri     9:00 AM-11:00 AM IST

BROWSE BY CATEGORY
 
RECENT ARTICLES
SUBSCRIBE TO LATEST NEWS
 
LIKE US ON FACEBOOK
 

Professional Speaks

+