JQuery Mobile 上两页合一的响应式设计答案

【问题标题】：Responsive design with two pages in one on JQuery MobileJQuery Mobile 上两页合一的响应式设计
【发布时间】：2013-03-25 15:49:08
【问题描述】：

我正在尝试使用响应式设计的 JQuery Mobile 创建一个移动应用程序。

换句话说，我希望在智能手机中将“page1.html”和“page2.html”加载到这样的单独页面中：

 _________              __________
|Page1    |             |Page2    |
|.html    |  on click   |.html    |
|         | <---------  |         |
|         |             |go to    |
|go to    | on click    |page1 btn|
|page2 btn| ----------> |         |
|_________|             |_________|

而且，在平板电脑中，我希望 page1.html 和 page2.html 像这样加载到同一个页面中：

-----------------------------
|Page1.html   | Page2.html   |
|                            |
|                            |
|                            |
|                            |
|                            |
|----------------------------

如何使用 JQueryMobile 做到这一点？我尝试了 $.mobile.loadpage(url) 和 $.mobile.changepage(url) 但问题是页面已被替换，我需要在平板电脑的单个视图中拥有两个页面。

感谢您的帮助。

【问题讨论】：

一个视图中不能有两个data-role=page。您需要在pageinit上使用媒体查询或检查屏幕大小

标签： jquery-mobile responsive-design

【解决方案1】：

就像@Omar 所说的，它很简单，首先使用这样的单页模板，'data-role=page' 表示每个页面。

<body>
 <div data-role="page" data-theme="d" id="pageOne">
 <---header---->
 <--- content --->
 <---footer---->
 </div>
 <div data-role="page" data-theme="d" id="pageTwo">
 <---header---->
 <--- content --->
 <---footer---->
 </div>

现在，Jquery mobile 将在首次加载时自动显示“pageOne”并隐藏“pageTwo”，导航到“pagetwo”时将隐藏“pageOne”。

之后你可以写一个类似这样的css媒体查询：

@media all and (min-width: 450px) {
   #pageOne{
    display:block;
    float: left;
    width:50%;
    postion:relative;
    }
   #pagetwo{
    display:inline-block;
    float:right;
    width:50%;
    padding-left: 2em;
    postion:relative;
    }
}

因此，如果任何宽度大于上述宽度（450 像素），则两个页面将并排显示。希望这可以帮助。这是我制作的一个简单的工作示例。

http://jsfiddle.net/uwZpM/

【讨论】：

感谢您的回答。事实上，使用 css 媒体查询，两个页面显示在设备 450px 宽度。但是，这两个页面是分层的。我不知道如何在另一个下方或并排显示一个。使用浮动：左；对于 pageOne 和浮动：对；对于第二页适用于“经典”div，但是当 div 具有“data-role="page" 时，它不起作用。
嘿，请尝试将页面宽度设置为 50% 并显示：inline-block.. 已在我的回答中进行了这些更改。
警告：如果通过 ajax 加载，框架只会加载多页文档的第一页。所以我认为您需要使用data-ajax=false 从您网站的其他地方访问此页面（尚未尝试过，这只是基于我的理解）