I'm developing an application using PhoneGap & jQuery Mobile.
I've completed the android version of the application. I'm using Adobe PhoneGap build to build my application. Android version is working perfectly. But now I'm trying to test the Windows Phone 8 version of the app.
I tested the PhoneGap build app.xap
in Visual Studio 2012 emulator. It seems the jQuery mobile is not working. For testing purpose, I created a sample app. with two jQuery mobile
page. That too is not working.
Please help me out. Any kinda help would be deeply appreciated. Thanks, =) Please tell me where've gone wrong.
Pasting my sample code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<!--[if IE 7]><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><![endif]-->
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" />
<title>Hello World</title>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content">
<a data-role="button" href="#page2">
Button
</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<h3>
Footer
</h3>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Madison, WI&zoom=14&size=288x200&markers=Madison, WI&sensor=false"
width="288" height="200">
<a data-role="button" href="#page1">
Button
</a>
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#page1" data-transition="fade" data-theme="" data-icon="">
Button
</a>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
This is what I got as output:
This is what i need :