Jquery mobile 1.4.0 和 phonegap 3.3.0 无法正常工作
Posted
技术标签:
【中文标题】Jquery mobile 1.4.0 和 phonegap 3.3.0 无法正常工作【英文标题】：Jquery mobile 1.4.0 and phonegap 3.3.0 not working correctly 【发布时间】：2014-02-10 10:36:56 【问题描述】：我正在使用 phonegap 创建一个 SPA ios 应用程序，但在使用最新版本 (1.4.0) 的 Jquery mobile 时遇到了一些问题。这些页面不适合 iphone 的屏幕，但它们一个接一个地出现，我可以向下滚动查看我的所有页面！ （可能 data-role = "page" 工作不正常。任何人都可以对此有所了解。这是我的 html
<!DOCTYPE html>
<html>
<head>
<title>App Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1" />
<!--<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" href="css/jquery.mobile-1.4.0.css" />
<script src="phonegap.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/soapclient-1.2.js"></script> <!-- for soap v1.1 use js/soapclient.js -->
<script src="js/EmailComposer.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/jquery.ui.map.full.min.js"></script>
<script src="js/jquery.imageLens.js"></script>
<script src="js/jquery.alerts.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/touchable.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/date.js"></script>
<script src="js/moduleScripts/timetoport.js"></script>
<script src="js/moduleScripts/imageslogic.js"></script>
<script src="js/moduleScripts/loadingScript.js"></script>
<script src="js/moduleScripts/LoginController.js"></script>
<script src="js/moduleScripts/kmlMap.js"></script>
<script src="js/moduleScripts/tools.js"></script>
<script src="js/moduleScripts/dataService.js"></script>
<script src="js/jquery.mobile-1.4.0.js"></script>
<script>
$(document).ready(function()
InitializeLoginScreen();
CheckDisclaimer();
);
$("#discpage1").live("pageshow",function()
$("#agree").click(function()
localStorage.setItem('disclaimerAccepted', true);
tools.GoForward("#loginPage");
);
$("#disagree").click(function()
localStorage.setItem('disclaimerAccepted', false);
navigator.notification.alert('To ccontinue you must accept the Disclaimer', null, '', 'OK');
);
);
$(document).delegate(".scroll-disabled", "scrollstart", false);
</script>
</head>
<body id="boddy">
<!-- LOGIN PAGE -->
<div data-role="page" id="loginPage" class="scroll-disabled">
<div data-role="header" class="header" >
<div id="LoginHeader" class="headerText">Login</div>
</div>
<div data-role="content">
<div>
<img src="images/shiplogo.png" id="logobspt">
<label id="ship2Go">Ships to go</label>
</div>
<div id="loginContainer">
<div>
<label for="uid" id="uidLabel">Username</label>
<input type="text" value="test" name="uid" id="uid" placeholder="Enter username" />
</div>
<div id="loaderdiv" style="height:50px;width:100px;padding:5px;margin-left:87px;margin-top:-12px;display:none;">
<img src="images/loading3.gif" id="loadingimg" style="margin-left:30px;">
<div id="loadingMsg">
<center >Please wait...</center>
</div>
</div>
<div>
<label for="pwd" id="pwdLabel">Password</label>
<input type="password" value="test" name="pwd" id="pwd" placeholder="Enter password"/>
</div>
</div>
<div class="Button" id="loginButton">Login</div>
<div data-role="footer">
<div id="envLabel"></div>
</div>
</div>
</div>
<!-- DISCLAIMER PAGE -->
<div data-role="page" id="discpage1" class="scroll-disabled">
<!--<div id="dleftpanel"></div>
<div id="drightpanel"></div>-->
<div id="dcontent">
<div id="bplogo"></div>
<div id="shiplogo"></div>
<div id="discHeading">Disclaimer</div>
<div id="agree" class="Button discButton">I have read and I agree</div>
<div id="disagree" class="Button discButton">Disagree</div>
</div>
</div>
</body>
</html>
【问题讨论】：
这些是我的 config.xml 文件中的相关值：每当这种情况发生在我身上（我承认——它时常发生），jQuery Mobile 的 CSS 文件总是丢失，链接到错误的路径，或者我有错字（使用了“点”而不是“破折号”更常见）。
有可能吗？
一种快速的检查方法是在 Chrome（或其他）中打开您粘贴在上面的文件，然后查看调试控制台是否有任何与 CSS 文件有关的消息。
【讨论】：
以上是关于Jquery mobile 1.4.0 和 phonegap 3.3.0 无法正常工作的主要内容，如果未能解决你的问题，请参考以下文章
弹出窗口在 jquery mobile 1.4.0 中正常工作？
JQuery Mobile 1.4.0 - 从 Javascript 打开多页模板页面 [重复]
jquery mobile，结合jquery mobile“页面”和内部页面
jQuery Mobile中jQuery.mobile.changePage方法使用详解