Question

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

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

jquery mobile的includes（js和stylesheet）应该是正确的（也是路径）。

我不认为它与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>

如果有人能帮助我，我会非常感激，并感谢你一千次。

Answer 1

在这个例子中，我已经注释掉了你的index.css文件并用https://jquerymobile.com/download/中的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文件重新放入并再次测试。逐个添加原始路径并进行测试 - 请务必检查浏览器控制台是否有错误。

为什么jquery mobile不能用于Phonegap？

1 个答案: