Teilen Sie Beispiele für Jquery, die die WeChat-Chat-Schnittstelle imitieren

In diesem Artikel wird hauptsächlich der relevante Code der WeChat-Chat-Schnittstelle im Detail vorgestellt. Interessierte Freunde können darauf verweisen.

Schauen Sie sich zunächst unsere Renderings an.

Die Farbe mag etwas unpassend sein, aber die meisten Grundfunktionen sind implementiert. Das heißt, Sie sprechen mit Ihrem Schreibtischkollegen und die von Ihnen gesendeten Nachrichten befinden sich auf der linken Seite Ihres Geräts und auf der rechten Seite seines Geräts.

Schreiben Sie zunächst das Gesamtgerüst und legen Sie zwei Kästchen in einen großen Container, die die linke und rechte Schnittstelle darstellen. Dann enthält jedes Feld drei Teile: Kopfzeile, Inhaltsbereich und Unterseite. Schreiben Sie einfach auf eine Seite und fügen Sie es auf der anderen Seite ein und kopieren Sie es.

Definieren Sie zunächst ein großes

für die linken und rechten Felder.

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

Zunächst können die Codes für diese beiden Boxen direkt kopiert und eingefügt werden. Sie müssen außerdem auf die folgenden Unterschiede achten:

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

Die IDs in select sind unterschiedlich. Normalerweise verwenden wir

Option1
Option2
Option3

so. Das Select-Tag wird hier verwendet, wenn Sie und Ihr Deskmate einen ganzen Bildschirm lang chatten. Es verfügt über eine Bildlaufleiste, die Sie nach oben und unten verschieben können, um zu sehen, worüber Sie gesprochen haben. Fügen Sie dann auf der Grundlage des oben Gesagten einige CSS-Stile hinzu, damit der Schnittstelleneffekt erzielt wird.

Der nächste Schritt besteht darin, den JQuery-Code zu schreiben. Überlegen Sie zunächst, was Sie auf Ihrer Seite sagen. Soll es auf der rechten Seite Ihres Geräts und auf der linken Seite des Geräts Ihres Schreibtischkollegen erscheinen?

Wir steuern zunächst das Senden von Nachrichten auf der linken Seite Ihrer Benutzeroberfläche. Nachdem Sie den Text geschrieben haben, klicken Sie auf die Schaltfläche „Senden“, damit er auf der rechten Seite Ihrer Benutzeroberfläche und auf der linken Seite des Geräts Ihres Deskmates angezeigt wird.

Wir müssen die folgenden Schritte befolgen, um dies zu erreichen:
1. Rufen Sie den Inhalt des von Ihnen eingegebenen Textfelds ab.
2. Generieren Sie ein Options-Tag.
2.1 Der Stil des generierten Tags, d. h. das generierte Span-Tag, wird auf der rechten Seite Ihres Geräts positioniert und angezeigt.
2.2 Fügen Sie Inhalte in das generierte Tag ein, d. h. fügen Sie den Inhalt in das Textfeld ein
3. Hängen Sie das Option-Tag an Ihre Auswahl an.
4. Positionieren Sie das Optionsetikett auf der linken Seite des Geräts Ihres Deskmate und zeigen Sie es an.

5. Löschen Sie den Inhalt des Textfelds.

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

Wenn Sie die Ausrüstung an Ihrem Schreibtisch ausstellen, sieht es ähnlich aus wie links.
Schreiben Sie es einfach selbst.

Nach dem Schreiben der auf der linken und rechten Seite gesendeten Nachrichtenfunktionen kann die Nachricht derzeit nicht gesendet werden, da das Ereignis noch nicht gebunden ist. Erstens gibt es zwei Möglichkeiten, Nachrichten zu senden:
①. Schaltflächenversand
Schaltflächenversand erfordert verbindliche Ereignisse für die Schaltfläche

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

②. Drücken Sie die Eingabetaste, um

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

zu senden. Hängen Sie abschließend den vollständigen Quellcode an:

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

Verwandte Empfehlungen :

Ein Beispiel für die Nachahmung von WeChat-Chat-Blasen mit CSS3

JS-Originalton zur Implementierung einer einfachen WeChat-Chat-Funktion

Beispiel für einen CSS3-Imitations-WeChat-Chat-Blasencode

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für Jquery, die die WeChat-Chat-Schnittstelle imitieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!