WeChat 채팅 인터페이스를 모방한 jquery의 예 공유-JS 튜토리얼-php.cn

WeChat 채팅 인터페이스를 모방한 jquery의 예 공유

小云云

풀어 주다： 2018-01-12 11:20:49

원래의

3031명이 탐색했습니다.

이 글은 WeChat 채팅 인터페이스를 모방한 jquery의 관련 코드를 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

먼저 렌더링을 살펴보세요.

WeChat 채팅 인터페이스를 모방한 jquery의 예 공유

색상이 조금 부적절할 수 있지만 기본적인 기능은 대부분 구현되어 있습니다. 즉, 귀하는 직장 동료와 대화하고 있으며 귀하가 보내는 메시지는 귀하의 장치 왼쪽과 그의 장치 오른쪽에 있습니다.

먼저 전체 프레임워크를 작성하고 왼쪽과 오른쪽 인터페이스인 두 개의 상자를 큰 컨테이너에 넣습니다. 그런 다음 각 상자에는 헤더, 콘텐츠 영역 및 하단의 세 부분이 포함됩니다. 한 면에 쓰고 다른 면에는 붙여넣고 복사하면 됩니다.

먼저 왼쪽과 오른쪽 상자를 담을 큰

을 정의하세요.

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

로그인 후 복사

우선 이 두 상자의 코드는 직접 복사하여 붙여넣을 수 없습니다. 또한 다음 차이점에 주의해야 합니다.

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

로그인 후 복사

select의 ID가 다릅니다. 우리는 보통

option1
option2
option3

을 이렇게 사용합니다. 여기에서 선택 태그는 귀하와 귀하의 동료가 전체 화면에서 채팅할 때 사용됩니다. 여기에는 귀하가 말한 내용을 보기 위해 위아래로 슬라이드할 수 있는 스크롤 막대가 있습니다. 그런 다음 위 내용을 바탕으로 몇 가지 CSS 스타일을 추가하면 인터페이스 효과가 나옵니다.

다음 단계는 jquery 코드를 작성하는 것입니다. 먼저 당신이 말하는 내용이 귀하의 기기 오른쪽과 동료의 기기 왼쪽에 표시되어야 하는지 생각해 보세요.

먼저 인터페이스 왼쪽에서 메시지 보내기를 제어합니다. 텍스트를 작성한 후 보내기 버튼을 누르면 메시지가 인터페이스 오른쪽과 데스크메이트 기기 왼쪽에 표시됩니다.

이를 달성하려면 다음 단계를 따라야 합니다.
1. 입력한 텍스트 상자의 내용을 가져옵니다.
2. 옵션 태그를 생성합니다.
2.1 생성된 태그의 스타일은 생성된 스팬 태그가 장치의 오른쪽에 배치되어 표시되는 것입니다.
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("");
  }
}

로그인 후 복사

마찬가지로 책상에 기기를 전시해 놓으면 왼쪽과 비슷합니다.
그냥 직접 써보세요.

왼쪽과 오른쪽에 보내는 메시지 기능을 작성한 후, 아직 이벤트가 바인딩되지 않았기 때문에 지금은 메시지를 보낼 수 없습니다. 먼저 메시지를 보내는 방법에는 두 가지가 있습니다:
①. 버튼 보내기
버튼 보내기에는 버튼

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

로그인 후 복사

②에 이벤트를 바인딩해야 합니다.

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

로그인 후 복사

를 보내려면 Enter를 누르세요. 마지막으로 전체 소스 코드를 첨부하세요.

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

로그인 후 복사