第18款插件:qqface 基于jQuery的QQ表情插件

描述：QQ聊天或者发表评论、微博时，会有一个允许加入表情的功能，点击表情按钮，会弹出一系列表情小图片，选中某个表情图片即可发表的丰富的含表情的内容。

兼容浏览器：IE6-9/Firefox/Google Chrome

官方链接：暂无查到

JS下载： http://ijquery.360sites.cn/js/jquery.qqFace.js

预览： http://ijquery.360sites.cn/demo/qqface

打包下载： http://ijquery.360sites.cn/demo/qqface.zip

参数说明：
id : 'facebox', //表情盒子的ID，但是我没有发现什么用途
assign:'saytext', //给那个控件赋值,一般是textarea
path:'face/',    //表情存放的路径
tip : 'em_'     //在文本框内显示的前缀
                    
图片展示：


JS引用代码：

1. <link href="css.css" type="text/css" rel="Stylesheet" />
   
2. <script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery-1.7.2.min.js"></script>
   
3. <script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery.qqFace.js"></script>
   
4. <script type="text/javascript">
   
5.         $(function(){
   
6.                 $('.emotion').qqFace({
   
7.                         assign:'saytext', //给那个控件赋值
   
8.                         path:'face/',        //表情存放的路径
   
9.                         tip : 'qq_'
   
10.                 });
    
11.                 //提交后显示表情
    
12.                 $(".sub_btn").click(function(){
    
13.                         var str = $("#saytext").val();
    
14.                         $("#show").html(replace_em(str));
    
15.                 });
    
16.         });
    
17.         //查看结果
    
18.         function replace_em(str){
    
19.                 str = str.replace(/\</g,'<');
    
20.                 str = str.replace(/\>/g,'>');
    
21.                 str = str.replace(/\n/g,'
    
22. ');
    
23.                 str = str.replace(/\[em_([0-9]*)\]/g,'<img src="face/$1.gif" border="0" />');
    
24.                 return str;
    
25.         }
    
26. </script>

复制代码

如果您想用PHP代码来正则替换表情图片的话，可以使用以下函数：

1. function ubbReplace($str){ 
   
2.     $str = str_replace(">",'<；',$str); 
   
3.     $str = str_replace(">",'>；',$str); 
   
4.     $str = str_replace("\n",'>；br/>；',$str); 
   
5.     $str = preg_replace("[\[em_([0-9]*)\]]",">img src=\"face/$1.gif\" />",$str); 
   
6.     return $str; 
   
7. }

复制代码

HTML代码：

1. <!--查看发布表情的结果-->
   
2.                 <div id="show"></div>
   
3.                 <!--表情盒子-->
   
4.                 <div class="comment">
   
5.                         <div class="com_form">
   
6.                                 <textarea class="input" id="saytext" name="saytext"></textarea>
   
7.                                 <p><input type="button" class="sub_btn" value="提交"><span class="emotion">表情</span></p>
   
8.                         </div>
   
9.                 </div>   

复制代码

CSS代码：

1. <link href="css.css" type="text/css" rel="Stylesheet" />

复制代码

即：

1. .comment{width:680px; margin:20px auto; position:relative}
   
2. .comment h3{height:28px; line-height:28px}
   
3. .com_form{width:100%; position:relative}
   
4. 
   
5. .input{width:99%; height:100px; border:1px solid #ccc}
   
6. .com_form p{height:28px; line-height:28px; position:relative}
   
7. span.emotion{width:42px; height:20px; background:url(face/icon.gif) no-repeat 2px 2px; padding-left:20px; cursor:pointer}
   
8. span.emotion:hover{background-position:2px -28px}
   
9. .qqFace{margin-top:4px;background:#fff;padding:2px;border:1px #dfe6f6 solid;}
   
10. .qqFace table td{padding:0px;}
    
11. .qqFace table td img{cursor:pointer;border:1px #fff solid;}
    
12. .qqFace table td img:hover{border:1px #0066cc solid;}
    
13. #show{width:680px; margin:20px auto}
    
14. 
    
15. /*按钮的CSS定义*/
    
16. .sub_btn {position:absolute; right:0px; top:0;display: inline-block;zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */*display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;font: 14px/100% Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.6);-webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);color: #e8f0de;border: solid 1px #538312;background: #64991e;background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));background: -moz-linear-gradient(top,  #7db72f,  #4e7d0e);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');}
    
17. 
    
18. .sub_btn:hover {background: #538018;background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));background: -moz-linear-gradient(top,  #6b9d28,  #436b0c);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');}

复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=18