需求：同一個界面上三個按鈕，每個按鈕對應不同的操作，默認顯示一個按鈕為選中狀態，其他兩個為未選中狀態，操作中點擊那個按鈕那個為選中狀態，其他變為未選中狀態

一，首先我們使用cocos新建一個Cocos2d-js的新項目，然后再cocostudio中創建一個場景，在場景中添加三個按鈕分別設置三態的圖片

二，打開編輯器，實現代碼如下

 1 var HelloWorldLayer = cc.Layer.extend({
 2 
 3     ctor:function () {
 4 
 5         this._super();
 6 
 7         //導入cocostudio中拼好的界面
 8         mainscene = ccs.load(res.MainScene_json).node;
 9         this.addChild(mainscene);
10 
11         this.teamButton = ccui.helper.seekWidgetByName(mainscene,"Button_0");
12         var btn2 = ccui.helper.seekWidgetByName(mainscene,"Button_1");
13         var btn3 = ccui.helper.seekWidgetByName(mainscene,"Button_2");
14 
15 
16 
17          //先默認設置一個按鈕為選中狀態   this.teamButton.setBrightStyle(ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT);
18         this.teamButton.setEnabled(false);
19         var teamInfo = this.teamButton;
20 
21 
22         this.teamButton.addTouchEventListener(this.selectedBtn1,this);
23         btn2.addTouchEventListener(this.selectedBtn2,this);
24         btn3.addTouchEventListener(this.selectedBtn3,this);
25 
26         return true;
27     },
28 
29     selectedBtn1: function (sender, type) {
30         if(type == ccui.Widget.TOUCH_ENDED){
31             this.callBack(sender);
32             cc.log("==========商店界面");
33         }
34 
35     },
36     selectedBtn2: function (sender, type) {
37         if(type == ccui.Widget.TOUCH_ENDED){
38             this.callBack(sender);
39             cc.log("==========卡牌界面");
40         }
41 
42     },
43     selectedBtn3: function (sender, type) {
44         if(type == ccui.Widget.TOUCH_ENDED){
45             this.callBack(sender);
46             cc.log("==========戰斗界面");
47         }
48 
49     },
50 
51     callBack: function (sender) {
52         if (this.teamButton == sender){
53             return;
54         }else{
55             this.teamButton.setBrightStyle(ccui.Widget.BRIGHT_STYLE_NORMAL);
56             this.teamButton.setEnabled(true);
57             sender.setBrightStyle(ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT);
58             sender.setEnabled(false);
59             this.teamButton = sender;
60         }
61     },
62 });
63 
64 
65 
66 var HelloWorldScene = cc.Scene.extend({
67     onEnter:function () {
68         this._super();
69         var layer = new HelloWorldLayer();
70         this.addChild(layer);
71     }
72 });

三，運行就可以查看界面，點擊不同的按鈕顯示不同的輸出結果

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 cocos2d-js實現雙擊android后退按鈕即退出游戲 cocos2d-js 創建幀動畫 cocos2d-js callFunc傳參 Cocos2d-js和Android交互 [cocos2d-js]chipmunk例子（二） Windows搭建Cocos2d-JS環境 Cocos2d-JS坐標系統 Cocos2d-JS項目之四：UI界面的優化 cocos2d-js 各瀏覽器上的表現 Cocos2d-JS工程中的文件結構