cocos2d-html5 簡易 下拉表單 控制項

剛才在CH5的群裡問了問  有沒有大俠寫過 下拉表單控制項啊！  沒人鳥窩 ，DZ老師表示很傷心啊  ，於是乎  自己寫一個把 共用給大家。

上一個  只實現了一個最最基本的控制項  很簡單  別吐槽啊，以後有空我會完善一下的，如果有朋友自願幫忙完善一下就更好了。

有任何問題請加DZ老師的QQ 460418221

引擎版本 ： 2.2.2

原理：有空再寫吧   

源碼：

/** * Created with JetBrains WebStorm. * User: Dz_Yang * Date: 14-4-29 * Time: 上午13:19 * To change this template use File | Settings | File Templates. */var Pull_down_menu = cc.Layer.extend({WIDTH:0,HEIGHT:0,COLOR:null,STR_ARRAY:null,SElECTS:null,SELECTING_ID:null,STATE:0,init:function(){this._super();var winsize = cc.Director.getInstance().getWinSize(); this.SElECTS = new Array();for(var i=0;i<this.STR_ARRAY.length;i++){this.SElECTS[i] = cc.LayerColor.create(this.COLOR, this.WIDTH, this.HEIGHT);var txt = cc.LabelTTF.create(this.STR_ARRAY[i],"Arial",this.HEIGHT * 2/3);txt.setPosition(cc.p(this.WIDTH/2,this.HEIGHT/2));this.SElECTS[i].addChild(txt);this.SElECTS[i].setAnchorPoint(cc.p(0,1));this.SElECTS[i].setPosition(cc.p(0,0-(i+1)*this.HEIGHT));this.addChild(this.SElECTS[i]);}this.choose(0);this.setTouchEnabled(true);return true;},onTouchesBegan:function (touches, event){if(touches.length == 1){var click_id = null;for(var i=0;i<this.SElECTS.length;i++){if(cc.rectContainsPoint(this.SElECTS[i].getBoundingBox(),cc.p( touches[0].getLocation().x -this.getPositionX() ,  touches[0].getLocation().y -this.getPositionY()) )){click_id = i;break;} else{}}if(click_id != null){if(this.STATE == 0){if(click_id == this.SELECTING_ID){this.open();}}else if(this.STATE == 1){ this.choose(click_id);}}}},onTouchesMoved:function (touches, event){},onTouchesEnded:function (touches, event){},draw:function(){cc.drawingUtil.setDrawColor4B(255, 255, 255, 255);cc.drawingUtil.setLineWidth(3);cc.drawingUtil.drawLine(cc.p(0,0),cc.p(this.WIDTH,0));cc.drawingUtil.drawLine(cc.p(0,0),cc.p(0,this.HEIGHT));cc.drawingUtil.drawLine(cc.p(0,this.HEIGHT),cc.p(this.WIDTH,this.HEIGHT));cc.drawingUtil.drawLine(cc.p(this.WIDTH,this.HEIGHT),cc.p(this.WIDTH,0));},open:function(){this.STATE =1; for(var i=0;i<this.SElECTS.length;i++){    this.SElECTS[i].setPosition(cc.p(0,0-(i+1)*this.HEIGHT));    this.SElECTS[i].setVisible(true);    }},close:function(){this.STATE =0;for(var i=0;i<this.SElECTS.length;i++){this.SElECTS[i].setVisible(false);}},choose:function(id){this.SELECTING_ID = id;this.close();this.SElECTS[id].setVisible(true);this.SElECTS[id].setPosition(cc.p(0,0));},getSelectedID:function(){return this.SELECTING_ID;}});Pull_down_menu.create = function(color, width, height, str_array){var re = new Pull_down_menu();re.WIDTH = width;re.HEIGHT = height;re.COLOR = color;re.STR_ARRAY = str_array;re.init();return re;};

使用方法：

var pdm = Pull_down_menu.create(cc.c4(100,100,100,255),70,20,["丁丁","拉拉","迪西","小波"]);//第一個選項是底色，第二個是寬 第三個高 最後是一個字串數組pdm.setPosition(cc.p(170,winsize.height-150));this.addChild(pdm);//是用pdm.getSelectedID() 可以擷取選擇的選項卡的下標