表情輸入框的外掛使用
1.
外掛基於jquery1.8+，所以要先引入jquery.js
在頁面引入
https://github.com/JFrameSea/emojione/blob/master/lib/js/emojione.min.js
然後引入
https://github.com/JFrameSea/emojionearea/blob/master/dist/emojionearea.min.js
以及相應的css
https://github.com/JFrameSea/emojionearea/blob/master/dist/emojionearea.min.css
2.
在自定義的js中使用
var emojioneareaEditor = $('#emojionearea-editor'
// init emotion area
var gEmojioneArea = emojioneareaEditor.emojioneArea({
autocomplete: false,
hidePickerOnBlur: false,
autoHideFilters: true,
filters: {
// 這裡是自定義顯示的表情陣列
smileys_people: UFSCH.emojiNames
},
events: {
picker_hide: function
isShowEmotion = true;
},
picker_show: function() {
isShowEmotion = false;
},
keydown: function(editor, event) {
if(event.keyCode == 13){
event.preventDefault();
sendMessage();
}
},
emojibtn_click: function() {
this.hidePicker();
}
}
});
var emojioneAreaObj = gEmojioneArea[0].emojioneArea;
// show emotion picker
var showEmotionPicker = function() {
emojioneAreaObj.showPicker();
};
// hide emotion picker
var hideEmotionPicker = function() {
emojioneAreaObj.hidePicker();
}
// click emotion icon to show/hide emotion picker
emotion.on('click', function() {
if (isShowEmotion) {
showEmotionPicker();
} else {
hideEmotionPicker();
}
});
頁面程式碼：
<textareaid="emojionearea-editor"class="message-input"placeholder="在此輸入訊息"></textarea>
<aid="emotion"title="表情"href="javascript:void(0);">表情</a>
上面js中使用的自定義的表情陣列js:
window.UFSCH = window.UFSCH || {};
UFSCH.emojiNames = {
emoji: "grinning grimacing grin joy smiley smile sweat_smile laughing innocent wink blush relaxed yum relieved kissing " +
"kissing_smiling_eyes kissing_closed_eyes stuck_out_tongue_winking_eye stuck_out_tongue_closed_eyes stuck_out_tongue sunglasses smirk no_mouth neutral_face expressionless unamused flushed disappointed worried angry " +
"rage pensive confused persevere confounded tired_face weary triumph open_mouth scream fearful cold_sweat hushed frowning anguished " +
"cry disappointed_relieved sleepy sweat sob dizzy_face astonished mask fearful sleeping star star2 grey_exclamation grey_question zzz " +
"sweat_drops musical_note fire poop smiling_imp imp japanese_ogre japanese_goblin skull ghost alien smiley_cat smile_cat joy_cat heart_eyes_cat " +
"smirk_cat kissing_cat scream_cat crying_cat_face pouting_cat raised_hands clap wave fist v ok_hand raised_hand open_hands muscle pray " +
"point_up point_up_2 point_down point_left point_right couplekiss couple_with_heart boy girl woman man herb four_leaf_clover rose tulip " +
"blossom sunny cloud partly_sunny zero one two three four five six seven eight nine"
};
UFSCH.qqWechat = {
emotions: [
{
coding: "$\f:1:\f$",
content: "/::<"
}, {
coding: "$\f:2:\f$",
content: "/::'("
}, {
coding: "$\f:3:\f$",
content: "/::>"
},{
coding: "$\f:4:\f$",
content: "/:&-("
}, {
coding: "$\f:5:\f$",
content: "/:<@"
}, {
coding: "$\f:6:\f$",
content: "/:@>"
}, {
coding: "$\f:7:\f$",
content: "/:>-|"
}, {
coding: "$\f:8:\f$",
content: "/::'|"
}, {
coding: "$\f:9:\f$",
content: "/:<W>"
}, {
coding: "$\f:10:\f$",
content: "/:<L>"
}, {
coding: "$\f:11:\f$",
content: "/:<O>"
},
]
};