Question

我正在尝试使用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），但问题是页面已被替换，我需要在平板电脑的单个视图中有两个页面。

感谢您的帮助。

Answer 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;
    }
}

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

http://jsfiddle.net/uwZpM/

响应式设计，在JQuery Mobile上有两个页面

1 个答案: