为什么 jquery mobile 不适用于 Phonegap？答案

【问题标题】：Why is jquery mobile not working for Phonegap?为什么 jquery mobile 不适用于 Phonegap？
【发布时间】：2016-02-09 00:40:00
【问题描述】：

我终于在这里注册并不得不问我的问题的那一天已经到来，因为我已经如此绝望了。

我正在开始一个新的 Phonegap 项目，我想/需要使用 jquery mobile。我想使用翻转开关（如下所示：http://demos.jquerymobile.com/1.4.3/flipswitch/）。我的问题是这个翻转开关和其他 jquery mobile 特定对象（如按钮）都不能正确显示。例如，翻转开关代码只显示一个普通的复选框。

jquery mobile 的包含（js 和样式表）应该是正确的（也是路径）。

我认为这与 Phonegap 无关。即使我删除了所有 Phonegap 特定代码并在浏览器中打开剩余代码（尝试过 Firefox 和 Chrome），也只会显示一个复选框并且没有翻转开关。还是我在做其他完全错误的事情？

我使用以下代码：

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <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/index.css" />
    <link rel="stylesheet" href="jquery.mobile-1.4.5.css">
    <script src="jquery/jquery.js"></script>
    <script src="jquery/jquery.mobile-1.4.5.js"></script>
    <title>Home Automatization</title>
  </head>

  <body>
    <div class="app">
      <form>
        <label for="flip-checkbox-1">Flip toggle switch checkbox:</label>
        <input type="checkbox" data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1">
      </form>
      <button class="ui-btn ui-corner-all">Button</button>
    </div>
  </body>
</html>

如果有人可以帮助我，我将非常感激，并感谢你一千次。

【问题讨论】：

您的 js 和/或 css 文件的路径一定是错误的。 jquery.mobile-1.4.5.css 是否与 index.html 处于同一级别？
感谢您的回答。我把它放在一个名为“jquery”的文件夹中。此文件夹与 index.html 位于同一级别。这正是让我恼火的地方。据我所知，引用应该有效。
@Mati Tucci 我刚刚意识到我的 jquery.mobile-1.4.5.css 路径错误，但更正并没有解决我的问题。
你试过添加 type="text/JavaScript" 吗？
我只是在本地完成了所有这些工作，并且成功了。你一定有错误的路径/ s。将 3 个文件（jquery.js、jquery.mobile-1.4.5.js 和 jquery.mobile-1.4.5.css）放在与 index.html 相同的级别。并更新<head> 中的引用。另外，您确定 jQuery 文件仅被称为 jquery.js 而不是 jquery-2.2.0.js 之类的名称吗？

标签： javascript jquery html cordova jquery-mobile

【解决方案1】：

在此示例中，我已注释掉您的 index.css 文件，并将其他 JavaScript 和 CSS 路径替换为来自 https://jquerymobile.com/download/ 的 CDN sn-p - 您应该会发现这可以正常工作：

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <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/index.css" /> -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <title>Home Automatization</title>
  </head>

  <body>
    <div class="app">
      <form>
        <label for="flip-checkbox-1">Flip toggle switch checkbox:</label>
        <input type="checkbox" data-role="flipswitch" name="flip-checkbox-1" id="flip-checkbox-1">
      </form>
      <button class="ui-btn ui-corner-all">Button</button>
    </div>
  </body>
</html>

如果可行，请将您的 index.css 文件放回并再次测试。逐一添加您的原始路径并进行测试 - 请务必检查您的浏览器控制台是否有错误。

【讨论】：

非常感谢你，你让我很开心。它现在在 Firefox 中完美运行，但在 Chrome 中，页面正在无限加载。你知道可能是什么原因吗？看来我确实把脚本和 css 文件搞砸了。请问您为什么要导入 jquery-1.11.1.min.js ？我下载了 jquery mobile，它只包含 .js 文件 jquery.mobile-1.4.5.js 和 jquery.mobile-1.4.5.min.js。这些（看起来）还不够。
很高兴它有帮助。 jQuery Mobile 需要核心 jQuery 库才能工作。我猜 jQM 团队要么无法分发它，要么不希望这样做的维护开销。回复：Chrome 我认为如果您通过将 HTML 页面打开为 file:// 而不是在 Web 服务器上运行它来启动 HTML 页面，您会遇到问题。
你写的都是正确的。当我在本地 Apache 服务器上运行 Chrome 时，它可以与 Chrome 一起使用。