2011-04-05 63 views
3

我在jQuery alpha 4中做了一个简单的任务。它在浏览器中运行,但是当我在WP7模拟器中运行时,它只显示白色屏幕?任何人都可以建议我如何在WP7中运行?jQuery-Mobile未在Windows Phone 7中运行?

<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"> &nbsp;&nbsp;Back &nbsp;&nbsp;</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> 
+0

没有任何代码,我们只能在黑暗中刺... – alex 2011-04-05 04:47:33

+0

@alex:现在我添加了源代码 – selladurai 2011-04-05 04:54:09

+2

您应该首先验证您的文档http://validator.w3.org。例如,您有两个身体标记。 – 2011-04-05 06:03:09

回答

2

的调试功能都不是很先进的。

调试此的最佳方法是尝试使用桌面浏览器。此示例是否在IE7上运行(或在兼容模式下运行的IE9)?首先在那里工作,然后将其移动到移动用户界面。

2

我会建议使用CDN,而不是你的本地文件来调用jQuery和jQMobile只是为了开始。

改变这种

<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> 

到在移动浏览器在这种

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" /> 
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script> 
1

我以前遇到过这个问题。

对我来说是我的HTML语法的问题,我认为是可以在这里类似的问题(这似乎JQM下WP7是关于它的HTML非常挑剔)

我会先从中心标记左右内容divs,要么摆脱他们,要么移动他们。甚至可能是字体标签和使用CSS类。