移动端的表情插件
一.HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width = device-width,initial-scale=1.0,maximum-scale=1.0,user-scale=0" />
<title>分享JQuery新浪1630个表情插件(带解析方法)</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="demo3.css" />
<style type="text/css">
*{margin: 0;padding: 0;}
h1 {
font: 16px '微软雅黑';
color: #0000ff;
}
body{
font-size:13px;
}
.emotion img{
padding: 0 3px;
}
.btn-box{
padding-top: 30px;
}
input[type=button]{
width: 30%;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
font-size: 20px;
color: green;
border-radius: 6px;
}
</style>
</head>
<body>
<div style="width:100%; height:auto; margin:100px auto;">
<div class="textarea_box" style="position: relative;width: 94%;height:60px;padding: 10px 3%;font-size: 13px;outline: none;">
<div contenteditable="true" class="emotion textarea" style="position: absolute;top:0;left:0;width: 94%;height:60px;padding: 10px 3%;font-size: 16px;border: 1px solid #ccc;outline: none;"></div>
</div>
<div class="btn-box">
<input id="face" type="button" value="表情" />
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="demo3.js"></script>
<script type="text/javascript">
// 绑定表情
$('#face').SinaEmotion($('.emotion'));
</script>
</body>
</html>二.CSS代码
#emotions{
position:absolute;
left:0;
width: 100%;
padding-top: 30px;
padding-bottom: 32px;
font-size:12px;
background:#F6F6F6;
}
#emotions img{
width: 44%;
height: auto;
border:0;
}
#emotions .container{
width: 100%;
overflow: hidden;
}
#emotions .container span.face{
float:left;
padding-top: 22px;
width: 14.28%;
text-align:center;
}
#emotions .page{
margin-top: 20px;
font-size: 16px;
text-align:center;
}
#emotions .page i{
padding: 5px;
color: #0078B6;
background-color:#f3f3f3;
}
#emotions .page i.current{
color: #666;
background-color:#fff;
}三. JS代码解析
/**
* @author 夏の寒风
* @time 2012-12-14
*/
//自定义hashtable
function Hashtable() {
this._hash = new Object();
this.put = function(key, value) {
if (typeof (key) != "undefined") {
if (this.containsKey(key) == false) {
this._hash[key] = typeof (value) == "undefined" ? null : value;
return true;
} else {
return false;
}
} else {
return false;
}
}
this.remove = function(key) { delete this._hash[key]; }
this.size = function() { var i = 0; for (var k in this._hash) { i++; } return i; }
this.get = function(key) { return this._hash[key]; }
this.containsKey = function(key) { return typeof (this._hash[key]) != "undefined"; }
this.clear = function() { for (var k in this._hash) { delete this._hash[k]; } }
}
// 初始化缓存，页面仅仅加载一次就可以了
// $(function() {
// var app_id = '1362404091';
// $.ajax( {
// dataType : 'jsonp',
// url : 'https://api.weibo.com/2/emotions.json?source=' + app_id,
// success : function(response) {
// var data = response.data;
var emotions = new Array();
var uSinaEmotionsHt = new Hashtable();
var em = [
{'phrase':'[哈哈]','url':'3.gif'},
{'phrase':'[可爱]','url':'4.gif'},
{'phrase':'[可怜]','url':'5.gif'},
{'phrase':'[挖鼻孔]','url':'6.gif'},
{'phrase':'[吃惊]','url':'7.gif'},
{'phrase':'[害羞]','url':'8.gif'},
{'phrase':'[挤眼]','url':'9.gif'},
{'phrase':'[闭嘴]','url':'10.gif'},
{'phrase':'[鄙视]','url':'11.gif'},
{'phrase':'[爱你]','url':'12.gif'},
{'phrase':'[流泪]','url':'13.gif'},
{'phrase':'[偷笑]','url':'14.gif'},
{'phrase':'[亲亲]','url':'15.gif'},
{'phrase':'[生病]','url':'16.gif'},
{'phrase':'[开心]','url':'17.gif'},
{'phrase':'[懒得理你]','url':'18.gif'},
{'phrase':'[左哼哼]','url':'19.gif'},
{'phrase':'[右哼哼]','url':'20.gif'},
{'phrase':'[嘘]','url':'21.gif'},
{'phrase':'[衰]','url':'22.gif'},
{'phrase':'[委屈]','url':'23.gif'},
{'phrase':'[吐]','url':'24.gif'},
{'phrase':'[打哈欠]','url':'25.gif'},
{'phrase':'[抱抱]','url':'26.gif'},
{'phrase':'[怒]','url':'27.gif'},
{'phrase':'[疑问]','url':'28.gif'},
{'phrase':'[馋嘴]','url':'29.gif'},
{'phrase':'[拜拜]','url':'30.gif'},
{'phrase':'[思考]','url':'31.gif'},
{'phrase':'[汗]','url':'32.gif'},
{'phrase':'[困]','url':'33.gif'},
{'phrase':'[睡觉]','url':'34.gif'},
{'phrase':'[钱]','url':'35.gif'},
{'phrase':'[失望]','url':'36.gif'},
{'phrase':'[酷]','url':'37.gif'},
{'phrase':'[花心]','url':'38.gif'},
{'phrase':'[哼]','url':'39.gif'},
{'phrase':'[鼓掌]','url':'40.gif'},
{'phrase':'[晕]','url':'41.gif'},
{'phrase':'[悲伤]','url':'42.gif'},
{'phrase':'[抓狂]','url':'43.gif'},
{'phrase':'[黑线]','url':'44.gif'},
{'phrase':'[阴脸]','url':'45.gif'},
{'phrase':'[怒骂]','url':'46.gif'},
{'phrase':'[心]','url':'47.gif'},
{'phrase':'[伤心]','url':'48.gif'},
{'phrase':'[猪头]','url':'49.gif'},
{'phrase':'[OK]','url':'50.gif'},
{'phrase':'[耶]','url':'51.gif'},
{'phrase':'[good]','url':'52.gif'},
{'phrase':'[不要]','url':'53.gif'},
{'phrase':'[赞]','url':'54.gif'},
{'phrase':'[来]','url':'55.gif'},
{'phrase':'[弱]','url':'56.gif'},
{'phrase':'[蜡烛]','url':'57.gif'},
{'phrase':'[钟]','url':'58.gif'},
{'phrase':'[蛋糕]','url':'59.gif'},
{'phrase':'[话筒]','url':'60.gif'},
{'phrase':'[哈哈]','url':'3.gif'},
{'phrase':'[可爱]','url':'4.gif'},
{'phrase':'[可怜]','url':'5.gif'},
{'phrase':'[挖鼻孔]','url':'6.gif'},
{'phrase':'[吃惊]','url':'7.gif'},
{'phrase':'[害羞]','url':'8.gif'},
{'phrase':'[挤眼]','url':'9.gif'},
{'phrase':'[闭嘴]','url':'10.gif'},
{'phrase':'[鄙视]','url':'11.gif'},
{'phrase':'[爱你]','url':'12.gif'},
{'phrase':'[流泪]','url':'13.gif'},
{'phrase':'[偷笑]','url':'14.gif'},
{'phrase':'[亲亲]','url':'15.gif'},
{'phrase':'[生病]','url':'16.gif'},
{'phrase':'[开心]','url':'17.gif'},
{'phrase':'[懒得理你]','url':'18.gif'},
{'phrase':'[左哼哼]','url':'19.gif'},
{'phrase':'[右哼哼]','url':'20.gif'},
{'phrase':'[嘘]','url':'21.gif'},
{'phrase':'[衰]','url':'22.gif'},
{'phrase':'[委屈]','url':'23.gif'},
{'phrase':'[吐]','url':'24.gif'},
{'phrase':'[打哈欠]','url':'25.gif'},
{'phrase':'[抱抱]','url':'26.gif'},
{'phrase':'[怒]','url':'27.gif'},
{'phrase':'[疑问]','url':'28.gif'},
{'phrase':'[馋嘴]','url':'29.gif'},
{'phrase':'[拜拜]','url':'30.gif'},
{'phrase':'[思考]','url':'31.gif'},
{'phrase':'[汗]','url':'32.gif'},
{'phrase':'[困]','url':'33.gif'},
{'phrase':'[睡觉]','url':'34.gif'},
{'phrase':'[钱]','url':'35.gif'},
{'phrase':'[失望]','url':'36.gif'},
{'phrase':'[酷]','url':'37.gif'},
{'phrase':'[花心]','url':'38.gif'},
{'phrase':'[哼]','url':'39.gif'},
{'phrase':'[鼓掌]','url':'40.gif'},
{'phrase':'[晕]','url':'41.gif'},
{'phrase':'[悲伤]','url':'42.gif'},
{'phrase':'[抓狂]','url':'43.gif'},
{'phrase':'[黑线]','url':'44.gif'},
{'phrase':'[阴脸]','url':'45.gif'},
{'phrase':'[怒骂]','url':'46.gif'},
{'phrase':'[心]','url':'47.gif'},
{'phrase':'[伤心]','url':'48.gif'},
{'phrase':'[猪头]','url':'49.gif'},
{'phrase':'[OK]','url':'50.gif'},
{'phrase':'[耶]','url':'51.gif'},
{'phrase':'[good]','url':'52.gif'},
{'phrase':'[不要]','url':'53.gif'},
{'phrase':'[赞]','url':'54.gif'},
{'phrase':'[来]','url':'55.gif'},
{'phrase':'[弱]','url':'56.gif'},
{'phrase':'[蜡烛]','url':'57.gif'},
{'phrase':'[钟]','url':'58.gif'},
{'phrase':'[蛋糕]','url':'59.gif'},
{'phrase':'[话筒]','url':'60.gif'},
];
var data = em;
for ( var i in data) {
emotions[i] = {
name : data[i].phrase,
icon : data[i].url,
};
uSinaEmotionsHt.put(data[i].phrase, data[i].url);
}
// }
// });
// });
//把文字替换表情图片
function AnalyticEmotion (s) {
if(typeof (s) != "undefined") {
var sArr = s.match(/\[.*?\]/g);
for(var i = 0; i < sArr.length; i++){
if(uSinaEmotionsHt.containsKey(sArr[i])) {
var reStr = "<img src=\"emotions/" + uSinaEmotionsHt.get(sArr[i]) + "\" height=\"18\" width=\"18\" />";
s = s.replace(sArr[i], reStr);
}
}
}
return s;
}
// 插入表情后光标放到文本框的最后＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
function set_focus(el){
el=el[0]; //jquery 对象转dom对象
el.focus();
if($.browser.msie)
{
var range = document.selection.createRange();
this.last = range;
range.moveToElementText(el);
range.select();
document.selection.empty(); //取消选中
}
else
{
var range = document.createRange();
range.selectNodeContents(el);
range.collapse(false);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
}
var obj = $(".textarea");
// 删除表情
function cancleFace () {
var str = obj.html();
if (/<img[^>]+>$/.test(str)) {
str = str.replace(/<img[^>]+>$/,'');
} else {
str = str.substr(0, str.length-1);
}
obj.html(str);
set_focus(obj);
}
(function($){
$.fn.SinaEmotion = function(target){
var cat_page;
$(this).click(function(event){
event.stopPropagation();
// 获取表情按钮的位置，然后定位表情表格的位置。
var eTop = $(this).offset().top + $(this).height() + 20;
var eLeft = $(this).offset().left;
console.log(eTop)
$('body').append('<div id="emotions"></div>');
$('#emotions').css({top: eTop, left: eLeft});
$('#emotions').html('<div>正在加载，请稍候...</div>');
$('#emotions').click(function(event){
event.stopPropagation();
});
$('#emotions').html('<div class="container"></div><div class="page"></div>');
showEmotions();
$(".container").append("<span class='face' onClick='cancleFace()'><i style='display: inline-block;width: 44%;padding-top: 4px;font-size: 24px;'>X</i></span>")
});
// 让表情表格消失，点击页面任何一个地方
$('body').click(function(){
$('#emotions').remove();
});
// 转换表情符号，并插入输入框中。
$.fn.insertText = function(text){
var text = AnalyticEmotion(text)
this.each(function() {
if (document.selection) {
this.focus();
var cr = document.selection.createRange();
cr.text = text;
cr.collapse();
cr.select();
}else if (this.selectionStart || this.selectionStart == '0') {
var
start = this.selectionStart,
end = this.selectionEnd;
this.innerHTML = this.innerHTML.substring(0, start)+ text+ this.innerHTML.substring(end, this.innerHTML.length);
this.selectionStart = this.selectionEnd = start+text.length;
}else {
this.innerHTML += text;
}
});
return this;
}
// 显示表情
function showEmotions(){
var page = arguments[0]?arguments[0] - 1:0;
$('#emotions .container').html('');
$('#emotions .page').html('');
for(var i = page * 20; i < (page + 1) * 20 && i < emotions.length; ++i){
$('#emotions .container').append($('<span class="face" title="' + emotions[i].name + '"><img src="emotions/' + emotions[i].icon + '" alt="' + emotions[i].name + '" width="22" height="22" /></span>'));
}
$('#emotions .container .face').click(function(){
target.insertText($(this).attr('title'));
// $('#emotions').remove();
set_focus(obj);
});
for(var i = 1; i < emotions.length / 20 + 1; ++i){
$('#emotions .page').append($('<span' + (i == page + 1?' class="current"':'') + '>' + i + '</span>'));
}
// 点击页码，改变page的值来切换当前页面的表情
$('#emotions .page span').click(function(){
showEmotions($(this).text());
});
}
}
})(jQuery);