由于目前在接触聊天室项目,接到一个需求实现一个类似QQ表情。在网上找了一款jquery经典表情插件。下面介绍一个用法:

HTML:

  首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件

<script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
   <script type="text/javascript" src="jquery.qqFace.js"></script>
然后在body中加入以下html代码:

   <div id="show"></div>
<div class="comment">
<div class="com_form">
<textarea class="input" id="saytext" name="saytext"></textarea>
<p><span class="emotion">表情</span><input type="button" class="sub_btn" value="提交"></p>
</div>
</div>

CSS:

我们用CSS来美化页面,关键是表情按钮图片span.emotion的鼠标滑上与移开效果,以及调用表情插件后,显示的表情.qqFace面板效果,请看代码:

 .comment{width:680px; margin:20px auto; position:relative}
.comment h3{height:28px; line-height:28px}
.com_form{width:100%; position:relative}
.input{width:99%; height:60px; border:1px solid #ccc}
.com_form p{height:28px; line-height:28px; position:relative}
span.emotion{width:42px; height:20px; background:url(icon.gif) no-repeat 2px 2px;
padding-left:20px; cursor:pointer}
span.emotion:hover{background-position:2px -28px}
.qqFace{margin-top:4px;background:#fff;padding:2px;border:1px #dfe6f6 solid;}
.qqFace table td{padding:0px;}
.qqFace table td img{cursor:pointer;border:1px #fff solid;}
.qqFace table td img:hover{border:1px #0066cc solid;}
#show{width:680px; margin:20px auto}

jquery:

当我们点击页面输入框下方那个笑脸时,触发调用qqface表情插件,简单几行就搞定。

 $(function(){
$('.emotion').qqFace({ assign:'saytext', //给输入框赋值
path:'face/' //表情图片存放的路径
});
...
});

当选择表情图片后,输入框中会插入一段如[em_5]之类的代码,代表插入的表情图片,实际应用中,点提交按钮后应该将这段表情代码连同其他内容插入到数据表中。而在页面显示的时候,我们应该将表情代码替换成真正的图片显示在页面上。下面的代码是插入表情图片后,点击提交按钮,使用javascript自定义函数将表情代码替换并显示:

 $(function(){
...
$(".sub_btn").click(function(){
var str = $("#saytext").val();
$("#show").html(replace_em(str));
});
});
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="face/$1.gif" border="0" />');
return str;
}

下面着重介绍下在nodejs+express4中的应用:

步骤如下:

1:加入引用表情的span

         <div class="send-out">
<span class="emotion" id="emotion"><img class="head_picture" src="/images/r-middle-pic07.png">表情</span>
<input class="send-text" id="Y_iSend_Input" type="text" maxlength="100" value="">
<input id="Y_iSend_Bt" class="out_text" onclick="CHAT.submit();" type="button" value="发送"/>
</div>

2:加入头文件并调用jquery

 <script type="text/javascript" src="/js/jquery.qqFace.js"></script>
$(function(){
$('.emotion').qqFace({
assign:'Y_iSend_Input', //给输入框赋值
path:'/face/' //表情图片存放的路径
});
});

3:用正则替换输入的[]表情

w.CHAT={
replace_em: function (str) {
str = str.replace(/\</g, '<;');
str = str.replace(/\>/g, '>;');
str = str.replace(/\n/g, '<;br/>;');
str = str.replace(/\[em_([0-9]*)\]/g, '<img src="/face/$1.gif" border="0" />');
return str;
}, //提交聊天消息内容
submit: function () { var str = $("#Y_iSend_Input").val(); $("#Y_iSend_Input").val(CHAT.replace_em(str)); var message_text = d.getElementById("Y_iSend_Input").value;
}
}

4:显示

nodejs聊天室,浅析。

 

经典qq表情插件(html+nodejs应用)的更多相关文章

  1. 一款基于jQuery的QQ表情插件

    我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您 ...

  2. 亲手用模块化方式写一个jquery QQ表情插件。

    在回复或是评论的时候,很多时间都需要有回复表情的功能,然后而需要插入QQ表情可以是最常见的. 插件也写多很多个了,这次写插件就下了一个决定.就是使用模块化来开发. 最后在我的源代码中有这样子一段: v ...

  3. 腾讯QQ表情为什么如此成功呢

    本人为原创作品:e良师益友 ,转载是并且注明 e良师益友网导读:腾讯开发的QQ表情功能给中国人的聊天增添一抹幽默,很多时候图片表情比话语更好的表达我们的意思,翻开你的聊天记录就会发现夹杂这很多不同的表 ...

  4. WPF 微信 MVVM 【续】发送部分QQ表情

    今天主要记录的就是发送QQ表情, WPF 微信 MVVM里写了,后期为了发送QQ表情,需要把TextBox替换为RichTextBox,接下来就说说替换的过程. 一.支持Binding的RichTex ...

  5. QQ表情的发送与接收

    我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...

  6. QQ表情动图,增加写博客的乐趣

    QQ表情动图,增加写博客的乐趣 body{margin:0px;}

  7. 【Discuz】关闭QQ互联插件提示信息:系统繁忙,请稍后再试

    版本:X3.2.20160601 提示信息 系统繁忙,请稍后再试 解决方案 Step1.删除QQ互联插件目录 网站的根目录\source\plugin\qqconnect Step2.上传原始QQ互联 ...

  8. js从0开始构思表情插件

    前言: 由于公司开发项目需要用到表情插件,在网上百度了好久,很多表情插件,都是需要引用好多js文件,也没有现成的demo可以使用,还有一些插件是引用好多图片,每一个表情都要重新请求一下.为了这样一个功 ...

  9. 消除QQ表情小游戏

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. JVM系列2:垃圾收集器与内存分配策略

    垃圾收集是一个很大话题,本文也只是看了深入理解Java虚拟机总结了下垃圾收集的知识. 首先按照惯例,先上思维导图: 垃圾收集简而言之就是JVM帮我们清理掉内存区域不需要的数据.它主要负责清理堆中实例对 ...

  2. SSM商城项目(十)

    1.   学习计划 1.使用freemarker实现网页静态化 a)Freemarker的使用方法 b)Freemarker模板的语法 c)Freemarker整合springmvc 2.Active ...

  3. java项目测试或者不使用request,如何获取webroot路径

    1.使用jdk中的方法,然后根据项目编译后的文件存在的位置,获取到classes目录,然后向上级查询获取String path = EngineTest.class.getResource(" ...

  4. 【python深入】dict和list实现排序:sorted()和lambda的使用

    Python中经常需要对dict中的key值或者value值进行排序,可以通过sorted方法和lambda结合使用,接下来就是sorted()和lambda 一.sorted()和lambda so ...

  5. pythone函数基础(9)操作数据库连接

    #操作数据库连接import pymysqlconn = pymysql.connect(host='118.24.3.40',user='jxz', password='123456',port=3 ...

  6. 4412 uboot启动分析

    感谢sea1105, https://blog.csdn.net/sea1105/article/details/52142772 在学习过程中,由于tiny4412资料太过于少,因此参考210的视屏 ...

  7. Windows7 VS2015 下编译 Python3.6.6

    本机环境: 1.win7 64 旗舰版 2.Qt 5.11.2(MSVC 2015,32 bit) 3.到目前为止,python官方2018-10-20更新,Python 3.6.7: 1.下载合适的 ...

  8. boost asio 学习(六) 定时器

    http://www.gamedev.net/blog/950/entry-2249317-a-guide-to-getting- started-with-boostasio?pg=7 6 定时器 ...

  9. python 用文本来提供输入信息的模板,不用每次都手动粘贴了

    #下面这一段用一个txt来保存input的信息来模拟input.最后提交代码时候删除这一段即可. a9999=open('1.txt','r') def input(): return a9999.r ...

  10. linux 查看信息-磁盘分区&网络

    磁盘和分区 1.查看挂接的分区状态 2.查看所有交换分区 3.查看启动时IDE设备检测状况 网络 1.查看网络接口属性 2.查看防火墙设置 3.查看路由表 4.查看所有监听端口 5.查看所有已经建立的 ...