Question

所以我尝试使用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文件时，它可以使用固定的工具栏保持原位。我正在使用LG optimus V和Android 2.2.1，有什么建议吗？

Answer 1

我查看了jquery移动文档，发现我的html文件中遗漏了以下内容。在我加入之后，固定工具栏按预期工作：

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

phonegap jqm v1.1 rc1固定工具栏还没有在android上工作

1 个答案: