Thinkphp的评论/留言框中表情添加

前提：/Public/Biaoqing/Face/     下存表情图片：eg:1.gif。默认有75个表情，每行15个

1.Html：

加载：

<script type="text/javascript" src="__PUBLIC__/Js/jquery.js"></script><!-- 测试用的jquery1.3.2  -->

<link href='__PUBLIC__/Biaoqing/Css/say.css' type='text/css' rel='stylesheet'/>

触发：

<textarea name="content"  id="textareaComment" placeholder="欢迎对文章中进行点评，具备参考价值的评论对别人更有帮助。"></textarea>

<i class='iconfont-9 icon-biaoqing emotion' id="face_0" οnclick="emotion(this)"></i>

2.Jquery：

function emotion(_obj) {
    var assign='textareaComment'; //给这个控件赋值
    var path='../Public/Biaoqing/Face/'; //表情存放的路径
    var id='facebox'; //表情盒子的ID
    var tip= 'em_';
    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+']';
        strFace += '<td><img src="'+path+i+'.gif" οnclick="instBq(\''+assign+'\',\''+labFace+'\')" /></td>';
       if( i % 15 == 0 ) strFace += '</tr><tr>';
     }
    strFace += '</tr></table></div>';
    $(_obj).parent().append(strFace);
    var offset = $(_obj).position();
    var top = offset.top + $(_obj).outerHeight();
    $('#'+id).css('top',top);
    $('#'+id).css('left',offset.left);
    $('#'+id).toggle();
  }
}
/*插入表情*/
function instBq(_id,_bq){
    var obj = document.getElementById(_id);
    obj.focus();  
    var leng=obj.value.length;
    var charvalue=_bq;
    if(typeof document.selection !="undefined")   //ie
    {
      var r =document.selection.createRange();   
      r.text   =   charvalue;   
    }
    else //firefox
    {
      obj.value=obj.value.substr(0,obj.selectionStart)+ charvalue +obj.value.substring(obj.selectionStart,leng);
    } 
    var id='facebox'; //表情盒子的ID
    $('#'+id).hide();
    $('#'+id).remove();
   
 }

3.Css（say.css）：

    .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;}


    span.emotion {
       background: url("../images/icon.gif") no-repeat scroll 2px 0 transparent;
       cursor: pointer;
       height: 20px;
       padding-left: 24px;
       width: 42px;
   }
   span.emotion:hover{
      background-position: 2px -30px;
  }
  .tbtnarea{margin:6px 0 0}
  .ly textarea,.ddreply textarea{border:1px solid #dddddd;resize: none}