首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jquery仿微信聊天界面

Posted in jQuery onMay 06, 2017

首先看一下我们的效果图。

jquery仿微信聊天界面

这个颜色可能搭配的有些不合适，但基本功能大都实现了。就是你和你同桌对话，你发的消息在你的左侧，而在他设备的右侧。

首先先写好整体的框架，在一个大容器中放两个盒子，分别是左侧和右侧的界面。然后每个盒子里面包含了三大部分：头部、内容区、和底部。只要写好一侧，另一侧进行粘贴复制就可以了。

首先定义一个大的

来盛放左右两个盒子。

<div id = "main">

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

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

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

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

</div>

首先这两个盒子的代码不是复制粘贴就直接可以的。还必须注意以下不同：

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

select中的id得不同。我们一般都是

option1
option2
option3

这样使用。而在这儿使用select标签是当你和你同桌聊了一屏的天时，它有滚动条来 上下滑动看你们都聊了些什么。再上面的基础上增加一些css样式，这样界面效果就出来了。

接下来就是要写jquery代码的时候了。首先想一下你在你这边说的话既要出现在你的设备右侧，又要出现在你同桌设备的左侧？

我们先对你的界面左侧进行发消息控制，在写了文本之后，按发送按钮让它出现在你界面的右侧，同时也出现在你同桌设备的左侧。

我们要按照以下步骤来实现：
1。获得你输入的文本框中的内容。
2。生成一个option标签。
2.1 生成标签的样式即生成的span标签在你的设备的右侧进行定位并 显示。
2.2 对生成的标签进行内容的插入即插入文本框中的内容
3。将option标签追加到你的select中。
4。将option标签在你同桌设备的左侧进行定位显示。

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

最后附上完整的源代码:

<!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>
<div id = "main">
 <div id = "box">
  <div id = "top"><span>你</span></div>
  <div id = "content">
   <select multiple="multiple" id="leftcontent">

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jquery仿微信聊天界面

- Author -

画一生情入颜容

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jquery append与appendTo方法比较
May 24 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
jQuery中元素选择器（element）简单用法示例
May 14 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
详解jquery和vue对比
Apr 16 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
简单实现jQuery弹幕效果
May 06 #jQuery
jquery实现提示语淡入效果
May 05 #jQuery
Jquery获取radio选中的值
May 05 #jQuery
jQuery实现简单的抽奖游戏
May 05 #jQuery
jquery中each循环的简单回滚操作
May 05 #jQuery
jquery dataTable 获取某行数据
May 05 #jQuery
js和jquery中获取非行间样式
May 05 #jQuery
目录管理(1) Vmware(3) html5+(1) 入门基础(1) plus.io(1) 虚拟机(3) RabbitMQ(3) 触发器(3) Hash(1) 磁盘管理(1)
You might like
《PHP编程最快明白》第七讲：php图片验证码与缩略图
2010/11/01 PHP
PHP回调函数简单用法示例
2019/05/08 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
载入进度条 效果
2006/07/08 Javascript
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
jquery实现带缩略图的可定制高度画廊效果（5种）
2015/08/28 Javascript
jQuery简单实现中间浮窗效果
2016/09/04 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
python机器学习理论与实战（一）K近邻法
2021/01/28 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
Volcom英国官方商店：美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
TALLY WEiJL法国网上商店：服装、时装及配饰
2019/08/31 全球购物
澳大利亚波希米亚风时尚品牌：Tree of Life
2019/09/15 全球购物
过滤器的用法
2013/10/08 面试题
简历中自我评价范文3则
2013/12/14 职场文书
日语系毕业求职信
2014/07/27 职场文书
员工趣味活动方案
2014/08/27 职场文书
见习报告的格式
2014/11/04 职场文书
党员年终个人总结
2015/02/14 职场文书
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
Python列表的索引与切片
2022/04/07 Python