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

时间:2023-03-08 22:19:25
Cocos2d-JS项目之二:studio基础控件的使用

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

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

逻辑代码如下:

 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;
}
} });