cbrito/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script
	src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript">
	document.addEventListener("deviceready", onDeviceReady, false);

	function onDeviceReady() {
		document.addEventListener("backbutton", handleBackButton, true);
	}

	function handleBackButton() {
		console.log("back clicked");
		window.history.back();
	}
</script>
</head>
<body>
	<div data-role="page" id="page1">
		<div data-role="header">
			<h1>Page 1</h1>
		</div>
		<div data-role="content">
			<a href="#page2" data-role="button">Goto Page2</a>
		</div>
	</div>

	<div data-role="page" id="page2">
		<div data-role="header">
			<h1>Page 2</h1>
		</div>
		<div data-role="content">
			<a href="#page3" data-role="button">Goto Page3</a>
			<a data-rel="back" data-role="button">Rel Back</a> <a id="forceBackTo1"
				data-role="button">Force Back</a>
			<a data-role="button" onclick="navigator.app.backHistory();">Cordova Back</a>
		</div>
	</div>

	<div data-role="page" id="page3">
		<div data-role="header">
			<h1>Page 3</h1>
		</div>
		<div data-role="content">
			<a data-role="button" href="page4.html" data-ajax="false">Goto Page4</a>
			<a data-rel="back" data-role="button" >Rel Back</a> <a id="forceBackTo2"
				data-role="button">Force Back</a>
			<a data-role="button" onclick="navigator.app.backHistory();">Cordova Back</a>
		</div>
	</div>
</body>

<script type="text/javascript">
	$("#forceBackTo1").click(function() {
		history.back();
	});
	$("#forceBackTo2").click(function() {
		history.back();
	});
</script>
</html>

## page4.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script
	src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript">
	document.addEventListener("deviceready", onDeviceReady, false);

	function onDeviceReady() {
		document.addEventListener("backbutton", handleBackButton, true);
	}

	function handleBackButton() {
		console.log("back clicked");
		window.history.back();
	}
</script>
</head>
<body>

	<div data-role="page" id="page4">
		<div data-role="header">
			<h1>Page 4</h1>
		</div>
		<div data-role="content">
			<a data-rel="back" data-role="button" href="index.html" data-direction="reverse">Rel Back</a>
			<a id="forceBackToIndex" data-role="button" data-direction="reverse">Force Back</a>
			<a data-role="button" data-direction="reverse" onclick="navigator.app.backHistory();">Cordova Back</a>
		</div>
	</div>

</body>

<script type="text/javascript">
	$("#forceBackToIndex").click(function() {
		window.history.back();
	});
</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Insert title here</title>
	<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script
	src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
	<script type="text/javascript">
	document.addEventListener("deviceready", onDeviceReady, false);

	function onDeviceReady() {
	document.addEventListener("backbutton", handleBackButton, true);
	}

	function handleBackButton() {
	console.log("back clicked");
	window.history.back();
	}
	</script>
	</head>
	<body>
	<div data-role="page" id="page1">
	<div data-role="header">
	<h1>Page 1</h1>
	</div>
	<div data-role="content">
	<a href="#page2" data-role="button">Goto Page2</a>
	</div>
	</div>

	<div data-role="page" id="page2">
	<div data-role="header">
	<h1>Page 2</h1>
	</div>
	<div data-role="content">
	<a href="#page3" data-role="button">Goto Page3</a>
	<a data-rel="back" data-role="button">Rel Back</a> <a id="forceBackTo1"
	data-role="button">Force Back</a>
	<a data-role="button" onclick="navigator.app.backHistory();">Cordova Back</a>
	</div>
	</div>

	<div data-role="page" id="page3">
	<div data-role="header">
	<h1>Page 3</h1>
	</div>
	<div data-role="content">
	<a data-role="button" href="page4.html" data-ajax="false">Goto Page4</a>
	<a data-rel="back" data-role="button" >Rel Back</a> <a id="forceBackTo2"
	data-role="button">Force Back</a>
	<a data-role="button" onclick="navigator.app.backHistory();">Cordova Back</a>
	</div>
	</div>
	</body>

	<script type="text/javascript">
	$("#forceBackTo1").click(function() {
	history.back();
	});
	$("#forceBackTo2").click(function() {
	history.back();
	});
	</script>
	</html>