phonegap jqm v1.1 rc1 исправлена ​​панель инструментов не работает на Android до сих пор - PullRequest
Новая
       30

phonegap jqm v1.1 rc1 исправлена ​​панель инструментов не работает на Android до сих пор

0 голосов
/ 01 апреля 2012

Поэтому я попытался пересобрать свое приложение, используя 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>

Однако, когда я пытаюсь использовать тот же HTML-файл в Chrome, онработает с фиксированной панелью инструментов, оставаясь на месте.Я использую LG Optimus V с Android 2.2.1, какие-либо предложения?

1 Ответ

0 голосов
/ 02 апреля 2012

Я посмотрел на документы jquery для мобильных устройств и обнаружил, что в моем html-файле отсутствует следующее. после того, как я включил его, исправленные панели инструментов работали как ожидалось: 

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