Simple implementation of the default selected state of the Cocos2d-js button

Using software, Cocos V3.10 large collection Mac system

Requirements: Three buttons on the same interface, each button corresponding to different actions, the default display of a button is selected, the other two is unchecked, the action of clicking the button that is selected, the other becomes unchecked

First, we start by using Cocos to create a new COCOS2D-JS project, and then creating a scene in Cocostudio, adding three buttons to the scene to set the three-state picture, respectively.

Second, open the editor, the implementation code is as follows

1 varHelloworldlayer =cc. Layer.extend ({2 3ctorfunction () {4 5          This. _super ();6 7         //Import the Cocostudio interface in the8Mainscene =Ccs.load (Res. Mainscene_json). node;9          This. AddChild (mainscene);Ten  One          This. Teambutton = Ccui.helper.seekWidgetByName (Mainscene, "Button_0"); A         varBTN2 = Ccui.helper.seekWidgetByName (Mainscene, "button_1"); -         varBtn3 = Ccui.helper.seekWidgetByName (Mainscene, "button_2"); -  the  -  -          //the default setting of a button is the selected state This.teamButton.setBrightStyle (ccui. Widget.bright_style_high_light); -          This. teambutton.setenabled (false); +         varTeaminfo = This. Teambutton; -  +  A          This. Teambutton.addtoucheventlistener ( This. SELECTEDBTN1, This); atBtn2.addtoucheventlistener ( This. SELECTEDBTN2, This); -Btn3.addtoucheventlistener ( This. SelectedBtn3, This); -  -         return true; -     }, -  inSELECTEDBTN1:function(sender, type) { -         if(Type = =Ccui. widget.touch_ended) { to              This. CallBack (sender); +Cc.log ("========== Shop Interface"); -         } the  *     }, $SELECTEDBTN2:function(sender, type) {Panax Notoginseng         if(Type = =Ccui. widget.touch_ended) { -              This. CallBack (sender); theCc.log ("========== Card Interface"); +         } A  the     }, +SELECTEDBTN3:function(sender, type) { -         if(Type = =Ccui. widget.touch_ended) { $              This. CallBack (sender); $Cc.log ("========== Combat Interface"); -         } -  the     }, - WuyiCallBack:function(sender) { the         if( This. Teambutton = =sender) { -             return; Wu}Else{ -              This. Teambutton.setbrightstyle (ccui. Widget.bright_style_normal); About              This. teambutton.setenabled (true); $ Sender.setbrightstyle (ccui. Widget.bright_style_high_light); -Sender.setenabled (false); -              This. Teambutton =Sender; -         } A     }, + }); the  -  $  the varHelloworldscene =cc. Scene.extend ({ theOnEnter:function () { the          This. _super (); the         varLayer =NewHelloworldlayer (); -          This. AddChild (layer); in     } the});

Three, the operation can see the interface, click on different buttons to display different output results

[Log] ========== Store interface (Ccdebugger.js, line 331)
[Log] ========== Card Interface (ccdebugger.js, line 331)
[Log] ========== Combat Interface (Ccdebugger.js, line 331)

Simple implementation of the default selected state of the Cocos2d-js button