在body中添加如下代码:
<textarea id="msgTxt" title="微博输入框" name="msgTxt" ></textarea>
<div id="sendBox"><input type="button" class="sendBtn" id="fabu" value="" /></div>
<div id="showPic" />
<div id="funBox"><a href="javascript:void(0);" class="insertFace">表情</a></div>
在style中添加如下代码:
#funBox a.insertFace
{
background-position: -170px -33px;
display: inline-block;
height: 16px;
padding-left: 18px;
}
在javascript中添加如下代码(使用jquery框架设计):
<script type="text/javascript">
$(function () {
//实现QQ表情的功能
var userFacesCn =['微笑','大笑','哭泣','再见','嘻嘻','招手','生气','牛'];
var userFaces =['pic_1','pic_2','pic_3','pic_4','pic_5','pic_6','pic_7','pic_8'];
$("[class=insertFace]").click(function () {
varheight = $(this).height();
var top = $(this).offset().top+height;
var left = $(this).offset().left;
$("<div id='Userfaces'></div>").appendTo("#funBox");
$("<div id='Userfaces'></div>").css({'top':top, 'left':left});
$.each(userFacesCn, function (index,value) {
$("<img src='${ctx}/pms/weibo/faces/"+userFaces[index]+ ".gif ' title="+ value + ">").css("cursor","pointer")
.appendTo("#Userfaces").click(function () {
$("#msgTxt").val($("#msgTxt").val()+ "["+ $(this).attr("title")+ "]");
});
});
//和上面的一样,如何判断一个用户是否单击了一个按钮
$("#Userfaces").mouseleave(function () {
$("#Userfaces").remove();
});
//摆放位置
$("#Userfaces").css("top", $(this).offset().top + $(this).height + "px").css("left", $(this).offset().left + "px");
});
});
</script>
现在我们的任务已经做了一大半了,但是你会发现现在只能选择头像然后在textarea中显示比如:[微笑] ,并没有显示头像呀。其实我们的头像显示在div id ="showPic" 区域中。
继续在javascript中添加如下代码:
$("#fabu").click(function(){
var weiboContent=$("#msgTxt").val();
//将中文字改变为英文的图片名
for(var i = 0; i < userFaces.length; i++){
var reg00 = new RegExp("\\["+userFacesCn[i]+"\\]",'g');
weiboContent = weiboContent.replace(reg00,"["+userFaces[i]+"]");
}
//对该数据进行处理
reg =/\[(\S{5})\]/g;
weiboContent = weiboContent.replace(reg,"<img src='${ctx}/pms/weibo/faces/$1.gif'></img>");
var re=/@(\S+)+(\s)?/g;
weiboContent=weiboContent.replace(re,'<a class="marked-name" href="javascript://" rel="weiboAtem-username" name="$1" >@$1</a>');
//现在来显示图片
$("#showPic").html(weiboContent);
});
效果如下:
我参考的源代码大家可以在: http://vdisk.weibo.com/s/gVbt3 下载