我们在QQ聊天或者发表评论、微博时，会有一个允许加入表情的功能，点击表情按钮，会弹出一系列表情小图片，选中某个表情图片即可发表的丰富的含表情的内容。今天和大家分享一款基于jQuery的QQ表情插件，您可以轻松将其应用到你的项目中。
HTML
首先在html页面的head中引入jQuery库文件和QQ表情插件jquery.qqFace.js文件。
|
1 |
<span class="html__tag_start" style="color:navy;font-weight:bold;"><script</span> <span class="html__attr_name" style="color:green;">type</span>=<span class="html__attr_value" style="color:maroon;">"text/javascript"</span> <span class="html__attr_name" style="color:green;">src</span>=<span class="html__attr_value" style="color:maroon;">"jquery-1.7.2.min.js"</span><span class="html__tag_start" style="color:navy;font-weight:bold;">></span><span class="html__tag_end" style="color:navy;"></script></span> <span class="html__tag_start" style="color:navy;font-weight:bold;"><script</span> <span class="html__attr_name" style="color:green;">type</span>=<span class="html__attr_value" style="color:maroon;">"text/javascript"</span> <span class="html__attr_name" style="color:green;">src</span>=<span class="html__attr_value" style="color:maroon;">"jquery.qqFace.js"</span><span class="html__tag_start" style="color:navy;font-weight:bold;">></span><span class="html__tag_end" style="color:navy;"></script></span> |
然后在body中加入以下html代码：
|
1 2 3 4 5 |
<span class="html__tag_start" style="color:navy;font-weight:bold;"><div</span> <span class="html__attr_name" style="color:green;">id</span>=<span class="html__attr_value" style="color:maroon;">"show"</span><span class="html__tag_start" style="color:navy;font-weight:bold;">></span><span class="html__tag_end" style="color:navy;"></div></span> <span class="html__tag_start" style="color:navy;font-weight:bold;"><div</span> <span class="html__attr_name" style="color:green;">class</span>=<span class="html__attr_value" style="color:maroon;">"comment"</span><span class="html__tag_start" style="color:navy;font-weight:bold;">></span> <span class="html__tag_start" style="color:navy;font-weight:bold;"><div</span> <span class="html__attr_name" style="color:green;">class</span>=<span class="html__attr_value" style="color:maroon;">"com_form"</span><span class="html__tag_start" style="color:navy;font-weight:bold;">></span> <span class="html__tag_start" style="color:navy;font-weight:bold;"><textarea</span> <span class="html__attr_name" style="color:green;">class</span>=<span class="html__attr_value" style="color:maroon;">"input"</span> <span class="html__attr_name" style="color:green;">id</span>=<span class="html__attr_value" style="color:maroon;">"saytext"</span> <span class="html__attr_name" style="color:green;">name</span>=<span class="html__attr_value" style="color:maroon;">"saytext"</span><span class="html__tag_start" style="color:navy;font-weight:bold;">></span><span class="html__tag_end" style="color:navy;"></textarea></span> <span class="html__tag_start" style="color:navy;font-weight:bold;"><p</span><span class="html__tag_start" style="color:navy;font-weight:bold;">></span><span class="html__tag_start" style="color:navy;font-weight:bold;"><span</span> <span class="html__attr_name" style="color:green;">class</span>=<span class="html__attr_value" style="color:maroon;">"emotion"</span><span class="html__tag_start" style="color:navy;font-weight:bold;">></span>表情<span class="html__tag_end" style="color:navy;"></span></span><span class="html__tag_start" style="color:navy;font-weight:bold;"><input</span> <span class="html__attr_name" style="color:green;">type</span>=<span class="html__attr_value" style="color:maroon;">"button"</span> <span class="html__attr_name" style="color:green;">class</span>=<span class="html__attr_value" style="color:maroon;">"sub_btn"</span> <span class="html__attr_name" style="color:green;">value</span>=<span class="html__attr_value" style="color:maroon;">"提交"</span><span class="html__tag_start" style="color:navy;font-weight:bold;">></span><span class="html__tag_end" style="color:navy;"></p></span> <span class="html__tag_end" style="color:navy;"></div></span> <span class="html__tag_end" style="color:navy;"></div></span> |
页面中有一个输入框，用来输入要发表的内容，还有一个表情按钮，点击此按钮可以调用表情图片，完了就可以点击“提交”按钮发布带表情的内容了。
CSS
我们用CSS来美化页面，关键是表情按钮图片span.emotion的鼠标滑上与移开效果，以及调用表情插件后，显示的表情.qqFace面板效果，请看代码:
|
1 |
<span class="css__class" style="color:#CC0066;font-weight:bold;">.comment</span>{<span class="css__property" style="color:#330066;">width:</span><span class="css__number" style="color:red;">680px</span>; <span class="css__property" style="color:#330066;">margin:</span><span class="css__number" style="color:red;">20px</span> <span class="css__value" style="color:#3366FF;">auto</span>; <span class="css__property" style="color:#330066;">position:</span><span class="css__value" style="color:#3366FF;">relative</span>} <span class="css__class" style="color:#CC0066;font-weight:bold;">.comment</span> <span class="css__element" style="color:purple;font-weight:bold;">h3</span>{<span class="css__property" style="color:#330066;">height:</span><span class="css__number" style="color:red;">28px</span>; <span class="css__property" style="color:#330066;">line-height:</span><span class="css__number" style="color:red;">28px</span>} <span class="css__class" style="color:#CC0066;font-weight:bold;">.com_form</span>{<span class="css__property" style="color:#330066;">width:</span><span class="css__number" style="color:red;">100%</span>; <span class="css__property" style="color:#330066;">position:</span><span class="css__value" style="color:#3366FF;">relative</span>} <span class="css__class" style="color:#CC0066;font-weight:bold;">.input</span>{<span class="css__property" style="color:#330066;">width:</span><span class="css__number" style="color:red;">99%</span>; <span class="css__property" style="color:#330066;">height:</span><span class="css__number" style="color:red;">60px</span>; <span class="css__property" style="color:#330066;">border:</span><span class="css__number" style="color:red;">1px</span> <span class="css__value" style="color:#3366FF;">solid</span> <span class="css__color" style="color:green;">#ccc</span>} <span class="css__class" style="color:#CC0066;font-weight:bold;">.com_form</span> <span class="css__element" style="color:purple;font-weight:bold;">p</span>{<span class="css__property" style="color:#330066;">height:</span><span class="css__number" style="color:red;">28px</span>; <span class="css__property" style="color:#330066;">line-height:</span><span class="css__number" style="color:red;">28px</span>; <span class="css__property" style="color:#330066;">position:</span><span class="css__value" style="color:#3366FF;">relative</span>} <span class="css__element" style="color:purple;font-weight:bold;">span</span><span class="css__class" style="color:#CC0066;font-weight:bold;">.emotion</span>{<span class="css__property" style="color:#330066;">width:</span><span class="css__number" style="color:red;">42px</span>; <span class="css__property" style="color:#330066;">height:</span><span class="css__number" style="color:red;">20px</span>; <span class="css__property" style="color:#330066;">background:</span><span class="css__url" style="color:fuchsia;">url(</span>icon.gif<span class="css__url" style="color:fuchsia;">)</span> <span class="css__value" style="color:#3366FF;">no-repeat</span> <span class="css__number" style="color:red;">2px</span> <span class="css__number" style="color:red;">2px</span>; <span class="css__property" style="color:#330066;">padding-left:</span><span class="css__number" style="color:red;">20px</span>; <span class="css__property" style="color:#330066;">cursor:</span><span class="css__value" style="color:#3366FF;">pointer</span>} <span class="css__element" style="color:purple;font-weight:bold;">span</span><span class="css__class" style="color:#CC0066;font-weight:bold;">.emotion</span><span class="css__pseudo" style="color:#CC9900;">:hover</span>{<span class="css__property" style="color:#330066;">background-position:</span><span class="css__number" style="color:red;">2px</span> -<span class="css__number" style="color:red;">28px</span>} <span class="css__class" style="color:#CC0066;font-weight:bold;">.qqFace</span>{<span class="css__property" style="color:#330066;">margin-top:</span><span class="css__number" style="color:red;">4px</span>;<span class="css__property" style="color:#330066;">background:</span><span class="css__color" style="color:green;">#fff</span>;<span class="css__property" style="color:#330066;">padding:</span><span class="css__number" style="color:red;">2px</span>;<span class="css__property" style="color:#330066;">border:</span><span class="css__number" style="color:red;">1px</span> <span class="css__color" style="color:green;">#dfe6f6</span> <span class="css__value" style="color:#3366FF;">solid</span>;} <span class="css__class" style="color:#CC0066;font-weight:bold;">.qqFace</span> <span class="css__element" style="color:purple;font-weight:bold;">table</span> <span class="css__element" style="color:purple;font-weight:bold;">td</span>{<span class="css__property" style="color:#330066;">padding:</span><span class="css__number" style="color:red;">0px</span>;} <span class="css__class" style="color:#CC0066;font-weight:bold;">.qqFace</span> <span class="css__element" style="color:purple;font-weight:bold;">table</span> <span class="css__element" style="color:purple;font-weight:bold;">td</span> <span class="css__element" style="color:purple;font-weight:bold;">img</span>{<span class="css__property" style="color:#330066;">cursor:</span><span class="css__value" style="color:#3366FF;">pointer</span>;<span class="css__property" style="color:#330066;">border:</span><span class="css__number" style="color:red;">1px</span> <span class="css__color" style="color:green;">#fff</span> <span class="css__value" style="color:#3366FF;">solid</span>;} <span class="css__class" style="color:#CC0066;font-weight:bold;">.qqFace</span> <span class="css__element" style="color:purple;font-weight:bold;">table</span> <span class="css__element" style="color:purple;font-weight:bold;">td</span> <span class="css__element" style="color:purple;font-weight:bold;">img</span><span class="css__pseudo" style="color:#CC9900;">:hover</span>{<span class="css__property" style="color:#330066;">border:</span><span class="css__number" style="color:red;">1px</span> <span class="css__color" style="color:green;">#0066cc</span> <span class="css__value" style="color:#3366FF;">solid</span>;} <span class="css__id" style="color:#CD5C5C;font-weight:bold;">#show</span>{<span class="css__property" style="color:#330066;">width:</span><span class="css__number" style="color:red;">680px</span>; <span class="css__property" style="color:#330066;">margin:</span><span class="css__number" style="color:red;">20px</span> <span class="css__value" style="color:#3366FF;">auto</span>} |
我们在domo中还用CSS3设置了提交按钮的样式，其代码在本文中不做解释，您可以下载代码了解下。
jQuery
当我们点击页面输入框下方那个笑脸时，触发调用qqface表情插件，简单几行就搞定。
|
1 2 3 4 5 6 |
$(<span class="js__operator" style="color:#4169E1;font-weight:bold;">function</span>()<span class="js__brace" style="color:red;font-weight:bold;">{</span> $(<span class="js__string" style="color:teal;">'.emotion'</span>).qqFace(<span class="js__brace" style="color:red;font-weight:bold;">{</span> assign:<span class="js__string" style="color:teal;">'saytext'</span>, <span class="js__sl_comment" style="color:green;">//给输入框赋值</span> path:<span class="js__string" style="color:teal;">'face/'</span> <span class="js__sl_comment" style="color:green;">//表情图片存放的路径</span> <span class="js__brace" style="color:red;font-weight:bold;">}</span>); ... <span class="js__brace" style="color:red;font-weight:bold;">}</span>); |
当选择表情图片后，输入框中会插入一段如[em_5]之类的代码，代表插入的表情图片，实际应用中，点提交按钮后应该将这段表情代码连同其他内容插入到数据表中。而在页面显示的时候，我们应该将表情代码替换成真正的图片显示在页面上。下面的代码是插入表情图片后，点击提交按钮，使用javascript自定义函数将表情代码替换并显示：
|
1 2 3 4 5 6 7 8 9 10 11 |
$(<span class="js__operator" style="color:#4169E1;font-weight:bold;">function</span>()<span class="js__brace" style="color:red;font-weight:bold;">{</span> ... $(<span class="js__string" style="color:teal;">".sub_btn"</span>).click(<span class="js__operator" style="color:#4169E1;font-weight:bold;">function</span>()<span class="js__brace" style="color:red;font-weight:bold;">{</span> <span class="js__statement" style="color:navy;font-weight:bold;">var</span> str = $(<span class="js__string" style="color:teal;">"#saytext"</span>).val(); $(<span class="js__string" style="color:teal;">"#show"</span>).html(replace_em(str)); <span class="js__brace" style="color:red;font-weight:bold;">}</span>); <span class="js__brace" style="color:red;font-weight:bold;">}</span>); <span class="js__operator" style="color:#4169E1;font-weight:bold;">function</span> replace_em(str)<span class="js__brace" style="color:red;font-weight:bold;">{</span> str = str.replace(<span class="js__reg_exp" style="color:maroon;">/\</g</span>,<span class="js__string" style="color:teal;">'<；'</span>); str = str.replace(<span class="js__reg_exp" style="color:maroon;">/\>/g</span>,<span class="js__string" style="color:teal;">'>；'</span>); str = str.replace(<span class="js__reg_exp" style="color:maroon;">/\n/g</span>,<span class="js__string" style="color:teal;">'<；br/>；'</span>); str = str.replace(<span class="js__reg_exp" style="color:maroon;">/\[em_([0-9]*)\]/g</span>,<span class="js__string" style="color:teal;">'<img src="face/$1.gif" border="0" />'</span>); <span class="js__statement" style="color:navy;font-weight:bold;">return</span> str; <span class="js__brace" style="color:red;font-weight:bold;">}</span> |
如果您想用PHP代码来正则替换表情图片的话，可以使用以下函数：
|
1 2 3 4 5 6 7 |
<span class="php__keyword" style="color:navy;font-weight:bold;">function</span> ubbReplace(<span class="php__keyword" style="color:navy;font-weight:bold;">$</span><span class="php__variable" style="color:#4040C2;">str</span>){ <span class="php__keyword" style="color:navy;font-weight:bold;">$</span><span class="php__variable" style="color:#4040C2;">str</span> = str_replace(<span class="php__string2" style="color:fuchsia;">">"</span>,<span class="php__string1" style="color:purple;">'<；'</span>,<span class="php__keyword" style="color:navy;font-weight:bold;">$</span><span class="php__variable" style="color:#4040C2;">str</span>); <span class="php__keyword" style="color:navy;font-weight:bold;">$</span><span class="php__variable" style="color:#4040C2;">str</span> = str_replace(<span class="php__string2" style="color:fuchsia;">">"</span>,<span class="php__string1" style="color:purple;">'>；'</span>,<span class="php__keyword" style="color:navy;font-weight:bold;">$</span><span class="php__variable" style="color:#4040C2;">str</span>); <span class="php__keyword" style="color:navy;font-weight:bold;">$</span><span class="php__variable" style="color:#4040C2;">str</span> = str_replace(<span class="php__string2" style="color:fuchsia;">"\n"</span>,<span class="php__string1" style="color:purple;">'>；br/>；'</span>,<span class="php__keyword" style="color:navy;font-weight:bold;">$</span><span class="php__variable" style="color:#4040C2;">str</span>); <span class="php__keyword" style="color:navy;font-weight:bold;">$</span><span class="php__variable" style="color:#4040C2;">str</span> = preg_replace(<span class="php__string2" style="color:fuchsia;">"[\[em_([0-9]*)\]]"</span>,<span class="php__string2" style="color:fuchsia;">">img src=\"face/$1.gif\" />"</span>,<span class="php__keyword" style="color:navy;font-weight:bold;">$</span><span class="php__variable" style="color:#4040C2;">str</span>); <span class="php__keyword" style="color:navy;font-weight:bold;">return</span> <span class="php__keyword" style="color:navy;font-weight:bold;">$</span><span class="php__variable" style="color:#4040C2;">str</span>; } |
好了，本文讲解到此，接下来helloweb.com将会结合实际应用，推出基于PHP+Mysal+jQuery实现的评论系统系列文章，敬请关注。
声明：本文为原创文章，helloweba.com和作者拥有版权，如需转载，请注明来源于helloweba.com并保留原文链接：http://www.helloweba.com/view-blog-202.html
