自适应设计与jQuery Mobile的一两页

我试图创建一个jQuery Mobile的是响应式设计的移动应用程序。自适应设计与jQuery Mobile的一两页

换句话说，我想，在智能手机，说：“page1.html”和“page2.html”在separed页面加载这样的：

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

而且，在平板电脑，我想这第1页.html和page2.html像这样加载在同一页：

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

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

感谢您的帮助。

来源

2013-03-25 Sébastien BATEZAT

你不能有两个'数据角色= page'在一个视图中。您需要使用媒体查询或检查'pageinit'的屏幕尺寸。 – Omar 2013-03-25 21:35:18

足够其简单，像@Omar说，首先使用这样的单页模板，“数据角色=页面”表示每个页面。现在

<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的会自动显示在第一负载和隐藏“pageTwo”和导航到“pagetwo”会隐藏“PAGEONE” 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/

来源

2013-03-26 08:16:58

感谢您的回答。事实上，通过CSS媒体查询，两个页面显示在<450px宽度的设备中，一个页面显示设备> 450px宽度的页面。但是，这两个页面是分层的。我不知道如何显示一个在另一个之下，或者并排显示。使用float：left;对于pageOne和float：right;在页面两部作品的“经典”的div但是当div有一个“数据角色=”页面”，它不工作 – 2013-03-26 09:01:35

哎，请尝试制作网页的50％和显示器的宽度：inline-block的..在我的回答让这些变化 – 2013-03-26 09:18:16

还补充现在的位置是：相对的;在这两个，这应该工作 – 2013-03-26 09:28:40

自适应设计与jQuery Mobile的一两页

回答

相关问题