<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>Test</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.2.0.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/cordova-2.0.0.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
cordova.exec(null, null, "SplashScreen", "hide", []);
}
$(document).bind("mobileinit", function () {
$.support.cors = true;
$.mobile.defaultTransition = 'slide';
$.mobile.allowCrossDomainPages = true;
$.mobile.touchOverflowEnabled = true;
});
</script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<!---------------------------------Page One----------------------------------->
<div data-role="page" id="one" class="page_background">
<div data-role="header" data-theme="d" class="header_logo">
Page 1
</div><!--/header-->
<ul data-role="listview" data-dividertheme="d">
<li data-role="list-divider"><h1>One</h1></li>
</ul>
<div data-role="content">
<div data-role="navbar" data_theme="a" >
<ul>
<li><a href="#" data-icon="home" class="ui-btn-active ui-state-persist">One</a></li>
<li><a href="#two" data-icon="gear" >two</a></li>
</ul>
</div><!-- /navbar -->
One
</div><!--/content-->
<div data-role="footer" data-position="fixed" >
<div data-role="navbar" data_theme="a" >
<ul>
<li><a href="index.html" data-icon="home" data-transition="fade" >Home</a></li>
</ul>
</div><!-- /navbar -->
</div><!--/footer-->
</div><!--/page-->
<!---------------------------------Page Two----------------------------------->
<div data-role="page" id="two" class="page_background">
<div data-role="header" data-theme="d" class="header_logo">
Page 2
</div><!--/header-->
<ul data-role="listview" data-dividertheme="d">
<li data-role="list-divider"><h1>Two</h1></li>
</ul>
<div data-role="content">
<div data-role="navbar" data_theme="a" >
<ul>
<li><a href="#one" data-icon="home" >One</a></li>
<li><a href="#" data-icon="gear" class="ui-btn-active ui-state-persist">two</a></li>
</ul>
</div><!-- /navbar -->
Two
</div><!--/content-->
<div data-role="footer" data-position="fixed" >
<div data-role="navbar" data_theme="a" >
<ul>
<li><a href="index.html" data-icon="home" data-transition="fade" >Home</a></li>
</ul>
</div><!-- /navbar -->
</div><!--/footer-->
</div><!--/page-->
</body>
</html>