1

レスポンシブデザインのJQueryMobileを使用してモバイルアプリケーションを作成しようとしています。

言い換えれば、スマートフォンでは、「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）を試しましたが、問題はページが置き換えられ、タブレットの1つのビューに2つのページが必要になることです。

よろしくお願いします。

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>

これで、Jquerymobileは最初のロード時に「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 に答える