emoji表情的js制作和方法

调用了一个朋友些的js库，准备有时间自己实现一遍。更改了表情解析的代码，有时间把表情生成那一块也改掉

/*
 @ 文本框插入表情插件
 @ 作者：水墨寒 Smohan.net
 @ 日期：2013年1月28日
*/

	$.fn.smohanfacebox = function(options) {
		var defaults = {
		Event : "click", //响应事件		
		divid : "Smohan_FaceBox", //表单ID（textarea外层ID）
		textid : "TextArea" //文本框ID
		};
		var options = $.extend(defaults,options);
		var $btn = $(this);//取得触发事件的ID
		
		//创建表情框
		var faceimg = '';
	    for(i=0; i < 60; i++){  //通过循环创建60个表情，可扩展
		 		faceimg+='<li><a href="javascript:void(0)"><img src="/frontEnd/images/face/'+(i+1)+'.gif" face="&' + (i+1) + ',"/></a></li>';
		 	};
		$("#"+options.divid).prepend("<div id='SmohanFaceBox'><span class='Corner'></span><div class='Content'><h3><span>常用表情</span><a class='close' title='关闭'></a></h3><ul>"+faceimg+"</ul></div></div>");
	     $('#SmohanFaceBox').css("display",'none');//创建完成后先将其隐藏
		//创建表情框结束
		
		var $facepic = $("#SmohanFaceBox li img");
		//BTN触发事件，显示或隐藏表情层
		$btn.live(options.Event,function(e) {
			if($('#SmohanFaceBox').is(":hidden")){
			$('#SmohanFaceBox').show(360);
			$btn.addClass('in');
			}else{
			$('#SmohanFaceBox').hide(360);
			$btn.removeClass('in');
				}
			});
		//插入表情
		$facepic.die().click(function(){
		     $('#SmohanFaceBox').hide(360);
			 //$("#"+options.textid).focus();
			 //$("#"+options.textid).val($("#"+options.textid).val()+$(this).attr("face"));
			 $("#"+options.textid).die().insertContent($(this).attr("face"));
			 $btn.removeClass('in');
			});			
		//关闭表情层
		$('#SmohanFaceBox h3 a.close').click(function() {
			$('#SmohanFaceBox').hide(360);
			 $btn.removeClass('in');
			});	
		//当鼠标移开时，隐藏表情层，如果不需要，可注释掉
		 $('#SmohanFaceBox').mouseleave(function(){
			 $('#SmohanFaceBox').hide(560);
			 $btn.removeClass('in');
			 });	

  };  
  
  // 【漫画】 光标定位插件
	$.fn.extend({  
		insertContent : function(myValue, t) {  
			var $t = $(this)[0];  
			if (document.selection) {  
				this.focus();  
				var sel = document.selection.createRange();  
				sel.text = myValue;  
				this.focus();  
				sel.moveStart('character', -l);  
				var wee = sel.text.length;  
				if (arguments.length == 2) {  
				var l = $t.value.length;  
				sel.moveEnd("character", wee + t);  
				t <= 0 ? sel.moveStart("character", wee - 2 * t	- myValue.length) : sel.moveStart("character", wee - t - myValue.length);  
				sel.select();  
				}  
			} else if ($t.selectionStart || $t.selectionStart == '0') {  
				var startPos = $t.selectionStart;  
				var endPos = $t.selectionEnd;  
				var scrollTop = $t.scrollTop;  
				$t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos,$t.value.length);  
				this.focus();  
				$t.selectionStart = startPos + myValue.length;  
				$t.selectionEnd = startPos + myValue.length;  
				$t.scrollTop = scrollTop;  
				if (arguments.length == 2) { 
					$t.setSelectionRange(startPos - t,$t.selectionEnd + t);  
					this.focus(); 
				}  
			} else {                              
				this.value += myValue;                              
				this.focus();  
			}  
		}  
	});
 
 //表情解析
$.extend({
	replaceface : function(faces){
		//for(i=0;i<60;i++){ 源代码
			//faces=faces.replace('<emt>'+ (i+1) +'</emt>','<img src="/frontEnd/images/face/'+(i+1)+'.gif">');

		//}
		return faces.replace(/\&([0-9]+)\,/g, function (str,$0) { //修改后代码
			return '<img src="/frontEnd/images/face/'+ $0 +'.gif">';
		});
		 //$(this).html(faces);
			//return faces;
		 }
	});