在jQuery Mobile中改變橫向和縱向視圖

Question

我正在研究JQuery Mobile應用程序。根據設備是否處於橫向或縱向視圖，我的應用將具有相同數據的不同視圖。目前，我正在使用以下代碼檢測該更改：

$(window).bind("orientationchange", function (e, ui) { 
    alert("orientation changed: " + e.orientation); 
}); 

從這裏，我不確定要去哪裏。我想改變看法。但是，我不想重新加載視圖，因爲我希望它儘可能快。如何根據方向顯示不同的視圖？那個HTML看起來像什麼？我知道單個視圖是這樣定義的：

<div id="myPage" data-role="page"> 
    <div data-role="header"> 
    <a href="#" data-icon="arrow-l" data-iconpos="notext" class="ui-btn-left jqm-home">Back</a> 
    <h1>My App</h1> 
    </div> 

    <div data-role="content"> 
    <!-- Page content goes here --> 
    </div> 
</div> 

謝謝你的幫忙。

Answer 1

創建一個多頁面佈局，其中一個頁面具有縱向視圖，另一個具有橫向視圖，然後致電$.changePage()在orientationChange事件之間切換它們。