1

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

感谢您的帮助。

4

1 回答 1

4

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

于 2013-03-26T08:16:58.253 回答