Jquery mobile JQuery Mobile上两页合一的响应式设计_Jquery Mobile_Responsive Design

Jquery mobile JQuery Mobile上两页合一的响应式设计

jquery-mobile responsive-design

Jquery mobile JQuery Mobile上两页合一的响应式设计,jquery-mobile,responsive-design,Jquery Mobile,Responsive Design,我正在尝试用JQuery mobile创建一个响应性设计的移动应用程序换句话说，我想在智能手机中，将“page1.html”和“page2.html”加载到单独的页面中，如下所示： _________ __________ |Page1 | |Page2 | |.html | on click |.html | | | <--------- | | | |

我正在尝试用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   |
|                            |
|                            |
|                            |
|                            |
|                            |
|----------------------------

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

感谢per advance提供的帮助。

很简单，就像@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>

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

很简单，就像@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>

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

一个视图中不能有两个

数据角色=page

。您需要使用媒体查询或检查

pageinit

上的屏幕大小。一个视图中不能有两个

data role=page

。您需要使用媒体查询或检查

pageinit

上的屏幕大小，谢谢您的回答。事实上，使用css媒体查询，两个页面以小于450px的设备宽度显示，一个页面以大于450px的设备宽度显示页面。但是，这两个页面是分层的。我不知道如何显示一个低于另一个，或并排。使用float：左；对于pageOne和float：右；对于第二页，在“经典”div上工作，但是当div有“data role=”页时“，它不起作用。嘿，请尝试将页面宽度设置为50%，并显示：inline block。。警告：如果通过ajax加载，框架将只加载多页文档的第一页。因此，我认为您需要使用

数据ajax=false

从站点的其他位置访问此页面（尚未尝试过，这只是基于我的理解），谢谢您的回答。事实上，使用css媒体查询，两个页面以小于450px的设备宽度显示，一个页面以大于450px的设备宽度显示页面。但是，这两个页面是分层的。我不知道如何显示一个低于另一个，或并排。使用float：左；对于pageOne和float：右；对于第二页，在“经典”div上工作，但是当div有“data role=”页时“，它不起作用。嘿，请尝试将页面宽度设置为50%，并显示：inline block。。警告：如果通过ajax加载，框架将只加载多页文档的第一页。因此，我认为您需要使用

数据ajax=false

从站点中的其他位置访问此页面（尚未尝试过，这只是基于我的理解）