杰拉斯的博客

重要说明：已更新，请通过 GitHub 获取最新版本。

开发缘由

自从新浪微博开放平台推出以来，各种微博应用层出不穷，作为新浪微博的忠实用户之一，我也曾开发过几个微博应用，对于微博发布应用来说，有一个功能是必不可少的，那就是表情。表情功能的实现虽说不难，但却比较繁琐，首先要了解新浪微博开放平台的表情API，然后通过某种方式调用，如果通过网页后台代码直接读取储存到JavaScript变量中，又会拖慢网页加载速度，如果采用AJAX读取，又要解决跨域问题，即便成功读取到表情数据了，又必须考虑表情分类，翻页等等等等问题，还需要考虑表情的插入方式并非简单的在文本最后插入，而是在光标所在处插入，还应该能够替换掉已选中文字，还要涉及到不同浏览器的兼容问题……

好吧，上面这段文字你可以跳过不看，你只需要知道表情功能的实现非常繁琐就行了（+_+），为了方便以后微博应用的开发，同样方便其他应用开发者，此款表情插件就此诞生。

插件简介

其实插件简介不必多说，用过新浪微博的应该都懂。自认为制作得还是比较像的：

Demo就不给了，上图是我们学校树洞应用的截图，算是校内性质，不提倡校外人士使用，下载文件中附带Demo，虽然比较简陋一些。

有何更新

• 1.3 修正IE下负margin失效导致表情换行的小BUG（由@蜗牛都知道 发现）
• 1.2 修正同一页面中对不同文本框使用该插件时插入位置错误的BUG（感谢@Belin_love 提出）

使用方法

首先不要忘记在head中加载CSS文件：

<style type="text/css" href="jquery.sinaEmotion-1.0.css"></style>

确保你的网页中引入了jQuery库：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

然后引入js文件：

<script type="text/javascript" src="jquery.sinaEmotion-1.0.min.js"></script>

调用格式如下：

$('#face').sinaEmotion({	//表情按钮
	target: $('.emotion'),	//目标文本框，可以是input或者是textarea
	app_id: ''	//你的App Key
});

如果你的表情是在textarea的同一个表单下，也可以直接这样调用：

$('#face').sinaEmotion();

App Key的可从新浪微博开放平台获得。

下载地址

谷歌开源项目地址：http://code.google.com/p/jquery-sina-emotion/

新浪微盘下载地址：http://vdisk.weibo.com/s/A-jnVI1q0vRA

如需转载请注明出处：杰拉斯的博客

相关文章

• 新浪微博表情插件——jQuery Sina Emotion 3.0 发布
• React+Webpack 前后端同构（服务端渲染）实践篇
• React+Webpack 前后端同构（服务端渲染）理论篇
• 新浪微博表情插件——jQuery Sina Emotion 2.0发布
• [设计模式]JavaScript钩子机制的应用场景与实现