dhavaln/home.html

## home.html
<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
</head>

<body>

	<div id="homePage" data-role="page">
		<div data-role="header" data-position="inline">
			<!-- <a href="#" id="infoLink" data-icon="info" data-iconpos="notext">Info</a>  -->
			<h1>Home</h1>
		</div>

		<div data-role="content" >
			This is home page</div>

	</div>
</body>
</html>

## index.html
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"/>
<link rel="stylesheet" href="css/jquery.mobile-1.0rc1.min.css" />

</head>
<body >

<div id="indexPage" data-role="page" >

	<div data-role="header" >
		<h1>Index Page</h1>
	</div>

	<div data-role="content" >
	    <a href="home.html" data-role="button"  >Home Link</a>
	    <a href="#" data-role="button" id="home" >Home Script</a>
    </div>

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="home.html" data-transition="none">1</a>
                </li>
                <li><a href="home.html" data-transition="none">2</a>
                </li>
                <li><a href="home.html" data-transition="none">3</a>
                </li>
            </ul>
        </div>
        <!-- /navbar -->
    </div>
</div>

<script src="js/jquery.js"></script>
<script src="js/phonegap.js"></script>
<script src="js/jquery.mobile.js"></script>
<script type="text/javascript">
	$("#home").click(function(){
		$.mobile.changePage("home.html");
	});

	document.addEventListener("deviceready", onDeviceReady, false);
	// PhoneGap loaded

	function onDeviceReady() {
	console.log("PhoneGap Ready!");
	// waiting for button
	document.addEventListener("backbutton", handleBackButton, false);
	}

	// handle the back button
	function handleBackButton() {
	console.log("Back Button Pressed!");
	navigator.app.exitApp();
	}
</script>
</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>Home</title>
	</head>

	<body>

	<div id="homePage" data-role="page">
	<div data-role="header" data-position="inline">
	<!-- <a href="#" id="infoLink" data-icon="info" data-iconpos="notext">Info</a> -->
	<h1>Home</h1>
	</div>

	<div data-role="content" >
	This is home page</div>

	</div>
	</body>
	</html>