Cocos2d-JS项目之二：studio基础控件的使用

在studio里把几个基础控件往场景文件一拖，然后导出json格式的资源文件

逻辑代码如下：

 var HelloWorldLayer = cc.Layer.extend({

     sprite:null,

     value : ,

    // self : this,

     ctor:function () {

         //////////////////////////////

         // 1. super init first

         this._super();

         /////////////////////////////

         // 2. add a menu item with "X" image, which is clicked to quit the program

         //    you may modify it.

         // ask the window size

         var size = cc.winSize;

         this.initUI();

         return true;

     },

     //init ui

     initUI : function(){

         var mainscene = ccs.load(res.MainScene_json);

         this.addChild(mainscene.node);

         var self = this;

         //   btn.addClickEventListener(this.btnClick);

         //   addTouchEventListener(this.backEvent,this);

         var btn = ccui.helper.seekWidgetByName(mainscene.node, "Button_9");

         btn.addClickEventListener(function(){

                 cc.log("btn_9 click: %d", self.value);

             });

         var checkBox = ccui.helper.seekWidgetByName(mainscene.node, "CheckBox_2");

         this.checkBox = checkBox;

         checkBox.addEventListener(this.selectedStateEvent, this);

         //slider addClickEventListener、addTouchEventListener 事件在鼠标松开时才触发 //

         // addEventListener 在按住并有移动时（值不一定有改变）就触发 //

         var slider = ccui.helper.seekWidgetByName(mainscene.node, "Slider_2");

         this.slider = slider;

         slider.addClickEventListener(function(){

             var percent = slider.getPercent();

             cc.log("addClickEventListener   %d", percent);

         });

         slider.addTouchEventListener(function(){

             var percent = slider.getPercent();

             cc.log("addTouchEventListener   %d", percent);

         });

         slider.addEventListener(this.sliderEvent,this);

         var textField = ccui.helper.seekWidgetByName(mainscene.node, "TextField_3");

         this.textFiel = textField;

         textField.addEventListener(this.textFieldEvent,this);

         var loadingBar = ccui.helper.seekWidgetByName(mainscene.node, "LoadingBar_2");

         this.loadingBar = loadingBar;

        // loadingBar.addTouchEventListener();

         var label = ccui.helper.seekWidgetByName(mainscene.node, "Text_2");

         this.label = label;

         var image = ccui.helper.seekWidgetByName(mainscene.node, "Image_1");

         this.image = image;

     },

     selectedStateEvent: function (sender, type) {

         switch (type) {

             case ccui.CheckBox.EVENT_SELECTED:

                 //this._topDisplayText.setString("Selected");

                 cc.log("checkbox select");

                 this.image.setVisible(true);

                 break;

             case ccui.CheckBox.EVENT_UNSELECTED:

                 //this._topDisplayText.setString("Unselected");

                 cc.log("checkbox unselect");

                 this.image.setVisible(false);

                 break;

             default:

                 break;

         }

     },

     sliderEvent: function (sender, type) {

         switch (type) {

             case ccui.Slider.EVENT_PERCENT_CHANGED:

                 var slider = sender;

                 var percent = slider.getPercent();

                // this._topDisplayText.setString("Percent " + percent.toFixed(0));

                 cc.log("addEventListener   %f", percent);

                 this.label.setString(Math.floor(percent));//setString(percent) 会在后面多一个点， 如 123.

                 break;

             default:

                 break;

         }

     },

     textFieldEvent: function (sender, type) {

         switch (type) {

             //get focus

             case ccui.TextField. EVENT_ATTACH_WITH_IME:

                 cc.log("attach with IME");

                 break;

             //lost focus

             case ccui.TextField. EVENT_DETACH_WITH_IME:

                 cc.log("detach with IME");

                 break;

             //insert word

             case ccui.TextField. EVENT_INSERT_TEXT:

                 var text = sender.getString();

                 var percent = parseInt(text);

                 this.loadingBar.setPercent(percent);

               //  cc.log(text);

                 break;

             //delete word

             case ccui.TextField. EVENT_DELETE_BACKWARD:

                 //cc.log("delete word");

                 var text = sender.getString();

                 var percent = parseInt(text);

                 this.loadingBar.setPercent(percent);

                 break;

             default:

                 break;

         }

     }

 });