HTML, CSS et jQuery : créez une belle interface de discussion

HTML, CSS et jQuery : créez une belle interface de chat

Introduction :
Une belle interface de chat entièrement fonctionnelle porte une grande partie de la responsabilité derrière la popularité des applications modernes de réseaux sociaux et de messagerie. Cet article expliquera comment utiliser HTML, CSS et jQuery pour créer une belle interface de discussion et joindra des exemples de code spécifiques pour référence.

1. Structure HTML :
Tout d'abord, nous devons créer la structure HTML de base, y compris un conteneur de fenêtre de discussion, une boîte de message de discussion, une zone de saisie de discussion et un bouton d'envoi.

<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. Style CSS :
Ensuite, nous devons utiliser des styles CSS pour fournir l'apparence et la mise en page de l'interface de discussion.

.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. Fonctions jQuery :
Enfin, nous utilisons jQuery pour ajouter des fonctions interactives et dynamiques à l'interface de chat.

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

Explication du code :

• Lorsque vous cliquez sur le bouton d'envoi, obtenez le contenu du message dans la zone de saisie et ajoutez-le à la boîte de discussion en tant que message utilisateur.
• Effacez la zone de saisie et faites défiler la zone de discussion vers le bas pour voir les derniers messages.
• Lorsque la touche Entrée est enfoncée dans la zone de saisie, l'événement de clic du bouton d'envoi est déclenché.

Conclusion : 
Grâce à la combinaison de HTML, CSS et jQuery, nous avons réussi à créer une interface de chat magnifique et interactive. Vous pouvez le personnaliser et l'améliorer en fonction de vos besoins, par exemple en ajoutant plus de styles, d'émojis, de téléchargements de fichiers, etc. Espérons que cet exemple de code simple pourra vous aider à créer une excellente interface de discussion.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!