7

Jquery Mobile と Phonegap を使用してアプリを開発しています。私が抱えている問題は、ページ遷移を行うと、着信ページが最初に正しく表示されず (DOM 要素が正しい位置にも正しいサイズにもない)、次に遷移が完了すると、要素のサイズが変更されて正しい位置に移動することです。 . (また、移動するページも、移動する前に正しく表示されません)。フェードとスライド トランジションの両方を使用してこれをテストしました (最終的にはスライド トランジションが必要です)。

問題を示す jsFiddle は次のとおりです:
http://jsfiddle.net/fz7qs/2/

また、ページ コンテナーとして div を使用しているため、ページ全体が一度に遷移するのではなく、ページ コンテナー div のみが遷移します。

アプリがさまざまなデバイス サイズに合わせてスケーリングされるように、ほとんどすべて (高さ、幅、余白など) に CSS パーセンテージを使用しています。さらに、いくつかの要素を中央に配置するために JavaScript を使用しています (pageshow イベントで発生)。これらのパーセンテージが問題の一部だと思います。デスクトップ ブラウザー (phonegap を取り出す) で簡単なテストを作成し、ページ コンテナーに固定の高さを設定しました。これで問題が解決したように見えましたが、電話で試してみたところ、問題はまだ残っていました。

アプリの各ページは、$.mobile.loadPage() を使用して DOM にプリロードされます。それらをプリロードすると、高さのパーセンテージは親 (ページ コンテナーの div) に対して相対的になり、トランジションは正しく見えるはずです。

Jquery Mobile をさらに調べたところ、移行中にページの高さが空の文字列に設定されていたことがわかりました。パーセンテージの高さで機能するかどうかをテストするために、この行をコメントアウトしようとしました。繰り返しますが、デスクトップ テストでは機能しましたが、電話では機能しませんでした。

Samsung Galaxy Nexus で Android phonegap (API レベル 8 - Android 2.2) を使用してテストしています。

パーセンテージベースの値を維持しながら、ページが遷移する前にcssとjavascriptの配置を適用する方法はありますか?

index.html

<body>
    <!-- header on every page -->
    <div id="mainHeader">This is a header</div>

    <!-- page content -->
    <div id="pageContainer">
        <div data-role="page"></div>
    </div>
</body>

page1.html

<body> 
    <div data-role="page" id="page1">
        <div class="subheader">
            <div class="backButton"></div>
            <div class="subheaderText">Settings</div>
            <div class="helpButton"></div>
        </div>
    </div>
</body>

関連CSS

#pageContainer {
    overflow: hidden;
    width: 100%;
    height: 86.772486772486772486772486772487%;
}

.ui-mobile [data-role="page"] {
    min-height: 0px !important;
    color: white;
    position: relative;
    width: 100%;
    height: 100%;
    background: #868a73;
}

.subheader {
    width: 100%;
    height: 10.16260162601626016260162601626%;
    background-color: #000;
    display: inline-block;
    text-align: center;
    position: relative;
}

.backButton {
    background: url("images/back_button.png");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    float: left;
    width: 8.888888888888888888888888888889%;
    height: 52%;
    margin-left: 5.555555555555555555555555555556%;
}

.subheaderText {
    color: #FFF;
    font-size: 2.45em;
    font-weight: bold;
    display: inline-block;
}

.helpButton {
    float: right;
    background: url("images/help_button.png");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 8.888888888888888888888888888889%;
    height: 64%;
    right: 5.555555555555555555555555555556%;
}
4

1 に答える 1

1

まず、HTML を jquery モバイル チュートリアル ページのように見せることができます。次のようなhtml構造が必要です。

<div data-role="page">

    <div data-role="header">
        <h1>Page Title</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Page content goes here.</p>  
    </div><!-- /content -->

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->

jquery mobile page anatomyを見てください。

于 2013-01-17T19:53:29.940 に答える