Javascript 为什么jquery mobile不适用于Phonegap？_Javascript_Jquery_Html_Cordova_Jquery Mobile

Javascript 为什么jquery mobile不适用于Phonegap？

javascript jquery html cordova jquery-mobile

Javascript 为什么jquery mobile不适用于Phonegap？,javascript,jquery,html,cordova,jquery-mobile,Javascript,Jquery,Html,Cordova,Jquery Mobile,有一天我终于在这里注册了，我不得不问我的问题，因为我已经非常绝望了我正在启动一个新的Phonegap项目，我想/需要使用jquery mobile。我想使用翻转开关（如图所示：）。我的问题是，无论是flipswitch还是其他jquery mobile特定对象（如按钮），都无法正确显示。例如，flipswitch代码仅显示普通复选框 jquerymobile的includes（js和样式表）应该是正确的（还有路径）我不认为这与Phonegap有关。即使我删除了所有Phonegap特定的代码，

有一天我终于在这里注册了，我不得不问我的问题，因为我已经非常绝望了

我正在启动一个新的Phonegap项目，我想/需要使用jquery mobile。我想使用翻转开关（如图所示：）。我的问题是，无论是flipswitch还是其他jquery mobile特定对象（如按钮），都无法正确显示。例如，flipswitch代码仅显示普通复选框

jquerymobile的includes（js和样式表）应该是正确的（还有路径）

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

我使用以下代码：

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


家庭自动化
翻转开关复选框：
按钮

如果有人能帮助我，我将不胜感激，并感谢您无数次。

在本例中，我已注释掉您的index.css文件，并用中的CDN代码片段替换了其他JavaScript和css路径-您应该会发现这是正确的：

<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文件放回并再次测试。逐个添加原始路径并进行测试-确保检查浏览器控制台是否有错误。

js和/或css文件的路径必须错误。您的

jquery.mobile-1.4.5.css

是否与index.html处于同一级别？谢谢您的回答。我把它放在一个叫做“jquery”的文件夹里。此文件夹与index.html位于同一级别。这正是让我恼火的地方。就我所见，引用应该是有效的。@Mati Tucci我刚刚意识到我对jquery.mobile-1.4.5.css的路径是错误的，但纠正这一点并没有解决我的问题。你是否尝试过添加type=“text/JavaScript”？我只是在本地完成了所有这些工作，并且成功了。您一定是走错了路径。将3个文件（

jquery.js

、

jquery.mobile-1.4.5.js

和

jquery.mobile-1.4.5.css

）与

index.html

放在同一级别。并更新

中的引用。另外，您确定jQuery文件只调用

jQuery.js

，而不是类似于

jQuery-2.2.0.js

？非常感谢，您让我度过了美好的一天。它现在在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。这些（似乎）还不够。很高兴它有所帮助。jquerymobile需要核心jQuery库才能工作。我猜jQM团队要么不能分发它，要么不想有这样做的维护开销。Re:Chrome我想如果你把HTML页面作为一个文件打开，而不是在web服务器上运行，那么你就会遇到问题。你所写的一切都是正确的。当我在本地Apache服务器上运行它时，它与Chrome一起工作。