jquery表情 juqery qq表情适用jQuery QQ表情插件jquery.qqFace

解决jquery 1.9.0 以上版本 jquery去掉了对 $.browser 的支持,采用$.support 来判断浏览器类型。导致之前的很多插件报错的问题

选择后的表情转义为和QQ表情一样的汉字，增加使用体感

自行去源文件地址：http://www.jq22.com/jquery-info365下载源码，本文也是参考实现

使用方法

首先在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>

我们用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}

我们点击页面输入框下方那个笑脸时，触发调用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)); });
});
//qqFace转换为img标签
function replace_em(str){str = str.replace(/\</g,'<');str = str.replace(/\>/g,'>');str = str.replace(/\n/g,'<br/>');str = str.replace(/\[([\u4e00-\u9fa5]*)\]/g,function($1){var img ="";$.each($1.match(/([\u4E00-\u9FA5]*)/g), function(index1, item1){if (item1 != "") {$.each(qqFaceArr, function(index2, item2){if (item2 == item1) {img = '<img src="/images/qqFace/'+(index2 + 1)+'.gif" border="0" />';}});}});return img;});return str;
}

修改过的jquery.qqFace.js代码：

//防止高版本jquery废弃$.browser后报错：Cannot read property 'msie' of undefined
jQuery.browser={};(function(){jQuery.browser.msie=false; jQuery.browser.version=0;if(navigator.userAgent.match(/MSIE ([0-9]+)./)){ jQuery.browser.msie=true;jQuery.browser.version=RegExp.$1;}})();
//根据不同应用替换为不同的数据 自定义添加
var qqFaceArr=['微笑','撇嘴','色','发呆','大哭','害羞','闭嘴','睡','流泪','尴尬','发怒','调皮','呲牙','惊讶','难过','冷汗','抓狂','吐','偷笑','可爱','白眼','傲慢','饥饿','困','惊恐','流汗','憨笑','大兵','奋斗','咒骂','疑问','嘘','晕','疯了','衰','敲打','再见','擦汗','抠鼻','糗大了','坏笑','左哼哼','右哼哼','哈欠','鄙视','委屈','快哭了','阴险','亲亲','吓','可怜','拥抱','月亮','太阳','炸弹','骷髅','菜刀','猪头','西瓜','咖啡','饭','爱心','强','弱','握手','胜利','抱拳','勾引','OK','NO','玫瑰','凋谢','示爱','爱情','飞吻'];
// QQ表情插件
(function($){  $.fn.qqFace = function(options){var defaults = {id : 'facebox',path : 'face/',assign : 'content',tip : ''//默认 em_};var option = $.extend(defaults, options);var assign = $('#'+option.assign);var id = option.id;var path = option.path;var tip = option.tip;if(assign.length<=0){alert('缺少表情赋值对象。');return false;}$(this).click(function(e){var strFace, labFace;if($('#'+id).length<=0){strFace = '<div id="'+id+'" style="position:absolute;display:none;z-index:1000;" class="qqFace">' +'<table border="0" cellspacing="0" cellpadding="0"><tr>';for(var i=1; i<=75; i++){//labFace = '['+tip+i+']';//默认labFace = '['+qqFaceArr[i-1]+']';//获取自定义名称strFace += '<td><img src="'+path+i+'.gif" οnclick="$(\'#'+option.assign+'\').setCaret();$(\'#'+option.assign+'\').insertAtCaret(\'' + labFace + '\');" /></td>';if( i % 15 == 0 ) strFace += '</tr><tr>';}strFace += '</tr></table></div>';}$(this).parent().append(strFace);var offset = $(this).position();var top = offset.top + $(this).outerHeight();$('#'+id).css('top',top);$('#'+id).css('left',offset.left);$('#'+id).show();e.stopPropagation();});$(document).click(function(){$('#'+id).hide();$('#'+id).remove();});};})(jQuery);jQuery.extend({
unselectContents: function(){ if(window.getSelection) window.getSelection().removeAllRanges(); else if(document.selection) document.selection.empty(); }
});
jQuery.fn.extend({ selectContents: function(){ $(this).each(function(i){ var node = this; var selection, range, doc, win; if ((doc = node.ownerDocument) && (win = doc.defaultView) && typeof win.getSelection != 'undefined' && typeof doc.createRange != 'undefined' && (selection = window.getSelection()) && typeof selection.removeAllRanges != 'undefined'){ range = doc.createRange(); range.selectNode(node); if(i == 0){ selection.removeAllRanges(); } selection.addRange(range); } else if (document.body && typeof document.body.createTextRange != 'undefined' && (range = document.body.createTextRange())){ range.moveToElementText(node); range.select(); } }); }, setCaret: function(){ if(!$.browser.msie) return; var initSetCaret = function(){ var textObj = $(this).get(0); textObj.caretPos = document.selection.createRange().duplicate(); }; $(this).click(initSetCaret).select(initSetCaret).keyup(initSetCaret); }, insertAtCaret: function(textFeildValue){ var textObj = $(this).get(0); if(document.all && textObj.createTextRange && textObj.caretPos){ var caretPos=textObj.caretPos; caretPos.text = caretPos.text.charAt(caretPos.text.length-1) == '' ? textFeildValue+'' : textFeildValue; } else if(textObj.setSelectionRange){ var rangeStart=textObj.selectionStart; var rangeEnd=textObj.selectionEnd; var tempStr1=textObj.value.substring(0,rangeStart); var tempStr2=textObj.value.substring(rangeEnd); textObj.value=tempStr1+textFeildValue+tempStr2; textObj.focus(); var len=textFeildValue.length; textObj.setSelectionRange(rangeStart+len,rangeStart+len); textObj.blur(); }else{ textObj.value+=textFeildValue; } }
});

jquery表情 juqery qq表情适用jQuery QQ表情插件jquery.qqFace相关推荐

android百度输入法表情符号,分析Android 搜狗输入法在微信和QQ中发送图片和表情...
好记性不如烂笔头.生活中多做笔记,不仅可以方便自己,还可以方便他人. 背景有没有发现,有时候表情或图片的交流更能让气氛更愉悦.斗图,成了群里的日常小事,然而,当你没有图可斗的时候就尴尬了.最近,搜狗 ...
分析Android 搜狗输入法在微信和QQ中发送图片和表情
好记性不如烂笔头.生活中多做笔记,不仅可以方便自己,还可以方便他人. 背景有没有发现,有时候表情或图片的交流更能让气氛更愉悦.斗图,成了群里的日常小事,然而,当你没有图可斗的时候就尴尬了.最近,搜狗 ...
php 网站在线客服插件,jquery实现漂浮在网页右侧的qq在线客服插件示例_jquery
很实用的一款QQ在线客服代码,点击QQ图标,可直接与客服对话.具体实现代码如下: html页面: jquery实现qq客服 css样式: /*默认蓝色*/ .SonlineBox{ width:162 ...
微信上线新表情且微信可以直接向QQ转账啦！
1月14日,有网友发现,微信悄悄地上架了一堆新的系统表情包.平时在微博上流行的"吃瓜""狗头"等表情,微信里都上新了类似的表情包.目前这些新表情包只出现在部分用 ...
金馆长qq表情包●绿色版【金馆长表情252个】
金馆长qq表情包绿色版 [金馆长表情252个] 授权方式:免费软件界面语言:简体中文软件大小:7.60MB 所属专题:网络聊天运行环境:Win2K,WinXP,Win2003,Vista,Wi ...
Mac QQ 1.1.0 : qq表情插件失效解决方案
上周腾讯发布QQ For Mac 1.1.0新版本,今天突然发现表情插件不能用了,重装了SIMBL和QQFaceManager也不行,前段时间写CodeSigner的直觉告诉我先看Info.plist ...
biu爱心html,biu爱心给你表情包 - biu爱心给你微信表情包 - biu爱心给你QQ表情包 - 发表情 fabiaoqing.com...
biu,爱心给你 - 爱心给你全给你 _爱心表情好多爱心都给你 - 爱心给你全给你 _爱心表情给你爱心 - 爱心给你全给你 _爱心表情爱心 - 爱心给你全给你 _爱心表情给你我的一颗心 ...
怎么设置qq信息同步服务器,QQ输入法如何设置网络同步
QQ输入法设置网络同步的方法如下: 网络同步为QQ输入法的特色功能,只需要将QQ号与输入法软件绑定,QQ输入法将您的用户词库(即打字习惯)或者配置(包括设置,自定义短语,自定义标点,固定字序)保存到服 ...
拖拽插件jquery.dad.js
带删除功能: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

jquery表情 juqery qq表情适用jQuery QQ表情插件jquery.qqFace

jquery表情 juqery qq表情适用jQuery QQ表情插件jquery.qqFace相关推荐

最新文章

热门文章