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

var HelloWorldLayer = cc.Layer.extend({
sprite:null,
value : 90,
// 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;
}
}

});