Ext扩展的QQ表情选择面板

define(function () {
EmoteChooser = function(cfg){
this.width=340;
this.height=112;
this.autoScroll=true;
Ext.apply(this,cfg);
this.emoteView = new Ext.DataView({
store: new Ext.data.ArrayStore({
fields: ["index","mask"],
data : [
[0,"/::)"],[1,"/::~"],[2,"/::B"],[3,"/::|"],[4,"/:8-)"],[5,"/::<"],[6,"/::$"],[7,"/::X"],[8,"/::Z"],[9,"/::'("],[10,"/::-|"],
[11,"/::@"],[12,"/::P"],[13,"/::D"],[14,"/::O"],[15,"/::("],[16,"/::+"],[17,"/:--b"],[18,"/::Q"],[19,"/::T"],[20,"/:,@P"],
[21,"/:,@-D"],[22,"/::d"],[23,"/:,@o"],[24,"/::g"],[25,"/:|-)"],[26,"/::!"],[27,"/::L"],[28,"/::>"],[29,"/::,@"],
[30,"/:,@f"],[31,"/::-S"],[32,"/:?"],[33,"/:,@x"],[34,"/:,@@"],[35,"/::8"],[36,"/:,@!"],[37,"/:!!!"],[38,"/:xx"],[39,"/:bye"],[40,"/:wipe"],
[41,"/:dig"],[42,"/:handclap"],[43,"/:&-("],[44,"/:B-)"],[45,"/:<@"],[46,"/:@>"],[47,"/::-O"],[48,"/:>-|"],[49,"/:P-("],[50,"/::'|"],
[51,"/:X-)"],[52,"/::*"],[53,"/:@x"],[54,"/:8*"],[55,"/:pd"],[56,"/:<W>"],[57,"/:beer"],[58,"/:basketb"],[59,"/:oo"],[60,"/:coffee"],
[61,"/:eat"],[62,"/:pig"],[63,"/:rose"],[64,"/:fade"],[65,"/:showlove"],[66,"/:heart"],[67,"/:break"],[68,"/:cake"],[69,"/:li"],[70,"/:bome"],
[71,"/:kn"],[72,"/:footb"],[73,"/:ladybug"],[74,"/:shit"],[75,"/:moon"],[76,"/:sun"],[77,"/:gift"],[78,"/:hug"],[79,"/:strong"],[80,"/:weak"],
[81,"/:share"],[82,"/:v"],[83,"/:@)"],[84,"/:jj"],[85,"/:@@"],[86,"/:bad"],[87,"/:lvu"],[88,"/:no"],[89,"/:ok"],[90,"/:love"],
[91,"/:<L>"],[92,"/:jump"],[93,"/:shake"],[94,"/:<O>"],[95,"/:circle"],[96,"/:kotow"],[97,"/:turn"],[98,"/:skip"],[99,"[挥手]"],[100,"/:#-0"],
[101,"[街舞]"],[102,"/:kiss"],[103,"/:<&"],[104,"/:&>"]
]
}),
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="emotes" title="{mask}"><img src="public/emoji/{index}.png"></div>',
'</tpl>'
),
autoHeight:true,
singleSelect: true,
overClass:'x-view-over',
itemSelector:'div.emotes',
listeners : {
'click': this.selectEmoteFn
}
});
EmoteChooser.superclass.constructor.call(this, {
border : false,
items : this.emoteView
});
this.emoteView.on('click',function(){
this.ownerCt.hide();
},this);
};

Ext.extend(EmoteChooser, Ext.Panel, {
selectEmoteFn: function(dc,num,item){
var textArea = this.ownerCt.textArea;
var curValue = textArea.getValue();
var em = " "+item.title+" ";
if(curValue){
var wxdom = textArea.el.dom;
//光标位置插入,并且插入值
textArea.setValue(curValue.substring(0,wxdom.selectionStart)+em+curValue.substring(wxdom.selectionEnd));
wxdom.selectionStart = wxdom.selectionStart+em.length;
}else{
textArea.setValue(em);
}
}
});

Ext.reg('emotechooser', EmoteChooser);

return EmoteChooser;
});

Ext扩展的QQ表情选择面板的更多相关文章

  1. 【Qt】仿QQ表情选择控件

         表情选择控件在聊天应用中常常要用到,做起来尽管不复杂可是非常繁琐.特别是有些图标须要按顺序排列.每次重做必定是非常费时.所以我将聊天表情选择控件封装成一个独立的类QFaceSelectWid ...

  2. android 开发高仿QQ表情选择、输入框

    首先大家看效果: 用到的文件有(源码文件有,只包含表情.输入框等有关文件,工程项目是公司项目,恕不公开啦): res: drawable/face_del_icon.xml drawable/iv_f ...

  3. QQ表情的添加

    <!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title> ...

  4. 仿QQ发语音、图片选择、表情选择demo

    一款仿QQ发语音.图片选择.调用拍照.表情选择的demo git地址:https://github.com/PureLovePeter/pic.git.  喜欢的请 star  star star,共 ...

  5. 经典qq表情插件(html+nodejs应用)

    由于目前在接触聊天室项目,接到一个需求实现一个类似QQ表情.在网上找了一款jquery经典表情插件.下面介绍一个用法: HTML: 首先在html页面的head中引入jQuery库文件和QQ表情插件j ...

  6. 一款基于jQuery的QQ表情插件

    我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您 ...

  7. QQ表情的发送与接收

    我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...

  8. Swing应用开发实战系列之二:设计日期选择面板窗口

    Swing本身没有提供什么华丽丽的日期时间选择控件,所以笔者就在网上搜了个第三方的jar包jdatepicker-1.3.2.jar,基于此设计了个很轻量的日期选择面板,很简单的.效果图如下所示: 代 ...

  9. 腾讯QQ表情为什么如此成功呢

    本人为原创作品:e良师益友 ,转载是并且注明 e良师益友网导读:腾讯开发的QQ表情功能给中国人的聊天增添一抹幽默,很多时候图片表情比话语更好的表达我们的意思,翻开你的聊天记录就会发现夹杂这很多不同的表 ...

随机推荐

  1. Centos7.3 bbc tools安装

    http://blog.csdn.net/orangleliu/article/details/54099528 更新到最新 CentOS 7.3 1611 yum update -y cat /et ...

  2. delphi执行cmd命令和bat文件

    转载地址:http://blog.csdn.net/hutao1101175783/article/details/42807063 cmd:='echo d | Xcopy '+BasePath+' ...

  3. MythXinWCF通用宿主绿色版发布(一键启动,方便快捷)

    这是我开发的一款免费的,绿色的WCF宿主工具,一键启动,方便快捷,省去了安装和配置IIS的麻烦,也不需要配置文件. 该工具运行环境为.Net Framework 4.5.1(这个是必装的,win10自 ...

  4. Oracle里面的用户user无法登录 LOCKED(TIMED)

    SQL>conn test/test 还是报同样的错误,这就奇怪了.看看dba_users中该用户的状态等信息 SQL>select account_status,lock_date,pr ...

  5. Java集合之保持compareTo和equals同步

    在Java中我们常使用Comparable接口来实现排序,其中compareTo是实现该接口方法.我们知道compareTo返回0表示两个对象相等,返回正数表示大于,返回负数表示小于.同时我们也知道e ...

  6. Makefile的制作

    一个工程中的源文件不计其数,其按类型.功能.模块分别放在若干个目录中,makefile定义系列的规则来指定,哪些文件需要先编译,哪些文件需要后编译,哪些文件需要重新编译,甚至于进行更复杂的功能操作,因 ...

  7. Spark(十二) -- Spark On Yarn & Spark as a Service & Spark On Tachyon

    Spark On Yarn: 从0.6.0版本其,就可以在在Yarn上运行Spark 通过Yarn进行统一的资源管理和调度 进而可以实现不止Spark,多种处理框架并存工作的场景 部署Spark On ...

  8. Centos硬件信息

    1.物理cpu个数 #cat /proc/cpuinfo | grep "physical id" | sort | uniq | wc -l 2.每个物理cpu核数 #cat / ...

  9. Django——如何处理请求(URL配置和视图)

    URLconfig—— 为了绑定视图函数和URL,我们使用URLconf. URLconf 就像是 Django 所支撑网站的目录. 它的本质是 URL 模式以及要为该 URL 模式调用的视图函数之间 ...

  10. js canvas画柱状图 没什么高端的 就是一篇偶尔思路的

    公司项目要用js画柱状图,本来想用个插件吧 chart.js 忽然一想 我们也用不了那么大的插件.自己写个吧,也能看看自己那点数学水平能够不! 有几个小亮点吧 1.函数x 和 函数y 对坐标进行了转化 ...