哈哈,进入正题,项目需要发emoji表情,于是,我的任务开始了~
选择完需要的表情,点击消息预览就可以看到效果了,有一个微笑表情是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;
}
(adsbygoogle = window.adsbygoogle || []).push({});