Ext扩展的QQ表情选择面板
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表情选择面板的更多相关文章
- 【Qt】仿QQ表情选择控件
表情选择控件在聊天应用中常常要用到,做起来尽管不复杂可是非常繁琐.特别是有些图标须要按顺序排列.每次重做必定是非常费时.所以我将聊天表情选择控件封装成一个独立的类QFaceSelectWid ...
- android 开发高仿QQ表情选择、输入框
首先大家看效果: 用到的文件有(源码文件有,只包含表情.输入框等有关文件,工程项目是公司项目,恕不公开啦): res: drawable/face_del_icon.xml drawable/iv_f ...
- QQ表情的添加
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title> ...
- 仿QQ发语音、图片选择、表情选择demo
一款仿QQ发语音.图片选择.调用拍照.表情选择的demo git地址:https://github.com/PureLovePeter/pic.git. 喜欢的请 star star star,共 ...
- 经典qq表情插件(html+nodejs应用)
由于目前在接触聊天室项目,接到一个需求实现一个类似QQ表情.在网上找了一款jquery经典表情插件.下面介绍一个用法: HTML: 首先在html页面的head中引入jQuery库文件和QQ表情插件j ...
- 一款基于jQuery的QQ表情插件
我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您 ...
- QQ表情的发送与接收
我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜.怒.哀.乐等表达人物心情的小图片.本文重点要介绍的内容就是如何在微信公众平台使用QQ表情, ...
- Swing应用开发实战系列之二:设计日期选择面板窗口
Swing本身没有提供什么华丽丽的日期时间选择控件,所以笔者就在网上搜了个第三方的jar包jdatepicker-1.3.2.jar,基于此设计了个很轻量的日期选择面板,很简单的.效果图如下所示: 代 ...
- 腾讯QQ表情为什么如此成功呢
本人为原创作品:e良师益友 ,转载是并且注明 e良师益友网导读:腾讯开发的QQ表情功能给中国人的聊天增添一抹幽默,很多时候图片表情比话语更好的表达我们的意思,翻开你的聊天记录就会发现夹杂这很多不同的表 ...
随机推荐
- jquery获取下拉列表的值和显示内容的方法
页面的下拉列表: 选择时间段: <select name="timespan" id="timespan" class="Wdate" ...
- MySQL对时间的处理总结
1.to_days函数查询今天的数据:select * from 表名 where to_days(时间字段名) = to_days(now()); to_days函数:返回从0000年(公元1年)至 ...
- Leagal or Not —— 拓扑排序(王道)
Problem Description ACM-DIY is a large QQ group where many excellent acmers get together. It is so h ...
- Acer商祺x4610安装及使用
一年前心血来潮买了部Acer商祺x4610,这两天把它装起来,记录下过程以备忘. 首先装操作系统,我装的是XP,这款电脑比较贴心的是开机时按住F12可以选择光盘还是硬盘启动,就不用到BIOS里面设置启 ...
- 修改 Ubuntu 13.04 LAMP 服务器端口号
因为今天想让一台Ubuntu 13.04服务器对外 web 服务的端口号为8000,自己改了一下,但是就是无法访问,端口后依然为 80.所以在网上找了一下修改端口的办法,原来我还少修改了一个文件,这里 ...
- Activity设置切换动画时黑屏问题的解决
//当这么设置的时候.打开Acticity的时候会黑屏一下 overridePendingTransition(R.anim.activity_open,0); //改成例如以下代码 完美解决这个问题 ...
- /proc/meminfo详解 = /nmon analysis --MEM
memtotal hightotal lowtotal swaptotal memfree highfree lowfree swapfree memshared cached active bigf ...
- HTML5开发移动web应用——Sencha Touch篇(10)
我们把数据可视化出来,为的就是进行一些针对数据的操作. 这里介绍一下DataView的排序功能和搜索功能. 掌握这两个技能,能够让写出的数据界面内的数据能够依据要求进行排序,能够进行数据的搜索显示灯功 ...
- node.js 学习01
PHP开发技术栈(LAMP) Linux Apache MySql PHPnode.js 全栈开发技术栈(MEAN): MongoDB Express Angular Node.js 现阶 ...
- WPF入门教程系列二
WPF控件和布局 一. 前言 公司项目基于WPF开发,最近项目上线有点空闲时间写一篇基于wpf的基础教材,WPF也是近期才接触,学习WPF也是在网上查资料与微软的MSDN进行学习,写本博客的目为了 ...