2

我是 jQuery Mobile 的新手，我正在尝试从教程中实现示例 jQuery Mobile 应用程序。

这是我的代码：

<html>
    <head>
        <meta charset="utf-8"/> 
            <title>Title</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1"/> 

                <link rel="stylesheet" type="text/css" href="jquery.mobile.css" />       
                <script type="text/javascript" src="jquery.js"></script>
                <script type="text/javascript" src="jquery.mobile.js"></script>           
    </head>  
    <body> 

        <div  data-role="page">                                                       
            <div  data-role="header">                                                 
                <h1>Page Header</h1>  
            </div>  

            <div  data-role="content" >                                                 
                <p>Hello jQuery Mobile!</p>  
            </div>  

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

    </body>
</html>

所有引用的文件都包含在我的项目中。但问题是我的输出是一个简单的 html 页面，没有应用任何 js 或 css 规则。

我想要像 jQuery Mobile 示例应用这样的输出。

请帮我。

4

2 回答 2

4

使用以下解决方案之一：

解决方案1：

第一个解决方案包括在本地包含您的 jQuery Mobile 的 CSS / JS 文件（= 在您的文件夹中www）

1 -将您的 HTML 文件包含index.html在您的文件夹www中。

2 -从各自的链接下载三个 CSS、JS 文件：

3 -将 CSS 文件www/css/和 JS 文件复制到其中www/js/，同时确保 XCode 中的引用成功完成。

您可以执行以下操作来实现上述目的：

  1. 右键单击您的文件夹www/css/或www/js/在 XCode 中
    New File...-> iOS/ Other-> Empty-> Next。
    然后，输入要复制的文件（例如：jquery.mobile.structure-1.2.0.min.css）。

  2. 将您下载的文件（例如：）的内容复制并粘贴jquery.mobile.structure-1.2.0.min.css到您在 XCode 中创建的新文件中。

  3. 对您下载的所有 CSS/JS 文件（jquery.mobile.structure-1.2.0.min.css、jquery.mobile-1.2.0.min.css、jquery-1.8.1.min.js和jquery.mobile-1.2.0.min.js）重复步骤 1 和 2。

复制文件后，您应该具有以下目录结构：

  • 万维网
    • index.html
    • css
      • jquery.mobile.structure-1.2.0.min.css
      • jquery.mobile-1.2.0.min.css
    • js
      • jquery-1.8.1.min.js
      • http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js

4 -现在，考虑到 jQuery Mobile 的 CSS / JS 文件的路径，您可以在 HTML 文件的标题中添加它们的引用index.html。

完整示例index.html：

<html>
    <head>
        <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>

        <link rel="stylesheet" href="./css/jquery.mobile.structure-1.2.0.min.css" />
        <link rel="stylesheet" href="./css/jquery.mobile-1.2.0.min.css" />
        <script src="./js/jquery-1.8.1.min.js"></script>
        <script src="./js/jquery.mobile-1.2.0.min.js"></script>
    </head>  
    <body> 

        <div  data-role="page">                                                       
            <div  data-role="header">                                                 
                <h1>Page Header</h1>  
            </div>  

            <div  data-role="content" >                                                 
                <p>Hello jQuery Mobile!</p>  
            </div>  

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

    </body>
</html>

解决方案2：

第二个解决方案包括从位于http://code.jquery.com的外部服务器获取 jQuery Mobile 的 CSS / JS 文件。

Phonegap 的问题是您需要添加特定的白名单例外以允许检索外部数据。

关于这个白名单的更多信息，我建议你查看在线文档（这个是针对Phonegap / Cordova 2.1版本的，你可以根据你的Phonegap / Cordova版本查看相应的链接）：http://docs.phonegap。 com/en/2.1.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide

由于您使用的是 XCode（并且您正在为 iOS 开发），因此您必须按照以下步骤添加http://code.jquery.com到您的白名单例外：

  • Resources/Cordova.plist在 XCode 中打开文件。

  • 右键单击该行ExternalHosts，然后选择Add row。

  • 将String新创建的行的值设置为code.jquery.com。

  • 保存修改后的文件并关闭它。

现在，您可以在 HTML 的标头中包含外部 CSS / JS 文件的引用index.html：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

完整示例index.html：

<html>
    <head>
        <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

    </head>  
    <body> 

        <div  data-role="page">                                                       
            <div  data-role="header">                                                 
                <h1>Page Header</h1>  
            </div>  

            <div  data-role="content" >                                                 
                <p>Hello jQuery Mobile!</p>  
            </div>  

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

    </body>
</html>
于 2012-10-04T12:52:59.687 回答
0

您是否检查过在 firefox 中使用 firebug 以确保实际的 javascript 库正在加载？您在哪里引用文件，这是否指向正确的位置？

我知道很简单，但可能会被忽略:)

于 2012-10-04T12:52:59.427 回答