В настоящее время я делаю некоторые разработки для Windows Phone 7, используя phonegap + jquery mobile
По какой-то причине эмулятор Windows Phone, включенный в последнюю версию Visual Studio Express, не может отобразить простое многостраничное приложение.
У кого-нибудь есть подсказки, как это решить? Спасибо
ниже код. Это в значительной степени взято из мобильной документации jquery.
<!DOCTYPE html>
<html>
<head>
<!--
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no;" />
-->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta http-equiv="Content-type"
content="text/html; charset=utf-8"/>
<title>JQ Tester</title>
<link rel="stylesheet" type="text/css" href="js/jquery/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="js/jquery/jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/custom-scripting.js"></script>
<script type="text/javascript" src="js/jquery/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
</head>
<body>
<!-- Start of first page: #one -->
<div data-role="page" id="one" data-title="Page One">
<div data-role="header">
<h1>Multi-page</h1>
</div>
<!-- /header -->
<div data-role="content" >
<h2>One</h2>
<p>I have an id of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>
<p>
This is a multi-page <a href="page-template.html"> single page template</a> that has just one page within it.
</p>
<p>Just view the source and copy the code. Remember to include a meta viewport tag in the head to set the zoom level.</p>
<p>
You link to internal For example, to <a href="#two" >link</a> have a <code>href="#two"</code> in the code.
</p>
<h3>Show internal pages:</h3>
<p>
<a href="#two" data-role="button">Show page "two"</a>
</p>
<p>
<a href="#popup" data-role="button" data-rel="dialog">Show page "popup" (as a dialog)</a>
</p>
</div>
<!-- /content -->
<div data-role="footer" data-theme="d">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page one -->
<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a" data-title="Page Two">>
<div data-role="header">
<h1>Two</h1>
</div>
<!-- /header -->
<div data-role="content" data-theme="a">
<h2>Two</h2>
<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
<p>
Notice that the theme is different few <code>data-theme</code> swatch assigments here to show off how flexible it is.
</p>
<p>
<a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a>
</p>
</div>
<!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page two -->
<!-- Start of third page: #popup -->
<div data-role="page" id="popup">
<div data-role="header" data-theme="e">
<h1>Dialog</h1>
</div>
<!-- /header -->
<div data-role="content" data-theme="d">
<h2>Popup</h2>
<p>
I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.
</p>
<p>
<a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a>
</p>
</div>
<!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div>
<!-- /footer -->
</div>
<!-- /page popup -->
</body>
</html>