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:'表情圖像文件名'},...]
});