菜单按钮

本节就介绍一下cocos-html5的菜单类，总得来说菜单一共分为3大类，共5种显示菜单的方式。

第一类：文字类菜单

1. cc.MenuItemLabel

[javascript]  view plain  copy

1. var label1 = cc.LabelBMFont.create("Test1", s_bitmapFontTest3_fnt);  
2. var item1 = cc.MenuItemLabel.create(label1, this.onMenuCallback1, this);<span style="font-family:Arial,Helvetica,sans-serif"> </span>  

参数1：显示的文本label

参数2：触发的函数

参数3：触发的目标对象，一般在此场景中就用this

注意：需要设置label的样式，需要一个.fnt自定义字体表

2.cc.MenuItemFont

[javascript]  view plain  copy

1. cc.MenuItemFont.setFontName("Arial");  
2. var item2 = cc.MenuItemFont.create("Test2", this.onMenuCallback2, this);  

参数1：显示的文本label

参数2：触发的函数

参数3：触发的目标对象

注意：需要设置label的字体，setFontName("Arial")，即系统自带的字体名称。

第二类：图片类菜单

3.cc.MenuItemSprite

[javascript]  view plain  copy

1. var spriteNormal = cc.Sprite.create(s_menuItem, cc.rect(0,23*2,115,23));  
2. var spriteSelected = cc.Sprite.create(s_menuItem, cc.rect(0,23,115,23));  
3. var spriteDisabled = cc.Sprite.create(s_menuItem, cc.rect(0,0,115,23));  
4. var item3 = cc.MenuItemSprite.create(spriteNormal, spriteSelected, spriteDisabled, this.onMenuCallback3, this);  

参数1：正常显示的图片(新建的图片后面带了一个cc.rect是设置图片区域大小，也就是按钮的区域)

参数2：选中显示的图片

参数3：不可用显示的图片

参数4：触发的函数

参数5：触发的目标对象

4.cc.MenuItemImage

[javascript]  view plain  copy

1. var item4 = cc.MenuItemImage.create(s_sendScore, s_pressSendScore, this.onMenuCallback4, this);  

参数1：正常显示的图片

参数2：选中显示的图片

参数3：触发的函数

参数4：触发的目标对象

注意：正常和选中的图片都最好事先在resource.js文件中标注好，让系统首先预加载

第三类：开关类菜单

5.cc.MenuItemToggle

[javascript]  view plain  copy

1. var item5 = cc.MenuItemToggle.create(cc.MenuItemFont.create("On"),cc.MenuItemFont.create("Off"));  
2. item5.setCallback(this.onMenuCallback, this);  

可以这样用文本建立两个不同状态的按钮，每当点击时，就会更改字体的状态。

或者也可以这样建立多个，每点击一次就逐个更改

[javascript]  view plain  copy

1. var item4 = cc.MenuItemToggle.create(  
2.             cc.MenuItemFont.create("Off"),  
3.             cc.MenuItemFont.create("33%"),  
4.             cc.MenuItemFont.create("66%"),  
5.             cc.MenuItemFont.create("100%"),  
6.             this.onMenuCallback, this  
7.         );  

当建立完菜单选项之后我们还需要建立一个菜单“大管家”，把这些选项显示出来

[javascript]  view plain  copy

1. var menu = cc.Menu.create(item1,item2,item3,item4,item5);  
2. menu.setPosition(cc.PointZero);  
3. this.addChild(menu);  

这里就不需要像cocos2d-x里面那样item后面结束添加一个NULL，只需要把所有的添加进去就好了，菜单选项的位置设置相对屏幕的位置，然后把菜单管家的位置设置在原点就ok了。

以上就是cocos2d-html5提供的菜单选项，可以尝试都试着显示一下，不过比较常用还是cc.MenuItemImage，这个很方便，而且效果很好