Cocos2d-html5 simple drop-down form controls

I just asked in the CH5 group if there was any man who wroteDrop-down form ControlAh! No bird's nest,Teacher DZ said it was sad.As a result, write a share to everyone.

The last one only implements the most basic control. Don't worry about it. I will improve it later. It would be better if a friend volunteered to help improve it.

If you have any questions, add QQ 460418221 from DZ.

Engine version: 2.2.2

Principle: if you have time, try again.

Source code:

/*** Created with JetBrains WebStorm. * User: Dz_Yang * Date: 14-4-29 * Time: am * 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 <thi S. 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 ;};

Usage:

Var pdm = Pull_down_menu.create (cc. c4 (100,100,100,255), ["ding", "Lala", "Disi", "wavelet"]); // the first option is the background color, the second is width, the third is height, and the last is a string array pdm. setPosition (cc. p (170, winsize. height-150); this. addChild (pdm); // uses pdm. getSelectedID () can obtain the subscript of the Selected tab