jQuery-Mobile 无法在 Windows Phone 7 中运行?
我在 jQuery alpha 4 中做了一项简单的任务。它在浏览器中运行,但是当我在 WP7 模拟器中运行时,它只显示白屏?谁能告诉我如何在 WP7 中运行?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Alpha 4 test</title>
<!-- alpha 4 for jQuery mobile -->
<link rel="stylesheet" href="script/jquery.mobile-1.0a4.min.css" />
<script type="text/javascript" src="script/jquery-1.5.min.js"></script>
<script type="text/javascript" src="script/jquery.mobile-1.0a4.min.js"></script>
<script type="text/javascript">
function callpage2()
{
$.mobile.changePage("#detailpage","slide",false,false);
}
</script>
</head>
<body id="callweb">
<!-- /Page Starts -->
<div data-role="page" id="searchpage">
<!-- /header Starts-->
<div data-role="header" data-backbtn="false">
<center><font size="2"><h3>Saxo Tech</h3></font></center>
</div>
<!-- /header Ends -->
<!--Content Begins-->
<center>
<div data-role="content" id="content">
First page
<a href="#detailpage" data-icon="arrow-r" id="BackSearch" data-role="button"> Using ID</a>
<button onclick="callpage2()"> Using button (mobile changepage)</button>
<ul data-role="listview" data-inset="true" data-theme="e">
<li><img src="script/images/11.jpg" class="ui-li-thumb" /> <a style="margin-left:1em;">one</a></li>
<li> <img src="script/images/globe.jpg" class="ui-li-thumb" /><a style="margin-left:1em;">two</a></li>
</ul>
</div>
</center>
<!--Content Ends-->
</div>
<!-- Page End-->
<!-- Detail Page Starts -->
<div data-role="page" id="detailpage">
<!-- /header Starts-->
<div data-role="header">
<center><font size="2"><h3>Saxo Tech</h3></font></center>
<a href="#searchpage" data-icon="arrow-l" data-iconpos="notext" id="BackSearch" data-role="button" class="ui-btn-left"> Back </a>
</div>
<!-- /header Ends -->
<!--Content Begins-->
<center>
<div data-role="content" id="content">
second page
</div>
</center>
<!--Content Ends-->
</div>
<!--Detail Page End-->
</body>
</html>
I doing one simple task in jQuery alpha 4. It run in browser but when I run in WP7 emulator, it shows only white screen? can any one suggest me how to run in WP7?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Alpha 4 test</title>
<!-- alpha 4 for jQuery mobile -->
<link rel="stylesheet" href="script/jquery.mobile-1.0a4.min.css" />
<script type="text/javascript" src="script/jquery-1.5.min.js"></script>
<script type="text/javascript" src="script/jquery.mobile-1.0a4.min.js"></script>
<script type="text/javascript">
function callpage2()
{
$.mobile.changePage("#detailpage","slide",false,false);
}
</script>
</head>
<body id="callweb">
<!-- /Page Starts -->
<div data-role="page" id="searchpage">
<!-- /header Starts-->
<div data-role="header" data-backbtn="false">
<center><font size="2"><h3>Saxo Tech</h3></font></center>
</div>
<!-- /header Ends -->
<!--Content Begins-->
<center>
<div data-role="content" id="content">
First page
<a href="#detailpage" data-icon="arrow-r" id="BackSearch" data-role="button"> Using ID</a>
<button onclick="callpage2()"> Using button (mobile changepage)</button>
<ul data-role="listview" data-inset="true" data-theme="e">
<li><img src="script/images/11.jpg" class="ui-li-thumb" /> <a style="margin-left:1em;">one</a></li>
<li> <img src="script/images/globe.jpg" class="ui-li-thumb" /><a style="margin-left:1em;">two</a></li>
</ul>
</div>
</center>
<!--Content Ends-->
</div>
<!-- Page End-->
<!-- Detail Page Starts -->
<div data-role="page" id="detailpage">
<!-- /header Starts-->
<div data-role="header">
<center><font size="2"><h3>Saxo Tech</h3></font></center>
<a href="#searchpage" data-icon="arrow-l" data-iconpos="notext" id="BackSearch" data-role="button" class="ui-btn-left"> Back </a>
</div>
<!-- /header Ends -->
<!--Content Begins-->
<center>
<div data-role="content" id="content">
second page
</div>
</center>
<!--Content Ends-->
</div>
<!--Detail Page End-->
</body>
</html>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
移动浏览器上的调试功能不是很先进。
调试此问题的最佳方法是尝试使用桌面浏览器。该示例是否可以在 IE7 上运行(或在兼容模式下运行的 IE9)?首先让它在那里工作,然后将其移动到移动用户界面。
The debug capabilities on the mobile browser are not very advanced.
The best way to debug this is to try using the desktop browser instead. Does this example run on IE7 (or IE9 running in compatible mode)? Get it working there first, then move it across to the mobile UI.
我建议使用 CDN 而不是本地文件来调用 jQuery 和 jQMobile 来开始。
把这个改成
这个
I would suggest to used the CDN instead your local files for invoking jQuery and jQMobile just to start.
change this
into this
我以前也遇到过同样的问题。
对我来说,这是我的 html 语法的问题,我认为这里可能是类似的问题(WP7 下的 JQM 似乎对其 HTML 非常挑剔)
我将从内容 div 周围的中心标签开始,要么摆脱它们或将它们移到里面。甚至可能是字体标签并使用 CSS 类。
I have run into this same issue before.
For me it was an issue with my html syntax and I think is could be a similar issue here (It seems JQM under WP7 is very picky about its HTML)
I'd start with the centre tags around the content divs, either get rid of them or move them inside. Maybe even the font tags and use CSS classes.