Question

我正在尝试使用JQuery Mobile和PhoneGap（Cordova）编写应用程序。

到目前为止Phonegaps表现良好，我可以使用普通的JQuery做一些简单的动画。我想利用JQuery Mobiles的样式功能，例如：

  <div data-role="header">

然而，这一切都没有通过。也许我错误地设置了这个？我比较了样本项目，看起来很好。

标题div应该有一个带有渐变的iOS黑色条形图，但看起来没有样式。有人能指出我正确的方向吗？

我的代码是：

        <!-- JQM css-->
        <link rel="stylesheet" type="text/css" href="css/jqmcss.css" />
        <!-- Normal css-->
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
        <title>My App</title>
    </head>
    <body>
      <div data-role="page">
          <div data-role="header">
              <h1>Program</h1>
          </div><!--HEADER-->

<!--OTHER DIVS-->

   </div><!--PAGE-->

        <script type="text/javascript" src="cordova-2.7.0.js"></script>
        <script type="text/javascript" src="js/jquery.min.1.9.js"></script>
        <script type="text/javascript" src="js/jquery.mobile.min.js"></script>
        <script type="text/javascript" src="js/myscripts.js"></script>
        <script type="text/javascript">
            app.initialize();
        </script>
    </body>

Answer 1

尝试在标题中加载jquery和jqm，我猜你错过了viewport

<meta name="viewport" content="width=device-width, initial-scale=1">

和HTML5是必需的。

<!DOCTYPE html>

Answer 2

这是一个常见问题，在这种情况下可能会发生：

不兼容的jQuery和jQuery Mobile版本

因为您已经重命名了jQuery Mobile文件，所以我无法确认这是您的问题。基本上jQuery Mobile开发人员已将框架锁定到某些jQuery版本。例如，如果你使用带有jQuery 1.9+的jQuery Mobile 1.2，它将不起作用，并且不会对页面进行样式化。

因此，在您的情况下，请访问他们的官方site并下载最新的1.3.1 jQuery Mobile文件。

不兼容的jQuery Mobile js和css文件

此错误与前一种情况类似。 jQuery Mobile对其内容严格要求。

再次访问他们的官方网站并下载这些文件：

<强> Minified: jquery.mobile-1.3.1.min.js
的 Minified with Default theme: jquery.mobile-1.3.1.min.css

JQuery Mobile和Phonegap - 没有获得任何JQuery Mobile css效果

2 个答案:

不兼容的jQuery和jQuery Mobile版本

不兼容的jQuery Mobile js和css文件