Home  >  jQuery Mobile

jQuery Mobile Pages Example

August 10, 2014
jQuery mobile pages work on every smartphone devices. All content pages are created between <header> and <footer> section. It is content area and can add multiple pages for content. In jQuery mobile use data-role attribute to create page structure. HTML5 and CSS3 are used to create page section and beautification for pages. It may have some compatibility issues on desktop computers due to limited CSS3 support. We should use to Google Chrome for better page run.
We have created a simple page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page">
  <div data-role="header">
    <h1>Homepage</h1>
  </div>
  <div data-role="first" class="ui-content">
    <p>My First Page</p>
  </div>
  <div data-role="footer">
    <h1>Footer</h1>
  </div>
</div>
</body>
</html> 
jQuery Mobile Pages  Example

According to example

1. The data-role="page" is the first attribute displayed page in the browser.
2. The data-role="header" creates toolbar at the top of the page and is used for heading or page title in header section.
3. The data-role="first" defines the content area of the page, where we can put one or more image, content and form button etc. UI-content is class to change padding margin and text beautification inside the page content.
4. The data-role="footer" creates toolbar at the bottom of the page. Where we can define page footer name.

We can create two type of pages, one is internal page and another is external page.

1. Internal pages Example

In mobile page we can write one or more internal pages and gives same data-roll="" but all section id will different. These section must be top level siblings in the document body. It is not possible to nest pages within one another.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>

<section id="page1" data-role="page">
<header data-role="header">
  <h1>Homepage</h1></header>
<div data-role="content" class="content">
  <p>My first page!</p>
  <p><a href="#page2">Go to Second Page</a></p>
 </div>
<footer data-role="footer"><h1>Footer</h1></footer>
</section>

<section id="page2" data-role="page">
  <header data-role="header"><h1>Homepage</h1></header>
  <div data-role="content" class="content">
  <p>My second page!</p>
<p><a href="#page3">Go to Third Page</a></p>
</div>
 <footer data-role="footer"><h1>Footer</h1></footer>
</section>

<section id="page3" data-role="page">
<header data-role="header"><h1>Homepage</h1></header>
<div data-role="content" class="content">
<p>My third page!</p>
<p><a href="#page1">Go back to First Page</a></p>
</div>
<footer data-role="footer"><h1>Footer</h1></footer>
</section>
</body>
</html>  
jQuery Mobile Pages  Example
Three internal pages are linked by each other by id. All page data-roll="page" is same but id is different. Second page id is called in first page by #link and third page id is called in second page and first page id is called in third page. So all internal pages are linked by each other and open inside main container.

2. External pages Example

jQuery mobile can connect two or more external pages by page link inside HTML page. If you link to a separate page instead of an ID of a data-role="page" element within the current document, jQuery Mobile will perform an asynchronous fetch of the requested page and integrate it into the current document. jQuery mobile will fetch external page and search thought it for the first element marked by data-role="page" attribute.

To give the demo of external page, we will carte two page.
Find the first page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>Homepage</h1></header>
<div class="content" data-role="content">
<p>External Page 1</p>
<p><a href="test2.html">Go to Second Page</a>.</p>
</div>
<footer data-role="footer"><h1>Footer</h1></footer>
</section>
</body>
</html> 
Now find the second page.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>

<section id="page2" data-role="page">
<header data-role="header"><h1>Homepage</h1></header>
<div class="content" data-role="content">
<p>External Page 2</p>
<p><a href="test.html">Go to First Page</a>.</p>
</div>
<footer data-role="footer"><h1>Footer</h1></footer>
</section>
</body>
</html> 
jQuery Mobile Pages  Example
Two external pages are connected by internal link. First click on link "Go to First Page" then second page will open and when we click on second page link, it will redirect to first page.
FIND MORE TUTORILAS








Copyright ©2017 concretepage.com, all rights reserved |Privacy Policy | Contact Us