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

Understanding jQuery Mobile Pages

  Author : Shailendra Chauhan
Posted On : 19 Dec 2013
Total Views : 5,296   
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 (0)
6 JUN
Hadoop Development cum Administration (Online)

7:00 AM-9:00AM IST

Know More
30 MAY
ASP.NET MVC with Angular4 Development (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)

Know More
30 MAY
ASP.NET MVC with Angular4 Development (Online)

09:00 PM-11:00 PM IST(+5.30 GMT)

28 MAY
ASP.NET Core with Angular4 Development (Classroom)

10:30 AM-11:30 AM Weekend

27 MAY
ASP.NET MVC with Angular4 Development (Classroom)

4:00 PM-5:30 PM Weekend

20 MAY
Angular2 and Angular4 Development (Online)

08:00 AM-10:00 AM IST(+5.30 GMT) Weekend

20 MAY
NodeJS with Angular4 Development (Classroom)

5:00 PM-6:30 PM Weekend

8 MAY
ASP.NET MVC with Angular4 Development (Online)

07:00 AM-09:00 AM IST(+5:30 GMT) M/W/F

2 MAY
ASP.NET Core Development (Online)

07:00 AM - 09:00 AM IST( TUS, THR)

29 APR
ASP.NET MVC with Angular2 Development (Classroom)

9:30 AM-11:00 AM

22 APR
MEAN Stack 2 Development (Classroom)

11:00 AM-12:30 PM Weekend

10 APR
Master Class ASP.NET MVC 5 with Angular2 Plus Angular4 Development (Online)

09:00 PM - 11:00 PM IST (M/W/F)

BROWSE BY CATEGORY
 
 
LIKE US ON FACEBOOK
 
+