cocos2djs 按钮的默认选中状态的简单实现

使用软件，cocos V3.10大集合 Mac系统

需求：同一个界面上三个按钮，每个按钮对应不同的操作，默认显示一个按钮为选中状态，其他两个为未选中状态，操作中点击那个按钮那个为选中状态，其他变为未选中状态

一，首先我们使用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)