将Emoji表情添加到项目中
2015-12-09 18:35
761 查看
哈哈,进入正题,项目需要发emoji表情,于是,我的任务开始了~
选择完需要的表情,点击消息预览就可以看到效果了,有一个微笑表情是QQ表情~~ 可以不用管它。
找了跟emoji相关了好多插件,找到了 jQuery_EmojiPicker 这个插件,然后研究了一下。
index.html,67行。
2.点击某个表情小图标时,将值写入指定控件。
jquery.emojiarea.js,617行。
3.emoji.css,55行。
将icon的 position: relative; 去掉。
效果图镇楼
选择完需要的表情,点击消息预览就可以看到效果了,有一个微笑表情是QQ表情~~ 可以不用管它。
找了跟emoji相关了好多插件,找到了 jQuery_EmojiPicker 这个插件,然后研究了一下。
源下载地址
http://www.jb51.net/jiaoben/375022.html插件修改
1.插件初始化后将其原本的输入框隐藏。index.html,67行。
<script> $(function() { // Initializes and creates emoji set from sprite sheet window.emojiPicker = new EmojiPicker({ emojiable_selector: '[data-emojiable=true]', assetsPath: 'lib/img/', popupButtonClasses: 'fa fa-smile-o' }); // 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(); $(".emoji-wysiwyg-editor").hide(); }); </script>
2.点击某个表情小图标时,将值写入指定控件。
jquery.emojiarea.js,617行。
this.$menu.on('click', 'a', function(e) { self.emojiarea.updateBodyPadding(self.emojiarea.$editor); /* * ! MODIFICATION START Following code was modified by Andre Staltz, * to capture clicks on category tabs and change the category * selection. */ if ($(this).hasClass('emoji-menu-tab')) { if (self.getTabIndex(this) !== self.currentCategory) { self.selectCategory(self.getTabIndex(this)); } return false; } /* ! MODIFICATION END */ var emoji = $('.label', $(this)).text(); window.setTimeout(function() { self.onItemSelected(emoji); alert(emoji); /* * ! MODIFICATION START Following code was modified by Igor * Zhukov, in order to close only on ctrl-, alt- emoji select */ if (e.ctrlKey || e.metaKey) { self.hide(); } /* ! MODIFICATION END */ }, 0); e.stopPropagation(); return false; });
3.emoji.css,55行。
将icon的 position: relative; 去掉。
.emoji-picker-icon { right: 10px; top: 5px; font-size: 20px; opacity: 0.7; z-index: 100; transition: none; color: black; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; }
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 5个常见可用性错误和解决方案
- java自动生成验证码插件-kaptcha
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享