建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

emojiarea.js 快速易用的 jQuery 表情符号插件

来源:易助科技网浏览量:44收藏

简介


emojiarea.js一个快速易用的jQuery表情符号选取器,允许用户将表情快速插入输入字段和文本区域,为他们的消息添加额外的表情和情感层。

(下载的附件中附有DEMO)


emojiarea.js 快速易用的 jQuery 表情符号插件-效果图


💡 说明本文主要针对2.0版本,该插件现在已经升级3.0版本,👉 [ 详情 ]



使用


1. 引入


<link href="./lib/css/emoji.css" rel="stylesheet">

<script src="./lib/js/config.min.js"></script>
<script src="./lib/js/util.min.js"></script>
<script src="./lib/js/emoji-picker.min.js"></script>
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.emojiarea.min.js"></script>



2. HTML


将您的文本字段添加到 emoji-picker-container


<p class="emoji-picker-container">
  <input data-emojiable="true" maxlength="10" />
</p>
<p class="lead emoji-picker-container">
  <textarea data-emojiable="true"></textarea>
</p>



3. 调用


$(function() {
  // Initializes and creates emoji set from sprite sheet
  window.emojiPicker = new EmojiPicker({
    emojiable_selector: '[data-emojiable=true]',
    assetsPath: './lib/img/',
    ButtonClasses: 'fa fa-smile-o', // font awesome icon
  });
  // Finds all elements with `emojiable_selector` and converts them to rich emoji input fields
  // You may want to delay this step if you have dynamically created input fields that appear later in the loading process
  // It can be called as many times as necessary; previously converted input fields will not be converted again
  window.emojiPicker.discover();
});


插入unicode表情符号而不是图像。


<p class="emoji-picker-container">
  <input data-emojiable="true" data-emoji-input="unicode" maxlength="10" />
</p>
<p class="lead emoji-picker-container">
  <textarea data-emojiable="true" data-emoji-input="unicode"></textarea>
</p>



相关链接


GitHub 地址(3.0版本):  https://github.com/mervick/emojionearea

易助科技网效果演示地址: http://demo.easyzone.net.cn/plugin/emoji/demo/index.html