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表情功能给中国人的聊天增添一抹幽默,很多时候图片表情比话语更好的表达我们的意思,翻开你的聊天记录就会发现夹杂这很多不同的表 ...
随机推荐
- mq
同时每个 Broker 与NameServer 集群中的所有节点建立长连接,定时注册 Topic 信息到所有 NameServer 中. Producer 与 NameServer 集群中的其中一个节 ...
- libCurl 简单使用
curl easy 的使用步骤 curl_easy_init() curl_easy_setopt() curl_easy_perform() curl_easy_cleanup() ------- ...
- Swift,集合
1.创建(Set)集合(无序不可重复) (1)创建空集合 var a=Set<Int>() //[] (2)创建集合 var a:Set=[1,2,3] //[2,3,1] 2.集合插入( ...
- nodeJs常用API
1.url (1)url.parse返回url对象的各种参数 url.parse(url,true/false,true/false);//默认url.parse(url,false,false); ...
- PHP测试用例-前言 1
前提知识准备 在学习本课程之前,你需要准备以下知识点: 掌握一般的PHP开发技能,使用面向对象的框架开发过三个月以上 会一些JS知识 了解http协议 拥有以下知识会学得更加顺利: 掌握PHPUnit ...
- cakephp事务处理
使用cakephp框架做开发时,涉及到多个数据表的数据保存,需要使用cakephp的事务处理,查cakephp的说明手册也没看明白,从开发社区中看到了解决的办法,考虑到英文的问题,所以转给大家,以供参 ...
- TreeView 拖拽 增删改
using Endv.Tools; using System; using System.Data; using System.Drawing; using System.IO; using Syst ...
- 输入N,打印如图所看到的的三角形(例:N=3,N=4,N=5)1<=N<=26
package demo; public class PrintDemo { public static void main(String[] args) { print(26); } private ...
- Unity3D教程宝典之Web服务器篇:(第二讲)从服务器下载图片
转载自风宇冲Unity3D教程学院 从Web服务器下载图片 上一讲风宇冲介绍了wamp服务器及安装.这回介绍如何从服务器下载内容至 ...
- Python——标准库 Sys模块
---------------------------------------------------------------------------------------------------- ...