jquery仿微信聊天界面
首先看一下我們的效果圖。
這個(gè)顏色可能搭配的有些不合適,但基本功能大都實(shí)現(xiàn)了。就是你和你同桌對(duì)話,你發(fā)的消息在你的左側(cè),而在他設(shè)備的右側(cè)。
首先先寫好整體的框架,在一個(gè)大容器中放兩個(gè)盒子,分別是左側(cè)和右側(cè)的界面。然后每個(gè)盒子里面包含了三大部分:頭部、內(nèi)容區(qū)、和底部。只要寫好一側(cè),另一側(cè)進(jìn)行粘貼復(fù)制就可以了。
首先定義一個(gè)大的
來盛放左右兩個(gè)盒子。
<div id = "main"> //左側(cè)聊天界面 <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 = "發(fā)送"> </div> </div> //右側(cè)聊天界面 <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 = "發(fā)送"> </div> </div> </div>
首先這兩個(gè)盒子的代碼不是復(fù)制粘貼就直接可以的。還必須注意以下不同:
<div id = "content"> <select multiple="multiple" id="rightcontent"> </select> </div>
select中的id得不同。我們一般都是
option1
option2
option3
這樣使用。而在這兒使用select標(biāo)簽是當(dāng)你和你同桌聊了一屏的天時(shí),它有滾動(dòng)條來 上下滑動(dòng)看你們都聊了些什么。再上面的基礎(chǔ)上增加一些css樣式,這樣界面效果就出來了。
接下來就是要寫jquery代碼的時(shí)候了。首先想一下你在你這邊說的話既要出現(xiàn)在你的設(shè)備右側(cè),又要出現(xiàn)在你同桌設(shè)備的左側(cè)?
我們先對(duì)你的界面左側(cè)進(jìn)行發(fā)消息控制,在寫了文本之后,按發(fā)送按鈕讓它出現(xiàn)在你界面的右側(cè),同時(shí)也出現(xiàn)在你同桌設(shè)備的左側(cè)。
我們要按照以下步驟來實(shí)現(xiàn):
1。獲得你輸入的文本框中的內(nèi)容。
2。生成一個(gè)option標(biāo)簽。
2.1 生成標(biāo)簽的樣式即生成的span標(biāo)簽在你的設(shè)備的右側(cè)進(jìn)行定位并 顯示。
2.2 對(duì)生成的標(biāo)簽進(jìn)行內(nèi)容的插入即插入文本框中的內(nèi)容
3。將option標(biāo)簽追加到你的select中。
4。將option標(biāo)簽在你同桌設(shè)備的左側(cè)進(jìn)行定位顯示。
5。清除文本框中的內(nèi)容。
function sendLeft(){ //1.獲得你輸入的文本框中的內(nèi)容。 var text = $("#leftText").val(); //2。生成一個(gè)span標(biāo)簽。 var option = $("`<option></option>`"); // 2.1 生成標(biāo)簽的樣式即生成的span標(biāo)簽在你的設(shè)備的右側(cè)進(jìn)行定位并顯示。 var len = text.length; option.css("width", len * 15 + "px"); option.css("marginLeft", 350 - len * 15 - 60 + "px"); //2.2 生成標(biāo)簽的內(nèi)容 option.html(text); //3. 將內(nèi)容追加到select中。 $("#leftcontent").append(option); //4. 追加生成的標(biāo)簽(右側(cè)) 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. 清除文本框的內(nèi)容 $("#leftText").val(""); } }
同樣再對(duì)你同桌的設(shè)備方進(jìn)行顯示的時(shí)候,和左側(cè)的大同小異。
自己寫一下就可以。
在寫了左側(cè)和右側(cè)發(fā)送的消息函數(shù)之后,此時(shí)還不能進(jìn)行消息發(fā)送,因?yàn)檫€沒有進(jìn)行事件綁定。首先發(fā)送消息有兩種方式:
①。按鈕發(fā)送
按鈕發(fā)送就需要為按鈕綁定事件
$("#leftdBtn").bind("click", sendLeft); $("#rightBtn").bind("click", sendRight);
②?;剀嚢l(fā)送
$(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. 獲取輸入框中的內(nèi)容 var text = $("#leftText").val(); //2. 生成標(biāo)簽 var option = $("<option></option>"); option.addClass("optionLeft"); //2.1 生成標(biāo)簽的樣式 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 生成標(biāo)簽的內(nèi)容 option.html(text); //3. 將內(nèi)容追加到select中。 $("#leftcontent").append(option); //4. 追加生成的標(biāo)簽(右側(cè)) 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. 清除文本框的內(nèi)容 $("#leftText").val(""); } function sendRight(){ //1. 獲取輸入框中的內(nèi)容 var text = $("#rightText").val(); //2. 生成標(biāo)簽 var option = $("<option></option>"); option.addClass("optionLeft"); //2.1 生成標(biāo)簽的樣式 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 生成標(biāo)簽的內(nèi)容 option.html(text); //3. 將內(nèi)容追加到select中。 $("#rightcontent").append(option); //4. 追加生成的標(biāo)簽(右側(cè)) 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 = "發(fā)送"> </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 = "發(fā)送"> </div> </div> </div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jquery添加div實(shí)現(xiàn)消息聊天框
- jQuery實(shí)現(xiàn)聊天對(duì)話框
- jquery實(shí)現(xiàn)聊天機(jī)器人
- JS(jQuery)實(shí)現(xiàn)聊天接收到消息語(yǔ)言自動(dòng)提醒功能詳解【提示“您有新的消息請(qǐng)注意查收”】
- 基于jQuery實(shí)現(xiàn)簡(jiǎn)單人工智能聊天室
- 使用jQuery調(diào)用XML實(shí)現(xiàn)無(wú)刷新即時(shí)聊天
- javascript和jQuery實(shí)現(xiàn)網(wǎng)頁(yè)實(shí)時(shí)聊天的ajax長(zhǎng)輪詢
- PHP+jquery+ajax實(shí)現(xiàn)即時(shí)聊天功能實(shí)例
- JavaScript/jQuery、HTML、CSS 構(gòu)建 Web IM 遠(yuǎn)程及時(shí)聊天通信程序
- jQuery實(shí)現(xiàn)簡(jiǎn)易聊天框
相關(guān)文章
jquery動(dòng)態(tài)添加刪除一行數(shù)據(jù)示例
這篇文章主要介紹了jquery如何動(dòng)態(tài)添加刪除一行數(shù)據(jù),需要的朋友可以參考下2014-06-06火狐4、谷歌12不支持Jquery Validator的解決方法分享
在火狐4、谷歌12瀏覽器中,使用jquery.tools.min 1.2.5版的Jquery Validator,不出現(xiàn)驗(yàn)證提示框。在ie7、8、9下就好用。2011-06-06jQuery DOM節(jié)點(diǎn)的遍歷方法小結(jié)
本篇文章主要介紹了jQuery DOM節(jié)點(diǎn)的遍歷方法小結(jié),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08一個(gè)可以增加和刪除行的table并可編輯表格中內(nèi)容
本例要實(shí)現(xiàn)的是一個(gè)可以增加和刪除行的table并可編輯表格中內(nèi)容,適合新手朋友2014-06-06jQuery Selectors(選擇器)的使用(九、表單對(duì)象屬性篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法,我將以實(shí)例方式進(jìn)行講述,以簡(jiǎn)單,全面為基礎(chǔ),不會(huì)涉及很深,我的學(xué)習(xí)方法:先入門,后進(jìn)階!2009-12-12簡(jiǎn)單常用的幻燈片播放實(shí)現(xiàn)代碼
幻燈片自動(dòng)播放圖片是當(dāng)前網(wǎng)站比較流行的一個(gè)展示方式,這里項(xiàng)目需要,我自己做了一個(gè)簡(jiǎn)單的,就不詳細(xì)講解了,代碼很簡(jiǎn)單。直接看效果圖和代碼吧,希望對(duì)大家有所幫助2013-09-09使用jQuery實(shí)現(xiàn)簡(jiǎn)單穿梭框方式
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)簡(jiǎn)單穿梭框方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10