[英]Why is jquery mobile not working for Phonegap?
The day has come that I finally register here and have to ask my question because I am already so desperate. 这一天到了,我终于在这里注册,不得不问我的问题,因为我已经非常绝望了。
I am starting a new Phonegap project and I want/need to use jquery mobile. 我正在开始一个新的Phonegap项目,我想/需要使用jquery mobile。 I want to use a flipswitch (like shown here: http://demos.jquerymobile.com/1.4.3/flipswitch/ ).
我想使用一个flipswitch(如下所示: http ://demos.jquerymobile.com/1.4.3/flipswitch/)。 My problem is that neither this flipswitch nor other jquery mobile specific objects like buttons are displayed correctly.
我的问题是这个翻转开关和其他jquery移动特定对象(如按钮)都没有正确显示。 The flipswitch code for example only shows a normal checkbox.
例如,flipswitch代码只显示一个普通的复选框。
The includes (js and stylesheet) for jquery mobile should be correct (also the path). jquery mobile的includes(js和stylesheet)应该是正确的(也是路径)。
I don't think that it has something to do with Phonegap. 我不认为它与Phonegap有关。 Even if I cut out all the Phonegap specific code and open the remaining code in a browser (tried Firefox and Chrome) only a checkbox gets displayed and no flipswitch.
即使我删除了所有Phonegap特定代码并在浏览器中打开剩余代码(尝试过Firefox和Chrome),也只会显示一个复选框,而不会显示翻转开关。 Or am I doing something else completely wrong?
或者我在做其他完全错误的事情?
I use the following code: 我使用以下代码:
<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>
If anyone could help me I would appreciate it very very much and thank you a thousand times. 如果有人能帮助我,我会非常感激,并感谢你一千次。
In this example I've commented out your index.css file and replaced the other JavaScript and CSS paths with the CDN snippet from https://jquerymobile.com/download/ - you should find this works correctly: 在这个例子中,我已经注释掉了你的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>
If this works, put your index.css file back in and test again. 如果这样可行,请将index.css文件重新放入并再次测试。 Add in your original paths one by one and test - be sure to check your browser console for errors.
逐个添加原始路径并进行测试 - 请务必检查浏览器控制台是否有错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.