首先你得引入jquery.min.js 插件,至于怎么下载就不过多说明。看上面链接
这个插件是一个使用起来方便,各种表情可以自己定制,支持gif 和 png 等格式
这里的emoji()方法是插件封装好的直接调用就可以!
list里面简单说明一下,
1. name:就是选项卡标题。
2. path:就是你的表情图片的路径。
3. suffix:就是表情图的文件格式。(文件后缀名)
4. max_number:很显然就是表情的最大个数。
$("#ele").emoji({content_el:"#content",
list:[
{
name:"QQ表情",
code:"qq_",
path:"./face/emoji1/",
suffix:".gif",
max_number:25
},
{
name:"emoji",
code:"em_",
path:"./face/emoji2/",
suffix:".png",
max_number:22
}
,
{
name:"其他",
code:"other_",
path:"./face/emoji3/",
suffix:".png",
max_number:1
}
]
});
下面这个就是一个发送按钮
#result就是发送以后表情显示的位置
$("#send").click(function(){
var content = $("#content").val();
content = replace_em(content);
$("#result").html(content);
$("#content").val('');
});
})
//表情格式替换
function replace_em(str){
str = str.replace(/\</g,'<');
str = str.replace(/\>/g,'>');
str = str.replace(/\n/g,'<br/>');
str = str.replace(/\[qq_([0-9]*)\]/g,"<img src='./face/emoji1/$1.gif' />");
str = str.replace(/\[em_([0-9]*)\]/g,"<img src='./face/emoji2/$1.png' />");
str = str.replace(/\[other_([0-9]*)\]/g,"<img src='./face/emoji3/$1.png' />");
return str;
}
这里面要注意的是格式转换的路径要保持一致
</script>
转载于:https://blog.51cto.com/13740530/2114534