Here I included complete tutorial for how to changing pages in Jquery Mobile that runs on all mobile platform.
Steps to creating this is as follow1.Include Jquery library in your html page
2.Add data-role and id property in your div tag which you want to make page define more div in your html page for adding more pages in your app.
3.Full source is as bellow.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
function loadPage2() {
/* show wait page */
$.mobile.loading( 'show', {
text: 'Loading',
textVisible: true
});
/* fake AJAX call */
setTimeout(callback, 1500);
}
function callback() {
$.mobile.changePage("#page2");
}
function loadPage3() {
/* show wait page */
$.mobile.loading( 'show', {
text: 'Loading',
textVisible: true
});
/* fake AJAX call */
setTimeout(callback1, 1500);
}
function callback1() {
$.mobile.changePage("#page2");
}
</script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
<input type='Text'>
<p>Go to <a href="#" onclick='loadPage2();'>page 2</a>.</p>
<p>Go to <a href="#" onclick='loadPage3();'>page 3</a>.</p>
</div>
</div>
<div id="page2" data-role="page">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
<p>Go back to <a href="#page1">page 1</a>.</p>
<p>Go to <a href="#page3">Page 3</a></p>
</div>
</div>
<div id="page3" data-role="page">
<div data-role="header">
<h1>Page 3</h1>
</div>
<div data-role="content">
<p>Go back to <a href="#page1">page 1</a>.</p>
<p>Go to <a href="#page2">Page 2</a></p>
</div>
</div>
</body>
</html>
No comments:
Post a Comment