Sharing examples of jquery imitating WeChat chat interface

This article mainly introduces the relevant code of jquery imitating WeChat chat interface in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

First take a look at our renderings.

#The color may be a bit inappropriate, but most of the basic functions are achieved. That is, you are talking to your deskmate, and the messages you send are on the left side of your device and on the right side of his device.

First write the overall framework and put two boxes in a large container, which are the left and right interfaces. Then each box contains three parts: header, content area, and bottom. Just write on one side and paste and copy on the other side.

First define a large

to hold the left and right boxes.

<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>

First of all, the codes for these two boxes can be directly copied and pasted. You must also pay attention to the following differences: The ids in

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

select are different. We usually use

option1
option2
option3

like this. The select tag is used here when you and your deskmate chat for a whole screen. It has a scroll bar to slide up and down to see what you talked about. Then add some css styles on the basis of the above, so that the interface effect will come out.

The next step is to write the jquery code. First of all, think about whether what you say on your side should appear on the right side of your device and on the left side of your deskmate's device?

We first control sending messages on the left side of your interface. After writing the text, press the send button to make it appear on the right side of your interface and also on the left side of your deskmate's device.

We need to follow the following steps to achieve:
1. Get the contents of the text box you entered.
2. Generate an option tag.
2.1 The style of the generated tag, that is, the generated span tag is positioned and displayed on the right side of your device.
2.2 Insert the content of the generated tag, that is, insert the content in the text box
3. Append the option tag to your select.
4. Position and display the option label on the left side of your deskmate's device.

5. Clear the contents of the text box.

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

Similarly, when you display the equipment at your deskmate, it is similar to the one on the left.
Just write it yourself.

After writing the message functions sent on the left and right sides, the message cannot be sent at this time because the event has not been bound yet. First, there are two ways to send messages:
①. Button sending
Button sending requires binding events to the button

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

②. Press Enter to send

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

Finally attach the complete source code:

<!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>

Related recommendations:

Examples to explain how to imitate WeChat chat bubbles using CSS3

js original sound to implement a simple WeChat chat function

CSS3 Example of imitating WeChat chat bubble code

The above is the detailed content of Sharing examples of jquery imitating WeChat chat interface. For more information, please follow other related articles on the PHP Chinese website!