Home » jQuery Mobile

Muti pages with in single html file – jQuery Mobile application

2 March 2011 No Comment
Share on Facebook

JQuery mobile application can be made from single html file, instead of loading several pages.

Note:
Single file with multiple page will take initial load time.
Follow this for small web application
.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>My Mobile site</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

</head>

<body>
<!--Home page starts-->
<div data-role="page" data-theme="b" id="home-page">
<div data-role="header">
<h1>Designscripting.com</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li> <a href="#about-page">About</a> </li>
<li>Contact</li>
</ul>
</div>
<div data-role="footer">
<h4> <a href="#">Privacy</a></h4>
</div>
</div>
<!--Home page Ends-->

<!--About page starts-->
<div data-role="page" data-theme="b" id="about-page">
<div data-role="header">
<h1>Designscripting.com</h1>
</div>
<div data-role="content">
This is a sample about page.
</div>
<div data-role="footer">
<h4> <a href="#">Privacy</a></h4>
</div>
</div>
<!--About page Ends-->

</body>
</html>

We need to create mutiple page holders with unique id and the content section.

<div data-role="page" data-theme="b" id="home-page">
</div>

<div data-role="page" data-theme="b" id="about-page">
</div>

The about page will have default back button in the header.

Read more to remove back button from header:

<div data-role=”header” data-backbtn=”false”>
<h1>Designscripting.com</h1>
</div>

Conclusion: In this series of creating jQuery mobile application we have learnt basics of jQuery mobile page structure, theming, adding transition, and multi page application. Please add a comment to improve the article or doubts.

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner


Leave your response!

Add your comment below, or trackback from your own site. You can also subscribe to these comments via RSS.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

This is a Gravatar-enabled weblog. To get your own globally-recognized-avatar, please register at Gravatar.