HTML, CSS, and jQuery: Build a beautiful chat interface

HTML, CSS and jQuery: Build a beautiful chat interface

Introduction:
Behind the popularity of modern social networking and messaging apps, a beautiful and functional The comprehensive chat interface takes a large part of the responsibility. This article will share how to use HTML, CSS and jQuery to build a beautiful chat interface, and attach specific code examples for reference.

1. HTML structure:
First, we need to create the basic HTML structure, including a chat window container, chat message box, chat input box and send button.

<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. CSS styles:
Next, we need to use CSS styles to provide the appearance and layout of the chat interface.

.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. jQuery function:
Finally, we use jQuery to add interactive and dynamic functions to the chat interface.

$(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();
    }
  });
});

Code explanation:

• When the send button is clicked, get the message content in the input box and add it to the chat box as a user message.
• Clear the input box and scroll the chat box to the bottom to see the latest messages.
• When the Enter key is pressed in the input box, the click event of the send button is triggered.

Conclusion:
Through the combination of HTML, CSS and jQuery, we successfully built a beautiful and interactive chat interface. You can customize and improve it according to your needs, such as adding more styles, emojis, file uploads, etc. Hopefully this simple code example can provide you with some help building a great chat interface.

The above is the detailed content of HTML, CSS, and jQuery: Build a beautiful chat interface. For more information, please follow other related articles on the PHP Chinese website!