qq表情插件的使用

引入js文件

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

js代码块

$(function(){
	$('.emotion').qqFace({
		id : 'facebox', //表情盒子的ID
		assign:'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;
}

css代码块

.comment{width:680px; margin:20px auto; position:relative}
.comment h3{height:28px; line-height:28px}
/* 所有内容的显示区 */
.com_form{width:100%;position:relative;}
.input{width:99%; height:60px; border:1px solid #ccc}
.com_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;
}

body文本

<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>