【发布时间】:2012-04-01 19:56:05
【问题描述】:
所以我尝试使用 jquery mobile v1.1 rc1 重建我的应用程序,因为他们声称固定工具栏现在适用于 android v2.2。我也在使用 phonegap 1.5 和 jquery 1.7.1。即使包含文件说它的版本较低,我也复制/粘贴了最新版本..以避免更改文件的名称。但是,固定的工具栏仍然不起作用,它们会随着其余内容滚动。我尝试了多种方法,包括在页面上使用 data-fullscreen="true" 没有成功,我在下面包含了我的 html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).bind("mobileinit", function() {
$.mobile.defaultPageTransition = "fade";
$.mobile.defaultDialogTransition = "fade";
});
</script>
<script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<!-- This reference to phonegap.js will allow for code hints as long as the current site has been configured as a mobile application.
To configure the site as a mobile application, go to Site -> Mobile Applications -> Configure Application Framework... -->
<script src="phonegap.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
</head>
<body onLoad="bodyinit()">
<div data-role="page" id="home" data-fullscreen="true">
<div data-role="header" data-theme="b" data-position="fixed" class="ui-bar-b">
<h1 id="headerid" style="font-size:large;">JenPad v1.toce</h1>
<!-- <span style="float:left;margin-left:5px;margin-bottom:5px;"> <a href="#pagecreate" data-role="button" data-icon="add" data-iconpos="left">Note</a></span> <span style="float:right;margin-right:5px;">
<!--<button data-icon="refresh" onClick="getAllItems()" data-iconpos="right">Refresh</button>-->
<!--<span data-role="controlgroup" data-type="horizontal">
<button data-icon="refresh" data-iconpos="left" onClick="getAllItems()">Refresh</button>
<a data-role="button" data-icon="delete" href="#clearpage" data-rel="dialog" data-transition="pop" data-iconpos="right">Clear</a>
</span>
</span>
-->
<div data-role="controlgroup" style="text-align:center;" data-type="horizontal">
<a data-role="button" data-icon="plus" data-iconpos="left" href="#pagecreate">Note</a>
<button data-icon="refresh" data-iconpos="left" onClick="getAllItems()">Refresh</button>
<a data-role="button" data-icon="delete" href="#clearpage" data-rel="dialog" data-transition="none" data-iconpos="left">Clear</a>
<button data-icon="info" data-iconpos="left" onClick="about()">About</button>
</div>
</div>
<div data-role="content">
<div id="theLog"></div>
<br>
<p style="text-align:center;">Simply create a new "note" as a reminder for something worth remembering. Use the "Refresh" button to be sure you have the newest list of things to remember. Have Fun! </p>
</div>
</div>
</div>
<div data-role="page" id="pagecreate" data-fullscreen="true">
<div data-role="header" data-theme="b" data-position="fixed">
<h1 id="headerid" style="font-size:large;">Create Note</h1>
<span style="float:left;margin-left:5px;margin-bottom:5px;>"<a href="#home" data-role="button" data-icon="back" data-iconpos="left">Back</a></span>
</div>
<div data-role="content">
<br>
<textarea id="inputtext" rows="3" placeholder="Enter msg here.."></textarea><br>
<div data-role="controlgroup">
<button onClick="createItem()">Submit</button>
<button type="reset" onClick="resetbtn()">Reset</button>
</div>
</div>
</div>
<div data-role="page" data-theme="e" style="overflow:hidden;" id="clearpage">
<div data-role="content"><h1 style="text-align:center;">Clear all notes?</h1>
<br>
<br>
<div data-role="controlgroup" style="text-align:center;margin:auto 0;" data-type="horizontal">
<button data-icon="check" data-iconpos="left" onClick="confirmclear()">Confirm</button>
<button data-icon="back" data-iconpos="right" onClick="cancelclear()">Cancel</button>
</div>
</div>
</div>
</body>
</html>
但是,当我在 chrome 中尝试相同的 html 文件时,它可以与固定工具栏保持原样。我正在使用带有 Android 2.2.1 的 LG Optimus V,有什么建议吗?
【问题讨论】:
-
我有同样的手机,我向你保证它们的工作原理和宣传的一样。您的问题一定出在其他问题上。
标签: jquery jquery-mobile cordova android-2.2-froyo