jquery - Gmailタイプの会話ビューの作り方

Question

• Gmailの会話のようにメッセージ一覧を見たい。
• 外観はアコーディオンのようで、
• 複数のメッセージをクリックして表示できます。

• 5 つ以上のメッセージがある場合、ビューは「古いメッセージ」のように折りたたまれます。

• jQueryを介してこれがどのように可能であるか、または他のものがこれに適しています。先に進むためのヒント/ヘルプをください

Answer 1

これは確かに jQuery を介して可能です。ただし、この機能を実装するにはいくつかの方法があり、いくつかは他の方法よりも簡単です。

最初のオプションは、ページの読み込み時にすべてのメッセージを単純に読み込み、最後のメッセージ以外をすべて非表示にすることです。その後、jQuery を使用して、クリックしたときにそれを表示できます。ただし、初期ロード時間が遅くなるため、これは非常に非効率的です。ここにあるアコーディオン(クレジット) は、参考にするのに適した出発点です。jQueryコードは次のとおりです。

(function($) {

  var allPanels = $('.accordion > dd').hide();

  $('.accordion > dt > a').click(function() {
    allPanels.slideUp();
    $(this).parent().next().slideDown();
    return false;
  });

})(jQuery);

以前のメッセージの基本データ (日付、送信者、件名) をロードし、ユーザーがメッセージをクリックしたときに AJAX を使用してコンテンツ全体を取得することをお勧めします。必要なときにのみデータを要求するため、これははるかに優れたアプローチです。API Docsで、jQuery 内での AJAX の使用について詳しく読むことができます。

これにより、作業の開始点が得られるはずです。ただし、SO はドライブスルー コード ジェネレーターではないことに注意してください。プログラミングの問題に関連する特定の質問をするためのものです。上記の情報を使用して、いくつかの調査を行い、まとめてみてください。問題が発生した場合は、ここで質問してください。コードと、問題と望ましい結果の非常に適切な説明を含めるようにしてください。