0

jQueryMobile アプリに次のマークアップを使用します。

<body>
    <div id="someDiv">Foo</div>

    <div id="portrait" style="display:none">
        <div data-role="page" data-fullscreen="true">
            <!-- Portrait content goes here -->
            Hello user!
        </div>
    </div>

    <div id="landscape">
        <div data-role="page" data-fullscreen="true">
            <!-- Landscape content goes here -->
            Sorry, this app does not support landscape mode. Please rotate your device.
        </div>
    </div>
</body>

縦向きモードと横向きモード (アプリが実行されているスマートフォン デバイス) で異なるコンテンツを表示するために、対応する div のオンとオフを切り替えます。

if (deviceIsInLanscapeMode() == true){
    $("#landscape").css("display", "block");
    $("#portrait").css("display", "none");
}
else{
    $("#landscape").css("display", "none");
    $("#portrait").css("display", "block");
}

さて、それは私に2つの質問を導きます：

  1. これまでに読んだすべての jQueryMobile のサンプル コードで、ページ (=div とdata-role="page"セット) がタグの直接の子であることに気付きました。<body>上記の HTML マークアップでわかるように、ページをコンテナー div にラップしました。これはjQMアプリにとって「悪い考え」ですか?
  2. 最初の子 div (id="someDiv" を使用) は、時々有効または無効 (display:none) にするページのない単なる div です。これは jQueryMobile の問題でしょうか?
4

1 に答える 1

0

jQM の機能を十分に活用できなくなるため、これは悪い考えだと思います。(もはや jQM 標準に従ってコーディングすることすらありません。)

data-role="page" 属性を持つ複数の div は、複数ページのテンプレート構造用であると思われます。ここで、"...各 "ページ" ブロックには、相互に内部的にリンクするために使用される一意の ID (id="foo") が必要です"ページ」 (href="#foo")。リンクがクリックされると、フレームワークは ID を持つ内部「ページ」を探し、それをビューに遷移させます..." http://jquerymobile.com/demosを確認してください/1.2.0-alpha.1/docs/pages/page-anatomy.html . いつでも、$.mobile.activePage で識別される「ページ」の 1 つだけがアクティブです。

あなたの要件のために、次のように data-role="page" で 1 つの div のみを使用することをお勧めします。

<body> 
    <div data-role="page" data-fullscreen="true">
        <div data-role="content">
            <div class="portrait-content">
                Hello User!
            </div>
            <div class="landscape-content">
                Not Supported.
            </div>
        </div>
    </div>
</body>

CSS3 メディア クエリを次のように使用します。

<style type="text/css">

    @media screen and (orientation: landscape) {
        div.portrait-content {
            display: none;
        }
        div.landscape-content {
            display: block;
        }
    }
    @media screen and (orientation: portrait) {
        div.portrait-content {
            display: block;
        }
        div.landscape-content {
            display: none;
        }
    }
</style>
于 2012-08-16T14:32:53.587 に答える