Question

cocos js 怎样做出按钮选中效果

Answer 1

cocos js 做出按钮选中效果示例：

一，首先使用cocos新建一个Cocos2d-js的新项目，然后再cocostudio中创建一个场景，在场景中添加三个按钮分别设置三态的图片

二，打开编辑器，实现代码如下：

var HelloWorldLayer = cc.Layer.extend({

ctor:function () {

this._super();

//导入cocostudio中拼好的界面

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

this.addChild(mainscene);

this.teamButton = ccui.helper.seekWidgetByName(mainscene,"Button_0");

var btn2 = ccui.helper.seekWidgetByName(mainscene,"Button_1");

var btn3 = ccui.helper.seekWidgetByName(mainscene,"Button_2");

//先默认设置一个按钮为选中状态   this.teamButton.setBrightStyle(ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT);

this.teamButton.setEnabled(false);

var teamInfo = this.teamButton;

this.teamButton.addTouchEventListener(this.selectedBtn1,this);

btn2.addTouchEventListener(this.selectedBtn2,this);

btn3.addTouchEventListener(this.selectedBtn3,this);

return true;

},

selectedBtn1: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender);

cc.log("==========商店界面");

}

},

selectedBtn2: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender);

cc.log("==========卡牌界面");

}

},

selectedBtn3: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender);

cc.log("==========战斗界面");

}

},

callBack: function (sender) {

if (this.teamButton == sender){

return;

}else{

this.teamButton.setBrightStyle(ccui.Widget.BRIGHT_STYLE_NORMAL);

this.teamButton.setEnabled(true);

sender.setBrightStyle(ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT);

sender.setEnabled(false);

this.teamButton = sender;

}

},

});

var HelloWorldScene = cc.Scene.extend({

onEnter:function () {

this._super();

var layer = new HelloWorldLayer();

this.addChild(layer);

}

});

三，运行就可以查看界面，点击不同的按钮显示不同的输出结果

[Log] ==========商店界面 (CCDebugger.js, line 331)

[Log] ==========卡牌界面 (CCDebugger.js, line 331)

[Log] ==========战斗界面 (CCDebugger.js, line 331)