logo标签列表

jQuery-Mobile在Windows Phone 7上无法运行？

windows-phone-7jquery-mobile
3

我在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"> &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>
没有任何代码，我们只能瞎猜... - alex
@alex：现在我已经添加了源代码。 - selladurai
2
你应该从 http://validator.w3.org 开始验证你的文档。例如，你有两个 body 标签。 - Aleksi Yrttiaho
是的，然后我移除了它...但是还是不起作用。 - selladurai
2
你确定你的JS文件已经正确加载了吗？ - dmarucco
3个回答
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>
2

移动浏览器的调试功能不是很先进。

最好的调试方法是尝试使用桌面浏览器。这个例子能在IE7上（或以兼容模式运行的IE9）运行吗？首先让它在那里正常运行，然后再将其移植到移动UI上。

1

我之前也遇到过这个问题。

对我来说，这是一个HTML语法问题，我认为这里可能也是类似的问题（似乎JQM在WP7下对其HTML非常挑剔）

我建议从内容div周围的中心标签开始，要么去掉它们，要么将它们移动到内部。甚至可以使用CSS类替换字体标签。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接