在studio里把几个基础控件往场景文件一拖,然后导出json格式的资源文件
逻辑代码如下:
1 var HelloWorldLayer = cc.Layer.extend({ 2 sprite:null, 3 value : 90, 4 // self : this, 5 ctor:function () { 6 // 7 // 1. super init first 8 this._super(); 9 10 ///// 11 // 2. add a menu item with "X" image, which is clicked to quit the program 12 // you may modify it. 13 // ask the window size 14 var size = cc.winSize; 15 16 this.initUI(); 17 18 return true; 19 }, 20 21 //init ui 22 initUI : function(){ 23 var mainscene = ccs.load(res.MainScene_json); 24 this.addChild(mainscene.node); 25 26 var self = this; 27 // btn.addClickEventListener(this.btnClick); 28 // addTouchEventListener(this.backEvent,this); 29 30 var btn = ccui.helper.seekWidgetByName(mainscene.node, "Button_9"); 31 btn.addClickEventListener(function(){ 32 cc.log("btn_9 click: %d", self.value); 33 }); 34 35 36 var checkBox = ccui.helper.seekWidgetByName(mainscene.node, "CheckBox_2"); 37 this.checkBox = checkBox; 38 checkBox.addEventListener(this.selectedStateEvent, this); 39 40 //slider addClickEventListener、addTouchEventListener 事件在鼠标松开时才触发 // 41 // addEventListener 在按住并有移动时(值不一定有改变)就触发 // 42 var slider = ccui.helper.seekWidgetByName(mainscene.node, "Slider_2"); 43 this.slider = slider; 44 slider.addClickEventListener(function(){ 45 var percent = slider.getPercent(); 46 cc.log("addClickEventListener %d", percent); 47 }); 48 49 slider.addTouchEventListener(function(){ 50 var percent = slider.getPercent(); 51 cc.log("addTouchEventListener %d", percent); 52 }); 53 54 slider.addEventListener(this.sliderEvent,this); 55 56 57 var textField = ccui.helper.seekWidgetByName(mainscene.node, "TextField_3"); 58 this.textFiel = textField; 59 textField.addEventListener(this.textFieldEvent,this); 60 61 var loadingBar = ccui.helper.seekWidgetByName(mainscene.node, "LoadingBar_2"); 62 this.loadingBar = loadingBar; 63 // loadingBar.addTouchEventListener(); 64 65 var label = ccui.helper.seekWidgetByName(mainscene.node, "Text_2"); 66 this.label = label; 67 68 var image = ccui.helper.seekWidgetByName(mainscene.node, "Image_1"); 69 this.image = image; 70 71 }, 72 73 selectedStateEvent: function (sender, type) { 74 switch (type) { 75 case ccui.CheckBox.EVENT_SELECTED: 76 //this._topDisplayText.setString("Selected"); 77 cc.log("checkbox select"); 78 this.image.setVisible(true); 79 break; 80 case ccui.CheckBox.EVENT_UNSELECTED: 81 //this._topDisplayText.setString("Unselected"); 82 cc.log("checkbox unselect"); 83 this.image.setVisible(false); 84 break; 85 86 default: 87 break; 88 } 89 }, 90 91 sliderEvent: function (sender, type) { 92 switch (type) { 93 case ccui.Slider.EVENT_PERCENT_CHANGED: 94 var slider = sender; 95 var percent = slider.getPercent(); 96 // this._topDisplayText.setString("Percent " + percent.toFixed(0)); 97 cc.log("addEventListener %f", percent); 98 this.label.setString(Math.floor(percent));//setString(percent) 会在后面多一个点, 如 123. 99 break; 100 default: 101 break; 102 } 103 }, 104 105 textFieldEvent: function (sender, type) { 106 107 switch (type) { 108 //get focus 109 case ccui.TextField. EVENT_ATTACH_WITH_IME: 110 cc.log("attach with IME"); 111 break; 112 //lost focus 113 case ccui.TextField. EVENT_DETACH_WITH_IME: 114 cc.log("detach with IME"); 115 break; 116 //insert word 117 case ccui.TextField. EVENT_INSERT_TEXT: 118 var text = sender.getString(); 119 var percent = parseInt(text); 120 this.loadingBar.setPercent(percent); 121 // cc.log(text); 122 break; 123 //delete word 124 case ccui.TextField. EVENT_DELETE_BACKWARD: 125 //cc.log("delete word"); 126 var text = sender.getString(); 127 var percent = parseInt(text); 128 this.loadingBar.setPercent(percent); 129 break; 130 default: 131 break; 132 } 133 } 134 135 });