弹窗的实现与封装

来源：互联网发布：文件传输软件编辑：程序博客网时间：2024/05/22 04:48

导入Popups.js。Popups.js源码如下：

var Popups = cc.Layer.extend({listener : null,//事件对象tcLayer : null,//传进来的layerblackLayer : null,//黑色遮罩flag : false,//如果为真，则代表弹窗被关闭掉touchbg_flag : false,//如果为真，当点击黑色背景层的时候，弹窗会关掉. 默认为falseisShow : true,//弹窗一开始是否为可见,默认为truector : function(layer, isShow, touchbg_flag) {this._super();//初始化属性this.setLocalZOrder(10000);if (typeof touchbg_flag != 'undefined') {this.touchbg_flag = touchbg_flag;}if (typeof isShow != 'undefined') {this.isShow = isShow;}this.visible = this.isShow;//this.tcLayer = layer;layer.setLocalZOrder(9999);this.addChild(layer);//this.initBlackLayer();},//初始化黑色遮罩initBlackLayer : function(){this.blackLayer = new cc.LayerColor(cc.color(0,0,0,120));if (this.isShow) {this.show();}this.addChild(this.blackLayer);},//添加事件,使弹窗下面的按钮无法被点击addListener : function(self){this.listener = cc.EventListener.create({    event: cc.EventListener.TOUCH_ONE_BY_ONE,    swallowTouches: true,                              onTouchBegan: function (touch, event)     {    //如果touchbg_flag为真， 则代表点击黑色遮罩的时候，弹窗也会被关闭掉    if (self.touchbg_flag)     {    var x = self.tcLayer.x;    var y = self.tcLayer.y;    var w = self.tcLayer.width;    var h = self.tcLayer.height;    var tx = parseInt(touch.getLocation().x);    var ty = parseInt(touch.getLocation().y);    if ( tx >= x && tx <= x + w && ty >= y && ty <= y + h )     {    }    else    {    self.flag = true;    self.hidden(self);    }    }        return true;        },    onTouchEnded: function (touch, event)     {    if (self.touchbg_flag && self.flag)     {     self.deleteListener();     self.flag = false;    }    }});cc.eventManager.addListener(this.listener, this.blackLayer);},//删除事件deleteListener : function(){cc.eventManager.removeListener(this.listener);},//显示show : function(self, fun){this.visible = true;var fadeIn = new cc.FadeTo(0.2, 120);this.blackLayer.runAction(fadeIn);this.tcLayer.scale = 0;var scaleTo = new cc.ScaleTo(0.4, 1).easing(cc.easeElasticOut(0.7)) ;var func = new cc.CallFunc(function(e){ if (typeof fun != 'undefined')  {  fun(); }}); var seq = new cc.Sequence(scaleTo, func);this.tcLayer.runAction(seq);this.addListener(self);},//隐藏hidden : function(self, fun){var scaleTo = new cc.ScaleTo(0.4, 0).easing(cc.easeElasticOut(0.7)) ;var func = new cc.CallFunc(function(e){ self.deleteListener(); self.visible = false; if (typeof fun != 'undefined')  {  fun(); }}); var seq = new cc.Sequence(scaleTo, func);  this.tcLayer.runAction(seq);var fadeOut = new cc.FadeOut(0.2);this.blackLayer.runAction(fadeOut);}});

导入后，编写如下代码：

//1、创建一个layer用于存放弹窗sprite，layer的宽和高等于弹窗图片的大小var layer = new cc.LayerColor(cc.color(0,0,0,0), 750, 427);layer.x = 400 - (layer.width/2);layer.y = 640 - (layer.height/2);//2、创建弹窗图片var tc = new cc.Sprite('res/tc.png');tc.x = layer.width / 2;tc.y = layer.height / 2;layer.addChild(tc);//3、弹窗的按钮var bnt = new cc.MenuItemImage( 'res/bnt.png', 'res/bnt.png', function () {          //关闭弹窗。function为回调函数，弹窗完全关闭后回调this.pus.hidden(this.pus, function(){console.log('弹窗关闭了');});}, this ); bnt.x = layer.width / 2;bnt.y = 45;var menu = new cc.Menu(bnt);  menu.x = 0;   menu.y = 0;  layer.addChild(menu); /*4、创建Popups对象。参数意义分别为 ：      层     弹窗一开始是否为可见，默认为true     点击遮罩层的时候是否关闭弹窗，默认为false。若为true，则存放弹窗的layer必须设置宽高*/this.pus = new Popups(layer, false, true);this.addChild(this.pus);

具体代码：

http://download.csdn.net/detail/qq408896436/9435063

0 0