【问题标题】:phonegap jqm v1.1 rc1 fixed toolbars not working on android stillphonegap jqm v1.1 rc1 固定工具栏在 android 上仍然不起作用
【发布时间】: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


【解决方案1】:

我查看了 jquery 移动文档,发现我的 html 文件中缺少以下内容。在我包含它之后,固定的工具栏按预期工作:

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-08-25
    • 2016-03-26
    • 2014-12-25
    • 2016-05-17
    • 2015-09-07
    • 1970-01-01
    相关资源
    最近更新 更多