2

我第一次尝试让 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>

但是当推动运行时 - 它构建得很好，但 jquery mobile 似乎根本没有采取行动 - 我只是得到没有固定位置和主题的 h1 'Header' 和 'Footer' 。我的方案是 <我的应用程序>/iPhone 6.0 模拟器。

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

4

3 回答 3

0

更改脚本文件的顺序。我还注意到您没有使用 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>
于 2012-11-16T06:02:39.967 回答
0

我不太确定这是否是问题，但我注意到您的脚本不是头部或正文，它们应该在任何一个中，所以我总是将它们放在头脑中。所以这就是我要做的

   <!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 库文件之下

于 2012-11-15T22:41:53.517 回答
0

这里有两种可能性：

  • 构建实际上并不是最新的——xcode 并不总是检测到对 web 文件的更改，因此当您在设备上运行时，您会看到旧版本。清洁通常会解决这个问题。

  • 该链接略有错误 - 通常是大小写问题，因为与桌面操作系统不同，iOS 区分大小写。如果您将 Safari 网络检查器附加到您的应用程序，您可以查看哪些文件没有加载。

  • 该链接完全错误 - 在桌面浏览器中打开 html 是否有效？

于 2012-11-16T01:57:25.343 回答