cocos2d-html5 简易 下拉表单 控件

刚才在CH5的群里问了问  有没有大侠写过 下拉表单控件啊!  没人鸟窝 ,DZ老师表示很伤心啊  ,于是乎  自己写一个把 共享给大家。

效果图上一个  只实现了一个最最基本的控件  很简单  别吐槽啊,以后有空我会完善一下的,如果有朋友自愿帮忙完善一下就更好了。

有任何问题请加DZ老师的QQ 460418221

 

引擎版本 : 2.2.2

 

原理:有空再写吧  

 

源码:

 

 

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
 
  1. /** 
  2.  * Created with JetBrains WebStorm. 
  3.  * User: Dz_Yang 
  4.  * Date: 14-4-29 
  5.  * Time: 上午13:19 
  6.  * To change this template use File | Settings | File Templates. 
  7.  */  
  8.   
  9.   
  10. var Pull_down_menu = cc.Layer.extend({  
  11.     WIDTH:0,  
  12.     HEIGHT:0,  
  13.     COLOR:null,  
  14.     STR_ARRAY:null,  
  15.   
  16.     SElECTS:null,  
  17.     SELECTING_ID:null,  
  18.   
  19.     STATE:0,  
  20.   
  21.     init:function(){  
  22.         this._super();  
  23.         var winsize = cc.Director.getInstance().getWinSize();  
  24.          this.SElECTS = new Array();  
  25.   
  26.         for(var i=0;i<this.STR_ARRAY.length;i++){  
  27.             this.SElECTS[i] = cc.LayerColor.create(this.COLOR, this.WIDTH, this.HEIGHT);  
  28.             var txt = cc.LabelTTF.create(this.STR_ARRAY[i],"Arial",this.HEIGHT * 2/3);  
  29.             txt.setPosition(cc.p(this.WIDTH/2,this.HEIGHT/2));  
  30.             this.SElECTS[i].addChild(txt);  
  31.             this.SElECTS[i].setAnchorPoint(cc.p(0,1));  
  32.             this.SElECTS[i].setPosition(cc.p(0,0-(i+1)*this.HEIGHT));  
  33.             this.addChild(this.SElECTS[i]);  
  34.         }  
  35.   
  36.   
  37.   
  38.         this.choose(0);  
  39.   
  40.   
  41.         this.setTouchEnabled(true);  
  42.         return true;  
  43.     },  
  44.   
  45.     onTouchesBegan:function (touches, event){  
  46.         if(touches.length == 1){  
  47.             var click_id = null;  
  48.   
  49.             for(var i=0;i<this.SElECTS.length;i++){  
  50.                 if(cc.rectContainsPoint(this.SElECTS[i].getBoundingBox(),cc.p( touches[0].getLocation().x -this.getPositionX() ,  touches[0].getLocation().y -this.getPositionY()) )){  
  51.                     click_id = i;  
  52.   
  53.                     break;  
  54.                 } else{  
  55.   
  56.                 }  
  57.             }  
  58.   
  59.             if(click_id != null){  
  60.                 if(this.STATE == 0){  
  61.                     if(click_id == this.SELECTING_ID){  
  62.                         this.open();  
  63.                     }  
  64.                 }else if(this.STATE == 1){  
  65.                      this.choose(click_id);  
  66.                 }  
  67.             }  
  68.   
  69.   
  70.         }  
  71.     },  
  72.     onTouchesMoved:function (touches, event){},  
  73.     onTouchesEnded:function (touches, event){},  
  74.   
  75.     draw:function(){  
  76.         cc.drawingUtil.setDrawColor4B(255, 255, 255, 255);  
  77.         cc.drawingUtil.setLineWidth(3);  
  78.         cc.drawingUtil.drawLine(cc.p(0,0),cc.p(this.WIDTH,0));  
  79.         cc.drawingUtil.drawLine(cc.p(0,0),cc.p(0,this.HEIGHT));  
  80.         cc.drawingUtil.drawLine(cc.p(0,this.HEIGHT),cc.p(this.WIDTH,this.HEIGHT));  
  81.         cc.drawingUtil.drawLine(cc.p(this.WIDTH,this.HEIGHT),cc.p(this.WIDTH,0));  
  82.           
  83.   
  84.     },  
  85.   
  86.     open:function(){  
  87.   
  88.         this.STATE =1;  
  89.         for(var i=0;i<this.SElECTS.length;i++){  
  90.             this.SElECTS[i].setPosition(cc.p(0,0-(i+1)*this.HEIGHT));  
  91.             this.SElECTS[i].setVisible(true);  
  92.         }  
  93.     },  
  94.     close:function(){  
  95.         this.STATE =0;  
  96.         for(var i=0;i<this.SElECTS.length;i++){  
  97.             this.SElECTS[i].setVisible(false);  
  98.         }  
  99.     },  
  100.   
  101.     choose:function(id){  
  102.         this.SELECTING_ID = id;  
  103.         this.close();  
  104.         this.SElECTS[id].setVisible(true);  
  105.         this.SElECTS[id].setPosition(cc.p(0,0));  
  106.     },  
  107.   
  108.     getSelectedID:function(){  
  109.         return this.SELECTING_ID;  
  110.     }  
  111.   
  112. });  
  113.   
  114. Pull_down_menu.create = function(color, width, height, str_array){  
  115.     var re = new Pull_down_menu();  
  116.     re.WIDTH = width;  
  117.     re.HEIGHT = height;  
  118.     re.COLOR = color;  
  119.     re.STR_ARRAY = str_array;  
  120.     re.init();  
  121.     return re;  
  122.   
  123. };  

使用方法:

 

[javascript] view plaincopyprint?在CODE上查看代码片派生到我的代码片
 
  1. var pdm = Pull_down_menu.create(cc.c4(100,100,100,255),70,20,["丁丁","拉拉","迪西","小波"]);//第一个选项是底色,第二个是宽 第三个高 最后是一个字符串数组  
  2.         pdm.setPosition(cc.p(170,winsize.height-150));  
  3.         this.addChild(pdm);//是用pdm.getSelectedID() 可以获取选择的选项卡的下标 

 

 

 

 

 

Para obtener información más completa sobre las optimizaciones del compilador, consulte nuestro Aviso de optimización.