cocos2d-html5 简易 下拉表单 控件

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

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

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

引擎版本 ： 2.2.2

原理：有空再写吧  

源码：

[javascript] view plaincopyprint?

 

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?

 

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() 可以获取选择的选项卡的下标