jQuery移动css和javascript没有链接到我的代码

Question

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

这里是我的代码：

<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移动示例应用程序。

请帮帮我。

Answer 1

使用下列解决方案之一：

解决方案1：

这第一种解决方案包括，在本地包含jQuery移动的CSS / JS文件(=在文件夹www中)

1 -在文件夹www中包含index.html文件。

2 -从相应的链接加载三个、JS文件：

• http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css
• http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css
• http://code.jquery.com/jquery-1.8.1.min.js
• http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js

3 -将CSS文件复制到www/css/中，JS文件复制到www/js/中，而则确保XCode中的引用成功地完成。

您可以执行以下操作来实现上面的内容：

1. 右键单击您的文件夹www/css/或www/js/ in XCode， New File... -> iOS / Other -> Empty -> Next.Then，输入要复制的文件(例如：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。

一旦您的文件被复制，您应该具有以下目录结构：

• www
  • 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移动的CSS / JS文件的路径，您可以将它们的引用添加到jQuery文件的标题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：

第二个解决方案是从jQuery的外部服务器获取http://code.jquery.com移动的CSS / JS文件。

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

有关此白名单的更多信息，我建议您查看在线文档(此为Phonegap / Cordova版本2.1，您可以根据您的Phonegap /Cordova版本检查适当的链接)：index.md.html#Domain%20Whitelist%20Guide

由于您正在使用XCode (而且您正在为iOS开发)，您必须按照以下步骤将http://code.jquery.com添加到您的白名单异常中：

• 在Resources/Cordova.plist中打开XCode文件。
• 右键单击行ExternalHosts，并选择Add row。
• 将新创建的行的String值设置为code.jquery.com。
• 保存修改后的文件并关闭它。

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

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

Answer 2

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

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