18

私はすべての解像度にスケーリングする必要があるphonegapアプリを構築しているため、すべてをパーセンテージで定義しています。また、Jqueryでコンテンツとして定義したdivを持つ固定ヘッダーを使用しています。

私が抱えている問題は、ページ間の移行中に、移行中にページの高さが変化するため、「スタッター」が発生することです。私はこれが起こらないようにしようとしています。何かご意見は？

ポイントを実際に説明するために、以下のサンプルを作成しました。 http://jsfiddle.net/fz7qs/2/

<div id="pageContainer" style="position: relative !important; height: 100%;">
<div data-role="page" id="test1">

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

    <a id="page2link">To Page 2</a>

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

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

<div data-role="page" id="test2" style="height: 568px">

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

<a id="page1link">To Page 1</a>

<div data-role="content" style="height: 50%;">
    <p style="height: 80%; border: 1px solid black;">This is page 2</p>        
</div><!-- /content -->

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

4

2 に答える 2

13

jsFiddleページ全体は、Chromeデスクトップブラウザでの最初のアクセス時にジャンプするため、使用する前にjsFiddleRUNボタンを押して正しくロードします。

編集：コメントセクションの開発ごとにAnswerとjsFiddleが改訂されました。

編集2：jsFiddlesはjQuery Mobile1.2.0でjQuery1.7.2を使用して、Chromeブラウザのバグを修正するようになりました。

jsFiddleデモ

解決策は、HTMLセクションではなくCSSファイルでスタイルを設定することです。これは、 jQueryMobileUIにもスタイルシートを介した独自のスタイルテーマがあるためです。

また、extra closing divそのHTMLの下部にforページがあり、Webページを閉じていません。HTMLのheadセクションはjsFiddlesには必要ありません。これは、ページが設定されており、 [リソースの管理]ボタンHTML5を使用してファイル（モバイルjQuery）をjsFiddleにインポートするだけでよいためです。

質問に完全なパーセンテージ単位としてリストしましたが、例に示すようにピクセル単位を保持していますが、それらもパーセンテージにすることができます。

CSS設定：

a {
 cursor: hand;
 cursor: pointer;    
}

.content1 {
  height: 268px;
}

.text1 {
  height: 50%;
  border: 1px solid black;
}

.content2 {
  height: 568px;
}

.text2 {
  height: 80%;
  border: 1px solid black;
}

HTMLセクションでは、次footerを使用してページの下部にを固定しましたdata-position。

<div data-role="footer" data-position="fixed">

ページの下部にを固定するだけでなく、同じ値を持つページごとfooterにの設定を追加することで、アニメーション化しないようにすることもできます。data-id

<div data-role="footer" data-id="foo" data-position="fixed">

jsFiddleFOOTER。

編集2： Chromeで見られた最近の発見jQuery 1.8.2とjQuery Mobile 1.2.0バグ（非表示のスクロールバーは依然としてボディ要素をジャンプさせます）、これは改訂されたjsFiddleの例です：

jQuery1.7.2およびjQueryMobile1.2.0に基づくjsFiddleパーセンテージ

このバグについて：

jQuery1.8.2およびjQueryMobile1.2.0でjsFiddleを使用すると、そのjsFiddle内の関数の使用中にoverflowがに設定されている場合、意図したとおりに機能しないことがわかりました。hiddenscrollBars

その機能は、jQueryアニメーション中にブラウザーのスクロールバーを非表示にして、ページ変更のアニメーション期間中に要素が一時的にジャンプするのを防ぐことです。

ブラウザのスクロールバーは実際には非表示になっていますが、bodyセクションの要素は、スクロールバーがまだ存在するかのように「ジャンプ」し続けます。

これは、jsFiddlejQueryが1.7.2に設定されている場合は発生しません。

1つのページに複数の疑似ページを配置する方法に興味がある場合は、このjsFiddleで無関係なSO回答を確認してください。

于 2012-12-14T03:01:07.517 に答える