0

phonegapを使用してiosおよびandroid用のアプリを開発しました。これは辞書アプリであり、結果を複数のタブに表示します (タブは div であり、すべての div は異なるコンテンツを表示します)。常に 1 つの div のみが表示されるように、独自のコードを使用します。他のdivに切り替えるときにアニメーション/トランジションを適用できるように、jquerymobileを含めたいと思います。

したがって、各 div に data-role="page" を追加します。これはすぐに機能すると想定しています (以下のサンプル コードのように)。しかし、何かが正しくありません。

    <!DOCTYPE html> 
    <html> 
        <head> 
        <title>Page Title</title> 

        <meta name="viewport" content="width=device-width, initial-scale=1"> 

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head> 
    <body> 
    <table id="headergroup">
    <tr><td>
       <input>.........
       <img>.......
    </table>
<wrapper>
    <div data-role="page" id="tab1">
        <div data-role="header">
            <h1>Page Title</h1>
        </div>
        <div data-role="content">   
            <p>Page1 content goes here.</p>     
        </div>
        <div data-role="footer">
            <h4>Page Footer</h4>
        </div>
    </div>
    .........other div......
    <div data-role="page" id="tabN">
        <div data-role="header">
            <h1>Page Title</h1>
        </div>
        <div data-role="content">   
            <p>PageN content goes here.</p>     
        </div>
        <div data-role="footer">
            <h4>Page Footer</h4>
        </div>
    </div>
    </wrapper>
    <div id="footer>
     <img .......>
    </div>
    </body>
    </html>

おそらく、私のアプリはラッパーのみにdivを表示する必要があります。しかし、問題は、私のアプリが data-role=page を含む div を全画面表示し、他の要素の上に表示することです (私のアプリのヘッダーとフッターは表示されませんでした)。

私の実装は正しいですか？この問題を解決するにはどうすればよいですか? ありがとう。

4

1 に答える 1

0

最初のページではこれでうまくいくかもしれませんが、JQM-Ajax (デフォルト) を介してロードしている他のすべてのページでは、最初の (!) div-data-role="page" から読み込んでいるページ。他のすべて (テーブル、2 番目、3 番目のページ div は、ページ div の外側にあるため、読み込まれません。

JQM のドキュメント on page anatomy and linking pagesを参照してください。

JQM はページ div に基づいているため、コード内でもページ div はフルスクリーン サイズに設定され、他のすべての上にホバリングすることで、ほとんどの「JQM 注目」を得ることができます。

JQMを使用するには、次のいずれかを使用します

単一ページレイアウト = ページごとの
複数ページ レイアウト = 1 つのドキュメントに含まれる複数のページ。

最終的にすべてを単一のファイルにバンドルすると思うPhonegapを使用しているので、マルチページの方が良いかもしれません。最初のページから複数の「ネストされたページ」を含むドキュメントをロードする必要がある場合は、サブページウィジェットまたはmultiviewもあります。

于 2012-05-30T06:53:40.197 に答える