新浪微博表情jQuery插件 v1.2——方便地实现表

系统 1861 0

开发缘由

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

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


插件简介

其实插件简介不必多说,用过新浪微博的应该都懂。自认为制作得还是比较像的:
新浪微博表情插件
Demo就不给了,上图是我们学校树洞应用的截图,算是校内性质,不提倡校外人士使用,下载文件中附带Demo,虽然比较简陋一些。


有何更新

  • 修正同一页面中对不同文本框使用该插件时插入位置错误的BUG(感谢 @Belin_love 提出)


使用方法

首先不要忘记在head中加载CSS文件:
    
  1. <style type = "text/css" href = "jquery.sinaEmotion-1.0.css" ></style>
确保你的网页中引入了jQuery库:
    
  1. <script type = "text/javascript" src = "http://code.jquery.com/jquery-1.8.0.min.js" ></script>
然后引入js文件:
    
  1. <script type = "text/javascript" src = "jquery.sinaEmotion-1.0.min.js" ></script>
调用格式如下:
    
  1. $ ( '#face' ). sinaEmotion ({ //表情按钮
  2. target : $ ( '.emotion' ) //目标文本框,可以是input或者是textarea
  3. app_id : '' //你的App Key
  4. });
如果你的表情是在textarea的同一个表单下,也可以直接这样调用:
    
  1. $ ( '#face' ). sinaEmotion ();
App Key的可从 新浪微博开放平台 获得。


下载地址

谷歌开源项目地址: http://code.google.com/p/jquery-sina-emotion/
新浪微盘下载地址: http://vdisk.weibo.com/s/b0y9I


还有话说

如果您愿意支持一下的话,欢迎戳一戳我的博客→ http://www.clanfei.com

由于前段时间博客大规模改版,再加上购置了一级域名,现阶段访问量比较惨淡ToT。。如蒙关照,不胜感激。。



=======================签 名 档=======================

原文地址(我的博客): http://www.clanfei.com/2012/08/1644.html
欢迎访问交流,至于我为什么要多弄一个博客,因为我热爱前端,热爱网页,我更希望有一个更加自由、真正属于我自己的小站,或许并不是那么有名气,但至少能够让我为了它而加倍努力。。
=======================签 名 档=======================





新浪微博表情jQuery插件 v1.2——方便地实现表情插入功能


更多文章、技术交流、商务合作、联系博主

微信扫码或搜索:z360901061

微信扫一扫加我为好友

QQ号联系: 360901061

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧,狠狠点击下面给点支持吧,站长非常感激您!手机微信长按不能支付解决办法:请将微信支付二维码保存到相册,切换到微信,然后点击微信右上角扫一扫功能,选择支付二维码完成支付。

【本文对您有帮助就好】

您的支持是博主写作最大的动力,如果您喜欢我的文章,感觉我的文章对您有帮助,请用微信扫描上面二维码支持博主2元、5元、10元、自定义金额等您想捐的金额吧,站长会非常 感谢您的哦!!!

发表我的评论
最新评论 总共0条评论