HTML, CSS dan jQuery: Bina antara muka sembang yang cantik

HTML, CSS dan jQuery: Bina antara muka sembang yang cantik

Pengenalan:
Antara muka sembang yang cantik dan berfungsi sepenuhnya memikul sebahagian besar tanggungjawab di sebalik populariti rangkaian sosial dan aplikasi pemesejan moden. Artikel ini akan berkongsi cara menggunakan HTML, CSS dan jQuery untuk membina antara muka sembang yang cantik, dan melampirkan contoh kod khusus untuk rujukan.

1. Struktur HTML:
Pertama, kita perlu mencipta struktur HTML asas, termasuk bekas tetingkap sembang, kotak mesej sembang, kotak input sembang dan butang hantar.

<div class="chat-container">
  <div class="chat-box">
    <div class="chat-message">用户消息</div>
    <div class="chat-message">系统消息</div>
    ...
  </div>
  <div class="chat-input">
    <input type="text" placeholder="输入消息..." />
    <button class="send-button">发送</button>
  </div>
</div>

2. Gaya CSS:
Seterusnya, kita perlu menggunakan gaya CSS untuk menyediakan rupa dan susun atur antara muka sembang.

.chat-container {
  width: 100%;
}

.chat-box {
  height: 300px;
  overflow-y: scroll;
  background-color: #f5f5f5;
  padding: 10px;
}

.chat-message {
  margin-bottom: 10px;
  padding: 5px;
  border-radius: 5px;
  background-color: #ffffff;
}

.chat-input {
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.chat-input input {
  flex-grow: 1;
  padding: 5px;
  border: none;
  border-radius: 5px;
}

.chat-input button {
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  background-color: #00bfff;
  color: #ffffff;
  font-weight: bold;
}

3. Fungsi jQuery:
Akhir sekali, kami menggunakan jQuery untuk menambah fungsi interaktif dan dinamik pada antara muka sembang.

$(document).ready(function(){
  // 发送按钮点击事件
  $('.send-button').click(function(){
    var message = $('.chat-input input').val();
    if(message != ''){
      $('.chat-box').append('<div class="chat-message">用户消息</div>');
      $('.chat-input input').val('');
      $('.chat-box').scrollTop($('.chat-box')[0].scrollHeight);
    }
  });
  
  // 回车键发送消息
  $('.chat-input input').keypress(function(event){
    if(event.which == 13){
      $('.send-button').click();
    }
  });
});

Penjelasan kod:

• Apabila butang hantar diklik, dapatkan kandungan mesej dalam kotak input dan tambahkannya pada kotak sembang sebagai mesej pengguna.
• Kosongkan kotak input dan tatal kotak sembang ke bahagian bawah untuk melihat mesej terkini.
• Apabila kekunci Enter ditekan dalam kotak input, peristiwa klik butang hantar tercetus.

Kesimpulan:
Melalui gabungan HTML, CSS dan jQuery, kami berjaya membina antara muka sembang yang cantik dan interaktif. Anda boleh menyesuaikan dan memperbaikinya mengikut keperluan anda, seperti menambah lebih banyak gaya, emoji, muat naik fail, dsb. Mudah-mudahan contoh kod mudah ini boleh memberi anda sedikit bantuan untuk membina antara muka sembang yang hebat.

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Bina antara muka sembang yang cantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!