0

我正在尝试使用 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>
4

2 回答 2

1

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

不兼容的 jQuery 和 jQuery Mobile 版本

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

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

不兼容的 jQuery Mobile js 和 css 文件

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

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

缩小：jquery.mobile-1.3.1.min.js
使用默认主题缩小：jquery.mobile-1.3.1.min.css

于 2013-05-13T08:23:52.350 回答
1

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

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

并且需要 HTML5。

<!DOCTYPE html>
于 2013-05-13T07:09:15.003 回答