Partage d'exemples de jquery imitant l'interface de chat WeChat

Cet article présente principalement en détail le code pertinent de jquery imitant l'interface de chat WeChat. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Jetez d’abord un œil à nos rendus.

La couleur est peut-être un peu inappropriée, mais la plupart des fonctions de base sont implémentées. Autrement dit, vous parlez à votre collègue et les messages que vous envoyez se trouvent sur le côté gauche de votre appareil et sur le côté droit de son appareil.

Écrivez d'abord le cadre global et placez deux cases dans un grand conteneur, qui sont les interfaces gauche et droite. Ensuite, chaque boîte contient trois parties : en-tête, zone de contenu et bas. Écrivez simplement d’un côté, collez et copiez de l’autre côté.

Définissez d'abord un grand

pour contenir les cases gauche et droite.

<p id = "main">

 //左侧聊天界面
 <p id = "box">
  <p id = "top"><span>你</span></p>
  <p id = "content">
   <select multiple="multiple" id="leftcontent">

   </select>
  </p>
  <p id = "bottom">
   <input type = "text" class = "sendText" id = "leftText" />
   <input type = "button" id = "leftdBtn" class="sendBtn" value = "发送">
  </p>
 </p>

//右侧聊天界面
 <p id = "box">
  <p id = "top"><span>同桌</span></p>
  <p id = "content">
   <select multiple="multiple" id="rightcontent">

   </select>
  </p>
  <p id = "bottom">
   <input type = "text" class = "sendText" id = "rightText" />
   <input type = "button" id = "rightBtn" class="sendBtn" value = "发送">
  </p>
 </p>

</p>

Tout d'abord, les codes de ces deux box peuvent être directement copiés-collés. Vous devez également faire attention aux différences suivantes :

<p id = "content">
   <select multiple="multiple" id="rightcontent">
   </select>
</p>

Les identifiants dans select sont différents. Nous utilisons généralement

option1
option2
option3

comme ceci. La balise de sélection est utilisée ici lorsque vous et votre collègue discutez sur tout un écran. Elle comporte une barre de défilement permettant de glisser de haut en bas pour voir de quoi vous avez parlé. Ajoutez ensuite quelques styles CSS sur la base de ce qui précède, afin que l'effet d'interface ressorte.

L'étape suivante consiste à écrire le code jquery. Pensez d'abord à ce que vous dites de votre côté. Doit-il apparaître sur le côté droit de votre appareil et sur le côté gauche de celui de votre collègue ?

Nous contrôlons d'abord l'envoi des messages sur le côté gauche de votre interface. Après avoir rédigé le texte, appuyez sur le bouton d'envoi pour le faire apparaître sur le côté droit de votre interface et sur le côté gauche de l'appareil de votre collègue.

Nous devons suivre les étapes suivantes pour y parvenir :
1. Obtenez le contenu de la zone de texte que vous avez saisie.
2. Générez une balise d'option.
2.1 Le style de la balise générée, c'est-à-dire la balise span générée, est positionnée et affichée sur le côté droit de votre appareil.
2.2 Insérer du contenu dans la balise générée, c'est-à-dire insérer le contenu dans la zone de texte
3. Ajoutez la balise option à votre sélection.
4. Positionnez l'étiquette d'option à gauche de l'appareil de votre collègue.

5. Effacez le contenu de la zone de texte.

function sendLeft(){

 //1.获得你输入的文本框中的内容。
 var text = $("#leftText").val();

 //2。生成一个span标签。
 var option = $("`<option></option>`");
 // 2.1 生成标签的样式即生成的span标签在你的设备的右侧进行定位并显示。
 var len = text.length;
 option.css("width", len * 15 + "px");
 option.css("marginLeft", 350 - len * 15 - 60 + "px");
  //2.2 生成标签的内容
  option.html(text);

  //3. 将内容追加到select中。
  $("#leftcontent").append(option);

  //4. 追加生成的标签(右侧)
  var option1 = $("<option></option>");
  option1.addClass("optionRight");
  option1.css("width", len * 15 + "px");
  option1.css("marginLeft", 10 +"px");
  option1.html(text);
  $("#rightcontent").append(option1);

  //5. 清除文本框的内容
  $("#leftText").val("");
  }
}

De même, lorsque vous affichez l'équipement chez votre collègue de bureau, il est similaire à celui de gauche.
Écrivez-le vous-même.

Après avoir écrit les fonctions de message envoyées sur les côtés gauche et droit, le message ne peut pas être envoyé pour le moment car l'événement n'a pas encore été lié. Premièrement, il existe deux manières d'envoyer des messages :
①. Envoi du bouton
L'envoi du bouton nécessite des événements de liaison pour le bouton

 $("#leftdBtn").bind("click", sendLeft);
 $("#rightBtn").bind("click", sendRight);

②. Appuyez sur Entrée pour envoyer

$(document).keydown(function(event){
   var txt1 = $("#leftText").val();
   var txt2 = $("#rightText").val() 
   if(event.keyCode == 13){
    if( txt1.trim() != ""){
     sendLeft();
    }
    if(txt2.trim() != ""){
     sendRight();
    }
   }
  });

Enfin, joignez le code source complet :

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
 <title>模仿微信聊天</title>
 <script type="text/javascript" src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
 <style type="text/css">
 *{
  margin: 0px;
  padding: 0px;
 }

 #main{
  width: 90%;
  margin: 10px auto;
 }
 #box{
  float: left;
  margin:20px 120px; 
 }

 #top{
  width: 310px;
  padding: 10px 20px;
  color: white;
  background-color: lightgreen;
  font-size: 18px;
  font-family: "微软雅黑";
  font-weight: bold;
 }

 #content{
  background-color: white;
 }

 select{
  width: 350px;
  height: 470px;
  background-color: white;
  padding: 10px;
  border:2px solid red;

 }

 #bottom{
  width: 310px;
  background-color: red;
  padding: 10px 20px;
 }

 .sendText{
  height: 25px;
  width: 210px;
  font-size: 16px;
 }

 .sendBtn{
  width: 65px;
  height: 30px;

  float: right;
  background-color: gold;
  color: white;
  text-align: center;
  font-size: 18px;
  }

 span{
   background-color: lightgreen;
   color: #000;
   padding: 10px 30px;

  }
  option{
   padding: 5px 10px;
   margin-top:10px; 
   border-radius:5px;
   width: 10px;
   min-height: 20px;
  }

  .optionRight{
   background-color: lightgreen; 
  }

  .optionLeft{
   background-color: lightblue; 
  }
 </style>

 <script>
 $(function(){

  $("#leftdBtn").bind("click", sendLeft);
  $("#rightBtn").bind("click", sendRight);

  function sendLeft(){

  //1. 获取输入框中的内容
  var text = $("#leftText").val();
  //2. 生成标签
  var option = $("<option></option>");
  option.addClass("optionLeft");
  //2.1 生成标签的样式
  var len = text.length;
  //option.css("width", len * 15 + "px","marginLeft", 350 - len * 15 - 60 + "px")
   option.css("width", len * 15 + "px");
   option.css("marginLeft", 350 - len * 15 - 60 + "px");
  //2.2 生成标签的内容
  option.html(text);
  //3. 将内容追加到select中。
  $("#leftcontent").append(option);
  //4. 追加生成的标签(右侧)
  var option1 = $("<option></option>");
  option1.addClass("optionRight");
  option1.css("width", len * 15 + "px");
  option1.css("marginLeft", 10 +"px");
  option1.html(text);
  $("#rightcontent").append(option1);

  //5. 清除文本框的内容
  $("#leftText").val("");
  }  


 function sendRight(){

  //1. 获取输入框中的内容
  var text = $("#rightText").val();
  //2. 生成标签
  var option = $("<option></option>");
  option.addClass("optionLeft");
  //2.1 生成标签的样式
  var len = text.length;
  //option.css("width", len * 15 + "px","marginLeft", 350 - len * 15 - 60 + "px")
   option.css("width", len * 15 + "px");
   option.css("marginLeft", 350 - len * 15 - 60 + "px");
  //2.2 生成标签的内容
  option.html(text);
  //3. 将内容追加到select中。
  $("#rightcontent").append(option);
  //4. 追加生成的标签(右侧)
  var option1 = $("<option></option>");
  option1.addClass("optionRight");
  option1.css("width", len * 15 + "px");
  option1.css("marginLeft", 10 +"px");
  option1.html(text);
  $("#leftcontent").append(option1);

  $("#rightText").val("");
  }


  $(document).keydown(function(event){

   var txt1 = $("#leftText").val();
   var txt2 = $("#rightText").val() 
   if(event.keyCode == 13){
    if( txt1.trim() != ""){
     sendLeft();
    }
    if(txt2.trim() != ""){
     sendRight();
    }
   }
  });
 })
 </script>
</head>
<body>
<p id = "main">
 <p id = "box">
  <p id = "top"><span>你</span></p>
  <p id = "content">
   <select multiple="multiple" id="leftcontent">

   </select>
  </p>
  <p id = "bottom">
   <input type = "text" class = "sendText" id = "leftText" />
   <input type = "button" id = "leftdBtn" class="sendBtn" value = "发送">
  </p>
 </p>

  <p id = "box">
  <p id = "top"><span>同桌</span></p>
  <p id = "content">
   <select multiple="multiple" id="rightcontent">

   </select>
  </p>
  <p id = "bottom">
   <input type = "text" class = "sendText" id = "rightText" />
   <input type = "button" id = "rightBtn" class="sendBtn" value = "发送">
  </p>
 </p>
</p>
</body>
</html>

Recommandations associées :

Un exemple de la façon d'imiter les bulles de chat WeChat en utilisant CSS3

Le son original JS pour implémenter une simple fonction de chat WeChat

Exemple de code de bulle de chat WeChat d'imitation CSS3

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!