Xcode 4.5.1, Cordova 2.2, jquery mobile答案

【问题标题】：Xcode 4.5.1, Cordova 2.2, jquery mobileXcode 4.5.1, Cordova 2.2, jquery mobile
【发布时间】：2012-11-04 14:56:15
【问题描述】：

我第一次尝试让 JQuery mobile (1.2.0) 与 Xcode 和 Phonegap (2.2.0) 一起使用。 Xcode/Phonegap 安装工作 - 它已根据

https://web.archive.org/web/20200806105755/http://docs.phonegap.com/en/2.2.0/guide_getting-started_ios_index.md.html

然后我将jquery mobile css和js添加到这个项目的www/js ad www/css中，得到了一个简单的index.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.css"/>
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.2.0.css"/>

        <title>Test of jquery mobile</title>
    </head>
    <script type="text/javascript" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
 

       <body>
            <div data-role="page" id="liveListPage">
                <div data-role="header" data-position="fixed" data-theme="a" >
                    <h1>Header</h1>
                </div>
                
                <div data-role="footer"  data-position="fixed" data-theme="a"  >
                    <h1>Footer</h1>
                </div>
            </div>
               
            
        </body>
    </html>

但是在推动 Run 时 - 它构建得很好，但 jquery mobile 似乎根本没有起作用 - 我只是得到 h1 'Header' 和 'Footer' 没有固定位置和主题。我的方案是/iPhone 6.0 Simulator。

我做错了什么？日志窗口中没有错误。

【问题讨论】：

此 HTML 文档是否在 www 目录中？另外，我很确定您网站的根目录应该位于：/assets/www/（iOS 和 Android 有什么不同吗？）。
另外我注意到你的脚本不在head 或body 他们真的应该在head

标签： jquery ios xcode cordova

【解决方案1】：

这里有两种可能性：

构建实际上不是最新的 - xcode 并不总是检测到 Web 文件的更改，因此当您在设备上运行时，您会看到旧版本。清理通常会解决这个问题。
链接略有错误 - 通常是大小写问题，因为与桌面操作系统不同，iOS 区分大小写。如果您将 Safari 网络检查器附加到您的应用程序，您可以查看哪些文件没有加载。
链接完全错误 - html 在桌面浏览器中打开时是否有效？

【讨论】：

【解决方案2】：

更改脚本文件的顺序。我还注意到您没有使用 jqm 加载 css 文件。因此，您可以先尝试从 jquery 网站加载。加载 js 和 css 文件的顺序非常重要。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>

【讨论】：

谢谢你 - 非常 - 就是这样 - 序列 - 很好
没问题。我很高兴它帮助了你。请帮助将其标记为已回答:)

【解决方案3】：

我不太确定这是否是问题，但我注意到您的脚本不是 head 或 body，它们应该在其中一个中，所以我总是把它们放在头上。所以这就是我要做的事情

   <!DOCTYPE html>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta name="format-detection" content="telephone=no" />
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
            <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.2.0.css"/>
            <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.2.0.css"/>

            <title>Test of jquery mobile</title>

            <script type="text/javascript" src="cordova-2.2.0.js"></script>               
           <script type="text/javascript" src="js/jquery.mobile-1.2.0.js"></script>
           <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
           <script type="text/javascript" src="js/index.js"></script> <!--your script-->


        </head>
           <body>
                <div data-role="page" id="liveListPage">
                    <div data-role="header" data-position="fixed" data-theme="a" >
                        <h1>Header</h1>
                    </div>

                    <div data-role="footer"  data-position="fixed" data-theme="a"  >
                        <h1>Footer</h1>
                    </div>
                </div>


            </body>
        </html>

编辑:: 在有人指出您的脚本文件位于 jQuery 文件之上，因此它不会注册 jQuery 库之后，我还注意到，因此我会将您的 index.js 文件移到位所以它在 jquery 库文件下面

【讨论】：

感谢您的回复。是的，js 应该在头脑中——我的错误——但它似乎没有改变任何东西。