5

HTML、CSS、JS を使用してチャット ウィンドウを作成しました。メッセージを下から上に配置したい。例: 最初のメッセージ div を一番下に、2 番目のメッセージ div を最初の上に、というように。出来ますか？

4

4 に答える 4

2

ここに画像の説明を入力

これがあなたの質問に対する回答ではないことは承知していますが、チャット ウィンドウでの実装を検討すべきより良いオプションです。

最新のコメントは一番下にある必要があります。これが、ほとんどの基本的なチャット ウィンドウのしくみです。

次に、css を使用してこれをすべて行うことができます。この ような設計では、テーブル行またはリスト要素のいずれかを使用する必要があるため です。明らかに、ajax を使用するには JavaScript を使用する必要があります。これにより、メッセージやプロファイル pic などのユーザー レコードを非同期に取得できます

CSS:

<style type="text/css">
table#chat_window {
}
tr#message_row {
}
td#profile_pic {
}
td#message {
}
</style>

HTML 構造:

<table id="chat_window">
  <tr id="message_row">
    <td id="profile_pic"></td>
    <td id="message"></td>
  </tr>
</table>

またはリストの使用:

<ul id="chat_window">
  <li id="message_row">
    <div id="profile_pic"></div>
    <div id="message"></div>
  </li>
</ul>

javascript:ajax を使用して値を取得し、子を追加する必要があります。

  1. テーブル ベースのチャット ウィンドウを使用している場合は、javascript を使用してテーブル ID をフェッチし、フェッチする<tr>値/メッセージごとに行要素を追加する必要があります。
  2. リスト ベースのチャット ウィンドウを使用している場合は、JavaScript を使用してリスト ID をフェッチし、フェッチする<li>値/メッセージごとにリスト要素を追加する必要があります。

時間がないので誤字脱字等ありましたら申し訳ありません。

于 2012-08-11T14:50:12.817 に答える
2

純粋な CSS ソリューションは想像できません。ただし、jQuery を使用して、プロジェクト用にこのライブラリが既にある場合は、次のように記述できます。

$(':button').click(function() {
   var message = $('input[type=text]').val();
    $('#chat').prepend('<div class="line">'+message);
});

デモ: http://jsfiddle.net/Vbd67/1/

**コメントに従ってtoを変更appendしましたprepend

于 2012-08-11T11:33:52.627 に答える
1

これは、次のようなjQueryを使用して実行できます。

var first = $('div > div:first-child');
first.appendTo(first.parent());

いくつかの要素を処理するには、次のようにします。

$('div > div').each(function() {
    $(this).prependTo(this.parentNode);
});

これが実際のライブデモです。

于 2012-08-11T12:29:55.077 に答える
0

と を組み合わせて使用​​する必要がdisplay:table-cellありvertical-align:bottomます。Sotiris のフィドルを使用し、その CSS を修正しました。

HTMLは

<div  style="display:table; height:200px;">
    <div style="display:table-row">
            <div id="chat" style="width:400px; border:1px solid black;display:table-cell; vertical-align:bottom">
            </div>
    </div>

</div>
<input type="text"><input type="button" value="post">
​

これが JavaScript コードです

$(':button').click(function() {
   var message = $('input[type=text]').val();
    $('#chat').append( $('<div/>').text(message) );
});
​

問題がある場合はお知らせください。

これがフィドルです

テーブルのレイアウトは常に疑わしいため、より良い解決策を探し続けましたが、それに関するcss-tricks の記事を見つけて、私と同じように動作するので、この解決策が正しいと思います。

追加 - 一番下のコードまでスクロールし続ける

新しいメッセージは一番下に来るので、一番下までスクロールし続ける必要があります。フィドルリンクを更新しました

于 2012-08-11T11:54:53.267 に答える