在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以在它们之间切换。