qq表情插件的使用

插件的使用"/>

qq表情插件的使用

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qqFace.js"></script>

$(function(){$('.emotion').qqFace({id : 'facebox', //表情盒子的IDassign:'saytext', //给输入框赋值path:'face/'	//表情存放的路径});// 提交按钮触发的事件$(".sub_btn").click(function(){// 获取输入的textarea里面的内容var str = $("#saytext").val();// 提交后展示区的内容$("#show").html(replace_em(str));});
});
//查看结果
function replace_em(str){// 替代小于号str = str.replace(/\</g,'<');// 替代大于号str = str.replace(/\>/g,'>');// 换行str = str.replace(/\n/g,'<br/>');str = str.replace(/\[em_([0-9]*)\]/g,'<img src="face/$1.gif" border="0"/>');return str;
}

ment{width:680px; margin:20px auto; position:relative}
ment h3{height:28px; line-height:28px}
/* 所有内容的显示区 */
_form{width:100%;position:relative;}
.input{width:99%; height:60px; border:1px solid #ccc}
_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}
/* 设置提交按钮属性 */
.sub_btn {position:absolute; right:0px; top:0;margin: 0 2px;cursor: pointer;text-align: center;padding: .5em 2em .55em;
}
/* 鼠标悬浮在提交按钮上时的显示属性 */
.sub_btn:hover {background: #538018;
}

<div id="main">
<!-- 显示评论结果的地方 --><div id="show"></div><div class="comment"><div class="com_form"><!-- 评论输入框 --><textarea class="input" id="saytext" name="saytext"></textarea><p><input type="button" class="sub_btn" value="提交"><span class="emotion">表情</span></p></div></div>    
</div>