0

jQuery Mobileアプリケーションを作成しましたが、理解できない問題が1つあります。複数ページの機能を使用していますが、ページを表示しているときに画面の向きを変更すると、スタートページに戻ります。向きを変えたときに現在のページに留まる方法がわかりません。

私はこれを試しました：

$(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 = "orientation | screenSize |keyboardHidden"

お役に立てば幸いです。

于 2013-04-09T15:49:34.320 に答える