0

我已经构建了一个 jQuery Mobile 应用程序，但有一个问题我不明白。我正在使用多页功能，但是当您在一个页面中并更改屏幕方向时，它会跳回起始页。我不明白如何在更改方向时停留在当前页面上。

我试过这个：

$(window).bind("orientationchange", function (e, ui) 
{ 
    var sPage ="#"+$.mobile.activePage.attr("id"); 
    $.mobile.changePage(sPage); 
    alert(sPage);
});

alert() 显示了我想停留的正确页面。

下面是一个如何制作多页的示例。如果我选择“Instellingen”选项，则会显示此页面。但是当我改变智能手机的方向时，它会跳回菜单。

<!DOCTYPE html> 
<html>
<head> 
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Mobile</title>
<link rel="stylesheet"  href="../css/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet"  href="../css/jquery.dataTables.css" />
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="../js/DataBase.js"></script>
<script type="text/javascript" src="../js/Webservice.js"></script>
<script type="text/javascript" src="../js/Misc.js"></script>
</head> 

<body>
<div id="Menu" data-role="page" data-title="Hoofdmenu">
  <div data-role="header">
    <h1>Menu</h1>
  </div>
  <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
        <li data-role="list-divider">Hoofd Menu</li>
                <li><a href="#Instellingen"><h3>Instellingen</h3>
<p>Algemene programma instellingen</p></a></li>
</ul>
</div>

<div id="Instellingen" data-role="page" data-title="Instellingen">
  <div data-role="header">
    <h1>Programma instellingen</h1>
     <a data-role="button" data-direction="reverse" data-rel="back" href="#Menu" data-icon="arrow-l" data-iconpos="left" data-theme="b">
        Back</a></div>
   <div data-role="content"  data-theme="b">
  <ul data-role="listview" data-inset="true" >
      <li><div><h1>WCF adres<input id="Adress" type="url"/></h1> </div> 
      <div data-role="controlgroup" data-type="horizontal">
        <a id="Test" data-role="button">Test</a>
        <a id="Opslaan" data-role="button">Opslaan</a>
                </div></li>
  </ul>


<script type="text/javascript">
$(document).ready(function () {
    $("#Test").click(function () {
        if ($("#Adress").val().length > 0)
            CheckWebService($("#Adress").val(), function (Check) { alert(Check); })
        else
            alert("Geen adres of error")
    });
    $("#Opslaan").click(function () { saveURL($("#Adress").val()); });
    $("#Dummy").click(function () { alert("dummy"); });
    $("#ResetDatabase").click(function () { $.mobile.showPageLoadingMsg("b", "Sync");  ResetDatabase(); });

});

</script>

</body>
</html>
4

1 回答 1

1

几个月来我遇到了完全相同的问题，直到今天我将 screenSize 参数添加到 android 清单中，如下所示：

android:configChanges="方向|screenSize|keyboardHidden"

希望有帮助！

于 2013-04-09T15:49:34.320 回答