JQuery Mobile makes creating multi-page application very easy, I think its much better than using
Worklight for creating multi-page application
Take a look at this simple html page that i built which has 3 pages page1, page2 and page3, every page has link to the next page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0, user-scalable=0" />
<title>HelloWorkLightPhoneGap</title>
<link rel="shortcut icon" href="images/favicon.png" />
<link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/HelloWorkLightPhoneGap.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.0.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script>
var jq = jQuery.noConflict();
</script>
<script src="js/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body onload="WL.Client.init({})" id="content" style="display: none">
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>First Page</h3>
</div>
<div data-role="content" id="pagePort">
<a href="#page2">Go to second page</a>
</div>
<div data-theme="a" data-role="footer">
<h3>Copyright stuff</h3>
</div>
</div>
<div data-role="page" id="page2" >
<div data-theme="a" data-role="header">
<h3>Second Page</h3>
</div>
<div data-role="content" id="pagePort">
<a href="#page3">Go to third page</a>
</div>
<div data-theme="a" data-role="footer">
<h3>Copyright stuff</h3>
</div>
</div>
<div data-role="page" id="page3">
<div data-theme="a" data-role="header">
<h3>Third page</h3>
</div>
<div data-role="content" id="pagePort">
<a href="#page1">Go to first page</a>
</div>
<div data-theme="a" data-role="footer">
<h3>Copyright stuff</h3>
</div>
</div>
<script src="js/HelloWorkLightPhoneGap.js"></script>
<script src="js/messages.js"></script>
<script src="js/auth.js"></script>
</body>
</html>
When you want to move to the next page you use the link with value of href equal to the id of the next page
No comments:
Post a Comment