Mr.Xiong使用jQuery实现手机聊天的效果

使用jQuery实现手机聊天的效果

 

1. 先放一个div给这个div一个类为box，给这个box设置一下样式，width:500px; height:600px; border:2px solid #333;  margin:100px auto;
2. 再在这个div里面放置两个div分别给他们一个类为box1，box2，box1主要显示内容我们给他设置样式width:450px; height:500px; border:2px solid #333; margin:10px 25px； overflow:auto;，box2就是输入并发送和选择聊天角色的
3. 我们先在box1里面再放两个div分别给他们一个类为box11，box12，box11是A的聊天框，box12是B的聊天框，再分别在这两个div里面写两个span标签，这两个span标签就是写角色和内容的，再给写内容的span标签一个相同类为text-break，再给text-break设置样式word-wrap: break-word!important;/*用来换行因为我们在输入框内输入很多数字的话，他会超出聊天框，如果写word-wrap这个样式的话他就可以自动换行了。
4. 现在我们来写box2中的内容，首先我们要在box2里面放一个select标签他是一个下拉框，这个是可以切换角色的标签，select和option标签是配套使用的，然后我们再在box2里面放两个input标签，一个用来做输入框，一个用来做按钮，做按钮的input标签需要在value属性里面写文字。这样就可以知道他是个按钮了，到这里我们的布局也就到一段落了，接下来我们就要用jQuery来写我们要实现这个效果的代码了。

 

1. 首先我们不能忘的就是我们的页面加载事件啦，所以我们先写一个简写的ready事件，$(function(){})
2. 要获取一下发送的按钮$("input[type=button]")，再给这个按钮绑定点击事件：$("input[type=button]").click(function () {})；然后我们要执行的代码都在这个点击事件里面写。
3. 首先我们要声明两个变量s和text来获取一下下拉框和input标签的value值，var s = $("select").val();

var text = $("input[type=text]").val();再声明一个变量ss来装聊天内容var ss = "";变量都声明好了。

1. 接下来我们要判断一下输入框是否是没有内容的，如果没有内容就弹出一个警告框“请输入”并跳出判断不再执行下面的代码：if (text == " ") {alert("请输入");return}，判断完了这个我们就要开始写我们的正文了。
2. if (s == 0) { ss = '<div class="box11"> <span>  A </span><span class="text-break">' + text + '</span></div>'; } else if (s == 1) { ss = '<div class="box12"> <span class="text-break">' + text + ' </span><span>B</span></div>';}

首先我们要用if else语句来判断一下是哪个角色在说话，判断完了后就用字符串拼接的方法把输入框的内容与角色连起来，再把它赋值给ss变量。

1. $(".box1").append(ss);判断完了再把变量添加给box1，最后我们要将输入框里的内容清空，所以给输入框的val()方法赋值为空。$("input[type=text]").val(" ");这样一个简单的聊天框就做好了。我们来看一下效果：