jQuery-Mobile 无法在 Windows Phone 7 中运行?

发布于 2024-10-30 20:50:36 字数 2974 浏览 0 评论 0原文

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

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

不顾 2024-11-06 20:50:37

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

调试此问题的最佳方法是尝试使用桌面浏览器。该示例是否可以在 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.

幸福丶如此 2024-11-06 20:50:37

我建议使用 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>

I would suggest to used the CDN instead your local files for invoking jQuery and jQMobile just to start.

change this

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

into this

<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>
冷情妓 2024-11-06 20:50:37

我以前也遇到过同样的问题。

对我来说,这是我的 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文