CocosCreator的ToggleGroup組件使用

用了CocosCreator也有一段時間，對ToggleGroup始終沒有仔細的學習過，只停留在用過的水平。因此由於認識有限，因此覺得ToggleGroup對自定義支持得沒那麼好，這兩天由於項目，再學習了一下，發現ToggleGroup的toggleItems屬性有着很大的做用。

ToggleGroup的toggle事件對checkmark做的僅僅是隱藏和顯示，而對background節點着沒有做用，若是有一天，咱們想要點擊的時候checkmark顯示，而background隱藏的話，就能夠用到toggleItems。

這裏還有一個提示：當給toggleGroup動態增長toggle的時候，toggle組件的toggleGroup屬性是ToggleGroup組件，而不是掛着ToggleGroup組件的節點。

代碼爲：

var node = cc.instantiate(this.prefab);
node.getComponent(cc.Toggle).toggleGroup = this.getComponent(cc.ToggleGroup);
node.parent = this.node;
固然若是，想要獲取toggleGroup的toggle節點，也能夠用getChildByName或者相似的api來獲取，可是這種方法並不全面，由於雖然toggle節點基本上都是toggleGroup的子節點，可是總有例外，程序員不該該有這樣不嚴謹的邏輯。

而我我的對getChildByName這樣的api有點恐懼，由於這樣意味着會被束縛，這樣一來節點和子節點的關係會被束縛，子節點的名字會被束縛，並且代碼可讀性不好。

下面就寫一個點擊toggle的時候顯示checkmark隱藏background的實例。

代碼很簡單，並且寫一遍後，還能夠用在其餘toggle上面，複用性很好。

cc.Class({
extends: cc.Component,

properties: {
// foo: {
// default: null, // The default value will be used only when the component attaching
// to a node for the first time
// url: cc.Texture2D, // optional, default is typeof default
// serializable: true, // optional, default is true
// visible: true, // optional, default is true
// displayName: 'Foo', // optional
// readonly: false, // optional, default is false
// },
// ...
},

// use this for initialization
onLoad: function () {
this.node.on("toggle", this.onToggleChangeSpriteFrame, this);
},

onToggleChangeSpriteFrame : function() {
var toggle = this.getComponent(cc.Toggle);
var items = toggle.toggleGroup.toggleItems;
for(var i = 0; i < items.length; i++) {
items[i].target.active = true;
}
toggle.target.active = !toggle.isChecked;
},

// called every frame, uncomment this function to activate update callback
// update: function (dt) {

// },
});