在实习期间做一个nodejs的项目时,分配了做一个聊天室的任务,然后就喜欢上了这个。。。想着而不只是聊天,还可以加入类似qq表情的功能。发现可以进入Jquery官方网站下载该demo,但是在运用的过程中,难免会遇到各种各样的问题,在自己的信息研究之下,终于实现了该功能。
官方demo下载:http://www.jq22.com/jquery-info365
问题解决:
1.浏览器判别问题:在官方文件中,jquery还处于1.9以下,所有有句话在运行的过程中会出错:if(!$.browser.msie) return;
上网搜索会发现,这是判别浏览器的版本的,现在1.9以上的jquery插件已经不支持该语句了,可以改换成:
if(!$.support.msie) return;
这样就可以了。
2.在输入框输入表情之后会在聊天敞口信息显示,在textarea中现实的转换的文字代号,那么在显示的聊天记录里面需要重新转换为图片,下面的一段代码就是转换过程。
//查看结果
function replace_em(str){
str = str.replace(/\</g,'<');
str = str.replace(/\>/g,'>');
str = str.replace(/\n/g,'<br/>');
str = str.replace(/\[em_([0-9]*)\]/g,'<img src="arclist/$1.gif" border="0" />');
return str;
}
下面一段代码是显示在msgDiv中的,既是在点击发送按钮时的动作,其中sub_btn是按钮的id,show是显示的div的id,在实际应用中可以自己根据内容修改。
$(".sub_btn").click(function(){
var str = $("#saytext").val();
$("#show").html(replace_em(str));
});