Question

我正在尝试使用PhoneGap和JQuery mobile设置一个基本示例。我无法在浏览器中正确加载页面。问题是页面只是像普通的html一样呈现。

我咨询的消息来源。
http://docs.phonegap.com/en/2.4.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android_2_install_sdk_cordova http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html http://jquerymobile.com/demos/1.2.0/docs/pages/phonegap.html

它应如下所示：http://jquerymobile.com/demos/1.2.0/docs/pages/page-template.html

我得到的是什么：
enter image description here

我的文件夹结构：

/assets/  
-/www/  
--/cordova-2.4.0.js  
--/index.html  
--/jquery-1.8.2.js  
--/jquery.mobile-1.2.0.css  
--/jquery.mobile-1.2.0.js

这是我的基本html页面：

<!DOCTYPE HTML>
<html>
    <head>
        <title>PhoneGap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
        <link rel="stylesheet" type="type/css" href="jquery.mobile-1.2.0.css"/>
        <script src="jquery-1.8.2.js"></script>
        <script src="jquery.mobile-1.2.0.js"></script>
    <body> 

        <div data-role="page">

            <div data-role="header">
                <h1>Single page</h1>
            </div><!-- /header -->

            <div data-role="content">   
                <p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p>      
                <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
                <p>This template is standard HTML document with a single "page" container inside, unlike a <a href="multipage-template.html" data-ajax="false">multi-page template</a> that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.</p>
            </div><!-- /content -->

            <button>text</button>

            <div data-role="footer">
                <h4>Footer content</h4>
            </div><!-- /footer -->

        </div><!-- /page -->

    </body>
</html>

编辑：这是我的logcat中的内容..

02-20 11:31:47.342: E/Web Console(18138): Uncaught SyntaxError: Unexpected token ; at file:///android_asset/www/jquery.mobile-1.2.0.js:2655

这是google驱动器的链接，其中包含我的www文件夹...
https://docs.google.com/folder/d/0B3ALaz5FfLwgZUJjdW1PTnJyblE/edit?usp=sharing

Answer 1

您的问题出在 jquery-1.9.1.js ，jQuery Mobile 1.2无法与1.8.3以上的任何jQuery一起使用。

你甚至可以在这个jSFiddle示例上测试它：http://jsfiddle.net/Gajotres/yWTG2/，你只需要在左上角更改jQuery版本。将其更改为1.9.1。一切都会制动。

所以改变这个：

<script src="jquery-1.9.1.js"></script>

到版本1.8.3。

编辑：

我已经下载了您的来源。我发现你的jQuery Mobile css和js源是问题，从我的jsFiddle示例重新下载它们。然后一切都会正常工作。

无法在PhoneGap中加载JQueryMobile CSS / JS

1 个答案: