6

私は jquery mobile を使用しており、id を参照するだけで穴ページを別のページに置き換えることができる複数ページのコンセプトが気に入っています。

現在、私のアプリには（もちろん）ナビゲーションバーがあり、ナビゲーションバーのリンクをクリックすると、ページ全体が左にスワイプされ（ナビゲーションバーを含む）、他のページが右から来るのが嫌いです。

コンテンツ div を置き換えたいだけです。常に更新せずに、ナビゲーション バーを下部に固定する必要があります。分かりますか？コンテンツ div id を参照するだけでは、ページ id を参照するように機能しません。

私はあなたが私が何を意味するか知っていることを願っています. どうすればこれを処理できますか？

4

4 に答える 4

3

これを行う1つの方法は、リンクのイベントをオーバーライドしclick、div（ターゲット）のコンテンツを新しいコンテンツに置き換えることです。jQueryでこれを行うのは簡単です。

 $('#replacement-target').html( $('#source-content').html() );

jQueryと一緒にプレイするにrefreshは、コンテンツを呼び出して、フレームワークによって適切にスタイル設定されていることを確認する必要がある場合があります。

例については、このjsFiddleを参照してください。

于 2012-04-15T02:32:37.573 に答える
1 
$('#replacement-target-page-id div[data-role="content"]').replaceWith(
    function(return$('#source-content-page-id div[data-role="content"]').contents();)
于 2012-05-18T06:20:34.213 に答える
0

別の解決策は、トランジション効果をオフにすることです $.mobile.defaultPageTransition = 'none';

固定フッターを使用します。http://jquerymobile.com/test/docs/toolbars/bars-fixed.html

ライアンの提案も機能します。クリック イベントをオーバーライドし、jqm ナビゲーション モデルをバイパスすることにした場合、非常に便利な jqm ページ イベントへのアクセスが制限されることに注意してください。実際には、アプリのニーズが何であるかによって異なります。

于 2012-04-15T03:07:53.537 に答える
0

私にとってうまくいったのは、外部ヘッダーを使用してヘッダー/ナビゲーションバーをページから離すことです。このようにして、jquery ページ遷移を引き続き使用し、navbar を静的に保つことができます。

外部ツールバーはここに文書化されています - http://demos.jquerymobile.com/1.4.4/toolbar-external/

ページ DOM から除外するために、navbar とその他のコンポーネントを初期化する必要がありました。この場合はメニュー パネルです。jqm ドキュメントによると、コードは次のようになります。

<div data-role="header" data-position="fixed"></div>
<div data-role="footer" data-position="fixed"></div>
<div data-role="panel" data-position-fixed="true" data-display="overlay" id="menu-panel"></div>
<div data-role="page" id="home">
    <div role="main" class="ui-content"></div>
</div>

<script>
$(function(){
    $( "[data-role='header'], [data-role='footer']" ).toolbar();
    $( "[data-role='panel']" ).panel();
});
</script>
于 2014-12-13T00:34:25.977 に答える