新浪微博表情插件——jQuery Sina Emotion 3.0 发布

蓝飞 蓝飞 | 时间:2018-01-12, Fri | 26,152 views
前端开发 

jQuery Sina Emotion

一个用于方便快速地创建新浪微博表情选择对话框的 jQuery 插件。

有何特点

  • 使用简单,一行代码即可创创建出表情选择对话框
  • 自带智能表情解析方法(但还是建议表情解析在服务端进行)
  • 兼容IE6+、Chrome、Firefox、Opera等各种浏览器

插件演示

演示地址

使用方法

// 未指定插入文本框时,自动寻找同表单中第一个 textarea 或 input[type=text] 元素
$(selector).click(function(event){
    $(this).sinaEmotion();
    event.stopPropagation();
});

// 手动指定插入文本框
$(selector).click(function(event){
    $(this).sinaEmotion(target);
    event.stopPropagation();
});

参数配置

$.fn.sinaEmotion.options = {
    rows: 72,                // 每页显示的表情数
    language: 'cnname',        // 简体(cnname)、繁体(twname)
    appKey: '1362404091'    // 新浪微博开放平台的应用ID
};

表情解析

$(selector).parseEmotion();

具体的使用方法请看 Demo

获取插件

更新日志

  • 1.0.0(2012.08.22)

  • 1.1.0

    • 完善代码并于Google Code开源
  • 1.2.0

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

    • 修正IE下负margin失效导致表情换行的小BUG(由 @蜗牛都知道 发现)
  • 2.0.0

    • 全新重构插件代码
    • 新增表情解析方法
    • 开源于 GitHub码云
  • 2.1.0

    • 修复多次调用插件而对象文本框不同时,表情文本插入对象错乱问题
    • 修复表情接口未返回时,多次调用解析表情方法未成功解析的问题
    • 修改表情选择框显示机制,提高使用自由度(与低版本不兼容,升级插件时请注意修改调用方式,详见Demo)
    • 一些优化
  • 3.0.0

    • 兼容 webpack 等模块打包器
    • 优化代码,修复一些偶现的 Bug
    • 作为 npm 模块发布
如需转载请注明出处:蓝飞技术部落格

23 条评论 »

  1. visvis visvis

    能不能具体告知一下这个插件 怎么应用在wordpress 的评论中 !!弄了很久 感觉不是很清楚 谢谢!!

  2. visvis visvis

    请问怎么让表情解析在服务端进行 不是很懂 我能把代码 插入textarea 但是发表之后都评论列表都是 代码 不是表情!很困惑!希望告知!

    1. 雷

      同问
      请大侠指教。。。

      1. 在服务端同样读取表情接口,然后生成一个映射表,通过字符串替换把对应的表情符号替换成img标签就行了。

  3. 雷

    怎么表情不出来了

  4. 大先生 大先生

    $(selector).click(function(event){
    $(this).sinaEmotion(target);
    event.stopPropagation();
    });,问下这个target参数是什么?文本框的id还是?

    1. 文本框的CSS选择器

  5. tongxs tongxs

    请问,我想在一个页面上多个输入框上使用弹出表情框,请问怎么实现呢?

  6. nickjay nickjay

    这个插件的样式会和bootstrap的样式冲突,导致排版错乱,还望作者改进一下~

  7. 请问这个插件的表情能不能换成QQ表情,如果能;我应该怎么换成QQ表情

  8. sunshine sunshine

    能不能动态调用啊,就是$('.face').bind({ 绑定事件可以不在加载页面就绑定,因为表情包所在的模块是动态生成的,比如先加载页面,再点击回复按钮,评论模块再加载

  9. 落暮 落暮

    作者您好,我发现每次点击表情输入的时候都会再次生成一次所有表情列...

    1. 落暮 落暮

      看错了,抱歉...

  10. $(selector).parseEmotion(); 执行完渲染方法之后导致其他事件失效。

  11. 宏发 宏发

    将表情存入数据库解析的时候不显示表情 显示[微笑]这样的怎么弄

    1. 那就不要解析直接原文保存呗

  12. 大饼 大饼

    微信浏览器不支持这个插件吗?

    1. 理论上应该是支持的

  13. 魔剑智尊 魔剑智尊

    大哥我感觉你界面滚动的时候左栏背景动了不好看。。。

    1. 这你都发现了,马上改!

      1. 魔剑智尊 魔剑智尊

        ✌️耶~