1

Cordova、MVC 構造用のバックボーン、および UI 用の jQuery Mobile を使用してモバイル アプリを構築しています。

これは、新しいページをロードするときのユーザー エクスペリエンスを除けば、うまく機能します。実際には新しいページが動的に作成され、準備が整うと、jquery mobile がこのページへのページ遷移を処理します。モバイル ブラウザーでは、従来のブラウザーよりもこの遷移が遅くなるため、ユーザーがページを読み込んでいる間、空白の画面が表示されてから、新しいページが表示されます。

問題は、ヘッダー/フッター バーに関するものです。コンテンツの読み込み中も表示し続けたいので、移行中はヘッダー/フッターと空白/白いコンテンツのみがユーザーに表示されます。

したがって、これは古典的なページ構造です。

<div data-role="page">
    <div data-role="header"></div>
    <div data-role="content"></div>
    <div data-role="footer"></div>
</div>

私にとって最も簡単な方法は次のとおりです。

<div data-role="header"></div>
<div data-role="page">
    <div data-role="content"></div>
</div>
<div data-role="footer"></div>

CSS の配置でコンテンツを修正します。

しかし、私はもっと賢いものを見つけたいと思っています。

<div data-role="content">バックボーンがルートごとに更新するだけで、単一の JQM ページを持つことについてどう思いますか? JQM レンダリングはどうですか? そして、トランジションはどうですか？

4

1 に答える 1

0

ドキュメント: http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-d.html

基本的に、次のdata-role="footer"ように各ページに要素を配置します。

<div data-role="footer" data-id="foo-footer" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a href="a.html">Friends</a></li>
            <li><a href="b.html">Albums</a></li>
            <li><a href="c.html">Emails</a></li>
            <li><a href="d.html" >Info</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

に注意してください。永続的なツールバー オプションを利用するには、data-idすべての要素で同じである必要があります。data-role="footer"要素には属性data-role="footer"も必要です。data-position="fixed"

ここにデモがあります: http://jsfiddle.net/SpRAA/

于 2012-04-24T02:36:01.303 に答える