検索

ホームページ >ウェブフロントエンド >jsチュートリアル >WeChatのチャットインターフェースを模倣したjqueryの共有例

WeChatのチャットインターフェースを模倣したjqueryの共有例

小云云
小云云オリジナル
2018-01-12 11:20:493092ブラウズ

この記事は主にWeChatチャットインターフェースを模倣したjqueryの関連コードを詳しく紹介していますので、興味のある方は参考にしていただければ幸いです。

まずレンダリングを見てください。

WeChatのチャットインターフェースを模倣したjqueryの共有例

色が少し不適切かもしれませんが、基本的な機能はほとんど実現されています。つまり、あなたはデスクメイトと話していて、送信したメッセージはあなたのデバイスの左側と彼のデバイスの右側に表示されます。

まず全体的なフレームワークを作成し、大きなコンテナに左右のインターフェイスとなる 2 つのボックスを配置します。各ボックスには、ヘッダー、コンテンツ領域、下部の 3 つの部分が含まれます。片面に書いて、もう片面に貼り付けてコピーするだけです。

まず、左右のボックスを保持するための大きな

を定義します。 


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

まず、これら 2 つのボックスのコードを直接コピーして貼り付けることはできません。次の違いにも注意する必要があります: 


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

select の ID が異なります。通常、このように

option1
option2
option3

を使用します。選択タグは、あなたとデスクメイトが画面全体でチャットするときに使用されます。上下にスライドして話した内容を確認できます。次に、上記をベースにいくつかの CSS スタイルを追加して、インターフェイス効果が現れるようにします。

次のステップは、jquery コードを記述することです。まず、自分の側で発言する内容を自分のデバイスの右側に表示するか、デスクメイトのデバイスの左側に表示するかを考えてください。

まず、インターフェースの左側でメッセージの送信を制御します。テキストを書き込んだ後、送信ボタンを押すと、インターフェースの右側とデスクメイトのデバイスの左側にメッセージが表示されます。

これを達成するには、次の手順に従う必要があります:
1.入力したテキストボックスの内容を取得します。
2.オプションタグを生成します。
2.1 生成されたタグのスタイルは、生成されたspanタグがデバイスの右側に配置および表示されることです。
2.2 生成されたタグにコンテンツを挿入します。つまり、テキスト ボックスにコンテンツを挿入します。
3.選択したものにオプション タグを追加します。
4.オプション ラベルをデスクメイトのデバイスの左側に配置します。

5.テキストボックスの内容をクリアします。 


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

同様に、このデバイスを机に表示すると、左のようになります。
自分で書いてください。

左側と右側に送信するメッセージ関数を記述した後、まだイベントがバインドされていないため、この時点ではメッセージを送信できません。まず、メッセージを送る方法は2つあります:
①。ボタン送信
ボタン送信にはイベントをボタン


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

②にバインドする必要があります。 Enter キーを押して送信します 


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

最後に、完全なソース コードを添付します: 


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

関連する推奨事項:

CSS3 を使用して WeChat のチャット バブルを模倣する方法の例

js オリジナル サウンドシンプルな WeChat チャット関数を実装します

CSS3 模倣 WeChat チャット バブル コード例

以上がWeChatのチャットインターフェースを模倣したjqueryの共有例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jQuery extend()の詳しい説明次の記事：jQuery extend()の詳しい説明

関連記事

続きを見る