2012-04-01 272 views
0

所以我试着用jquery mobile v1.1 rc1重建我的应用程序,因为他们声称固定工具栏现在适用于android v2.2。我也使用phonegap 1.5和jquery 1.7.1。即使包含文件说它的较低版本,我也复制/粘贴了最新的版本..以避免更改文件的名称。但是,固定工具栏仍然不起作用,并且会随其余内容一起滚动。我已经试过许多东西,包括使用数据全屏上没有成功的网页=“true”时,我已经包含下面我的html:phonegap jqm v1.1 rc1固定工具栏不能在android上工作

<!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,有什么建议吗?

+0

我有同样的电话,我向你保证他们工作的广告。你的问题必须与别的东西。 – codaniel 2012-04-02 01:22:19

回答

0

我看着jQuery的移动文档,发现我有我的HTML文件中缺少以下内容。我包括它后,固定工具栏按预期工作:

<meta name="viewport" content="width=device-width, initial-scale=1">