1

これは、例として使用する Web サイトです: http://templatic.com/demos/geoplaces4/

ユーザーが都市を選択すると、ブラウザを実際に更新せずに、jQuery が既存のページをフェードアウトして次のページにロードすることは可能ですか? これは、Facebook の新しいレスポンシブ リンクの仕組みに似ていると思います。

どこから始めればいいのかわからないだけで、情報が見つからないようなので、リンク/リソース/ヒントは大歓迎です。

4

2 に答える 2

2

ドキュメント全体をその場で置き換えることはできません。また、それはあまり意味がありません。ドキュメント全体を交換する場合、ページをリロードするか、新しいページをロードするのと同じです。

ただし、最上位のドキュメント要素 (本文) を置き換えてから、ドキュメントのヘッダーを変更して、一般的に同じ動作をシミュレートすることはできますが、更新されるものを手動で管理する必要があります (つまり、スクリプトやロードされた CSS を管理するなど)。 )

「ページ」スワッピングを行う典型的なアプリは、単一のページ フレームを使用してから、ドキュメントの主要部分をスワップ インまたはスワップ アウトする傾向があります。ヘッダーは同じままで、主要なヘッダーのみが操作されます。これがシングル ページ アプリケーション (SPA) の基本概念です。

于 2012-12-13T06:44:52.353 に答える
1

ドキュメントは既に大まかに 2 つのパーティションに分割されており、都市ピッカーとマップ表示ページの間で比較的固定されています。したがって、両方の新しいコンテンツで個別に AJAX を使用できます。ドキュメント全体を置き換える必要があるのはなぜですか? そのアプローチが与えられたフレームワークと一致させるのが最も簡単であることは理解していますが、それが Facebook が行っていることではないことを保証します。

このタイプの単一ページ アプリの背後にあるアプローチは、次のようになります。

HTML

<body><!-- with a solid background color -->
    <div id="main-content">
        <header>
        </header>
        <div id="city-picker">
             <!-- city picker stuff here -->
        </div>
    </div>
 </body>

Javascript

// inside On click/on select handler for your city picker
// Animate the fade-out of your first page
$('#main-content').hide(2000).html('')
    .load('ajax/city-map.php?theCity='+selectedValue).show(2000);

<body>基本的にはそれだけです -タグの無地の背景だけが表示される場所で 2 秒間フェードアウトし.load、新しいドキュメントの html をmain-contentdiv にフェッチするために使用し、2 秒間フェードインします。

その種のものは、明らかに不可能な瞬間的な AJAX リクエストに依存しています。正しいことは、.load complete 関数のコールバックからフェードインすることです。コールバックの使用の詳細については、.load のドキュメントを確認してください。さらに進んで、フェードアウトを開始する前に ajax を開始することもできます。そのため、ユーザーがコンテンツのフェードを見ている間にリクエストが行われます。しかし、それはあなたが始めるのに十分なはずです.

注意すべきもう 1 つのこと.loadは、基本的に を呼び出すことです$('#main-content').html(data)。ここで、 data は、AJAX が要求した URL によって返される応答全体です。そのため、不適切であり、doctype 、 、 タグを含む完全にフォーマットされた html ドキュメントを返すと、ユーザー エクスペリエンスが損なわれる可能性があります。

于 2012-12-13T07:04:19.800 に答える