jQuery文本框表情插件

(function($) {
	$.fn.qemoji = function(options) {
		opts = $.extend({}, $.fn.qemoji.defaults, options);
		var textarea = $(this);
		var isFold = true;
		for (var i = 0; i < opts.emojis.length; i++) {
			$(opts.emojiBox).append(
					'<img title=\"' + opts.emojis[i].name + '\" src=\"'
							+ opts.src + '/' + opts.emojis[i].rel + '\" />');
		}
		$(opts.emojiBox).hide();
		$(opts.emojiBox).on('click', 'img', function() {
			insertAtCursor(textarea, '#' + $(this).attr('title') + '#');
		});
		$(opts.emojiBtn).on('click', function() {
			if (isFold) {
				isFold = false;
				$(opts.emojiBox).show(opts.animateTime);
				$(opts.emojiBtn).text('收起');
			} else {
				isFold = true;
				$(opts.emojiBox).hide(opts.animateTime);
				$(opts.emojiBtn).text('表情');
			}
		});
		return textarea;
	};
	var insertAtCursor = function(input, value) {
		var text = input.val();
		input.val(text + value);
		input.focus();
		text = null;
	};
	$.fn.parseQemoji = function() {
		var text = $(this).val();
		if (typeof text != 'string') {
			console.log('Unresolvable jQuery Object:' + $(this));
			return null;
		}
		for (var i = 0; i < opts.emojis.length; i++) {
			text = text.replace(
					new RegExp('#' + opts.emojis[i].name + '#', 'g'),
					'<img src=\"' + opts.src + '/' + opts.emojis[i].rel
							+ '\" title=\"' + opts.emojis[i].name + '\">');
		}
		return text;
	};
	$.fn.qemoji.defaults = {
		src : '/qemoji/emoji',
		animateTime : 300,
		emojiBtn : '#emojiBtn',
		emojiBox : '#emojiBox',
		emojis : [ {
			name : '微笑',
			rel : '0.gif'
		}, {
			name : '撇嘴',
			rel : '1.gif'
		}, {
			name : '色',
			rel : '2.gif'
		}, {
			name : '发呆',
			rel : '3.gif'
		}, {
			name : '得意',
			rel : '4.gif'
		}, {
			name : '流泪',
			rel : '5.gif'
		}, {
			name : '害羞',
			rel : '6.gif'
		}, {
			name : '闭嘴',
			rel : '7.gif'
		}, {
			name : '大哭',
			rel : '9.gif'
		}, {
			name : '尴尬',
			rel : '10.gif'
		}, {
			name : '发怒',
			rel : '11.gif'
		}, {
			name : '调皮',
			rel : '12.gif'
		}, {
			name : '龇牙',
			rel : '13.gif'
		}, {
			name : '惊讶',
			rel : '14.gif'
		}, {
			name : '难过',
			rel : '15.gif'
		}, {
			name : '酷',
			rel : '16.gif'
		}, {
			name : '冷汗',
			rel : '17.gif'
		}, {
			name : '抓狂',
			rel : '18.gif'
		}, {
			name : '吐',
			rel : '19.gif'
		}, {
			name : '偷笑',
			rel : '20.gif'
		}, {
			name : '可爱',
			rel : '21.gif'
		}, {
			name : '白眼',
			rel : '22.gif'
		}, {
			name : '傲慢',
			rel : '23.gif'
		}, {
			name : '饥饿',
			rel : '24.gif'
		}, {
			name : '困',
			rel : '25.gif'
		}, {
			name : '惊恐',
			rel : '26.gif'
		}, {
			name : '流汗',
			rel : '27.gif'
		}, {
			name : '憨笑',
			rel : '28.gif'
		}, {
			name : '大兵',
			rel : '29.gif'
		}, {
			name : '奋斗',
			rel : '30.gif'
		}, {
			name : '咒骂',
			rel : '31.gif'
		}, {
			name : '疑问',
			rel : '32.gif'
		}, {
			name : '嘘',
			rel : '33.gif'
		}, {
			name : '晕',
			rel : '34.gif'
		}, {
			name : '折磨',
			rel : '35.gif'
		}, {
			name : '衰',
			rel : '36.gif'
		}, {
			name : '骷髅',
			rel : '37.gif'
		}, {
			name : '敲打',
			rel : '38.gif'
		}, {
			name : '再见',
			rel : '39.gif'
		}, {
			name : '擦汗',
			rel : '40.gif'
		},

		{
			name : '抠鼻',
			rel : '41.gif'
		}, {
			name : '鼓掌',
			rel : '42.gif'
		}, {
			name : '糗大了',
			rel : '43.gif'
		}, {
			name : '坏笑',
			rel : '44.gif'
		}, {
			name : '左哼哼',
			rel : '45.gif'
		}, {
			name : '右哼哼',
			rel : '46.gif'
		}, {
			name : '哈欠',
			rel : '47.gif'
		}, {
			name : '鄙视',
			rel : '48.gif'
		}, {
			name : '委屈',
			rel : '49.gif'
		}, {
			name : '快哭了',
			rel : '50.gif'
		}, {
			name : '阴险',
			rel : '51.gif'
		}, {
			name : '亲亲',
			rel : '52.gif'
		}, {
			name : '吓',
			rel : '53.gif'
		}, {
			name : '可怜',
			rel : '54.gif'
		}, {
			name : '菜刀',
			rel : '55.gif'
		}, {
			name : '西瓜',
			rel : '56.gif'
		}, {
			name : '啤酒',
			rel : '57.gif'
		}, {
			name : '篮球',
			rel : '58.gif'
		}, {
			name : '乒乓',
			rel : '59.gif'
		}, {
			name : '拥抱',
			rel : '78.gif'
		}, {
			name : '握手',
			rel : '81.gif'
		}, {
			name : '得意地笑',
			rel : '82.gif'
		}, {
			name : '听音乐',
			rel : '83.gif'
		} ]
	};
	var opts = $.fn.qemoji.defaults;
})(jQuery)

该文件命名为 jquery-qemoji.js,调用格式:

        <textarea id="commentInput"></textarea>
	<div id="emojiBox"></div>
	<div>
		<a href="javascript:void(0)" id="emojiBtn">表情</a>
		<button type="button" id="commentBtn">评论</button>
	</div>

<script type="text/javascript" src="/qemoji/jquery-qemoji.js"></script>
<script type="text/javascript">
$('#commentInput').qemoji({
			src : '$!ctx/qemoji/emoji'
		});
...
    var text = $('#commentInput').parseQemoji();
  ...
</script>

APIs:

$('').qemoji({
    src:'',//表情资源文件夹路径，默认为/qemoji/emoji
    animateTime:,//表情框展开及关闭时间，默认300ms
    emojiBtn:,//表情展开及关闭触发器ID，默认'#emojiBtn'
    emojiBox:,//表情预览窗口可展开或折叠,默认'#emojiBox'
    emojis:,//定义表情名称及路径的json数组,格式为[{name:'表情名称',rel:'表情图像文件名'},...]
});