终于有一天,我终于在这里注册,不得不问我的问题,因为我已经很拼命了。
我正在启动一个新的Phonegap项目,并且希望/需要使用jquery mobile。我想使用一个flipswitch(如此处所示:http://demos.jquerymobile.com/1.4.3/flipswitch/)。我的问题是,此flipswitch或其他jquery移动特定对象(如按钮)均无法正确显示。例如,flipswitch代码仅显示一个普通复选框。
jQuery mobile的include(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文件,并使用了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文件放回去并再次测试。逐一添加原始路径并进行测试-确保检查浏览器控制台中是否有错误。