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. Redis编程实践【pub/sub】

    原文:http://shift-alt-ctrl.iteye.com/blog/1867454 Redis或许已经在很多企业开始推广并试水,本文也根据个人的实践,简单描述一下Redis在实际开发过程中 ...

  2. C#基础之 派生类

    1: 当创建派生类的实例时,会自动调用基类的默认构造函数 namespace parentTest { public class Reader { public Reader() { Console. ...

  3. Docker实践1:Virtualbox安装Oracle Enterprise Linux R6 U5

    先下载OracleLinux-R6-U5-Server-x86_64-dvd.iso文件,然后打开virtualbox 因为weblogic docker镜像都比较大,因此最好容量最好大一点,采用30 ...

  4. shell用法 (cat << EOF)

    下面的语句会创建不存在的secure.config,如果存在直接追加,然后把多行内容: [database]        password = gerrit 写入文件secure.config ca ...

  5. http://blog.csdn.net/huang_xw/article/details/7090173

    http://blog.csdn.net/huang_xw/article/details/7090173

  6. linux导入so文件

    在linux系统中,有时候会遇到so文件丢失的问题. 此时一个常用的操作是将缺失的so文件拷贝到主机上.然后设置以下环境变量来进行导入 export LD_LIBRARY_PATH=/usr/lib/ ...

  7. [Linux]屏幕输出控制

    专门的术语叫做ANSI Escape sequences(ANSI Escape codes),题目并不恰当,与其说是屏幕输出控制,不如说是通过bash在兼容VT100的终端上进行输出. 主要有以下类 ...

  8. builder pattern

    design patterns 结合书本和这个网站的这个系列的文章来看: https://www.tutorialspoint.com/design_pattern/builder_pattern.h ...

  9. 各版本JDK1.5-1.8新特性

    概述 一jdk15新特性 泛型 foreach 自动拆箱装箱 枚举 静态导入Static import 元数据Metadata 线程池 Java Generics 二jdk16新特性 Desktop类 ...

  10. Android开发之JNI(一)--HelloWorld及遇到的错误解析

    Android开发之JNI(一)--HelloWorld及遇到的错误解析 1.NDK环境搭建    參考http://blog.csdn.net/xiaoliouc/article/details/8 ...