菜单（Menu）的使用

一、菜单项的属性

     1、label：菜单项名称。

     2、type：菜单项类型。包括：normal、check、radio、separator。

     3、enabled：菜单项是否可用，true or false。

     4、toggled：当菜单项选中时返回true，否则，返回false。当type属性值为check或radio时有效。

     5、groupName：在type属性值为radio时使用该属性，类似于radioButton组件中的groupName。

     6、icon：菜单项的图标。

 

二、菜单控件（Menu Control）

      菜单控件通常是在用户交互事件后弹出，所以没有MXML标签与之对应，只能通过ActionScript定义。

      源码如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.events.MenuEvent;
			import mx.controls.Menu;
            
			private var menuData: Array = [
				{label: "menu1", children:[
					{label: "menu1-1", enabled: false},
					{label: "menu1-2", type: "normal"}
				]},
				{label: "menu2", type: "check", toggled: true, data: "data"},
				{label: "menu3", type: "check", toggled: false},
				{label: "menu4", type: "separator"},
				{label: "menu5", children:[
					{label: "menu5-1", type: "radio", groupName: "g1"},
					{label: "menu5-2", type: "radio", groupName: "g1", toggled: true},
					{label: "menu5-3", type: "radio", groupName: "g1"}
				]}
			];

			private function createAndShow():void{
				var mnu: Menu = Menu.createMenu(null, menuData, false); //创建菜单控件实例
				mnu.addEventListener(MenuEvent.ITEM_CLICK, menuItemClick);//为菜单控件添加事件监听及处理
				mnu.show(btn1.x, btn1.y+btn1.height);//现实菜单
			}

			private function menuItemClick(event: MenuEvent):void{
				Alert.show(event.item.label + "\n" + event.item.data);
			}
		]]>
	</mx:Script>
	
	<mx:Button id="btn1" x="10" y="189" label="菜单控件例子" click="createAndShow()" fontSize="12"/>
	
</mx:Application>

 

 

三、菜单栏控件（MenuBar Control）

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.MenuEvent;
			import mx.controls.Menu;

			private function menubarItemClick(event: MenuEvent):void{
				if(event.item.@data != "top"){
					Alert.show(event.item.@label + ", " + event.item.@data);
				}
			}
		]]>
	</mx:Script>
	
	<mx:Panel x="10" y="10" width="296" height="158" layout="absolute" title="MenuBar控件例子" fontSize="12">
		<mx:MenuBar x="10" y="10" width="202" fontSize="12" labelField="@label" showRoot="false" itemClick="menubarItemClick(event)">
			<mx:XMLList xmlns="">
				<menu label="文件" data="top">
					<menu label="新建" data="new"/>
					<menu label="打开" data="open"/>
					<menu label="导出" data="top">
						<menu label="导出Html" type="radio" groupName="exp" toggled="true" data="html"/>
						<menu label="导出Excel" type="radio" groupName="exp" data="excel"/>
						<menu label="导出Pdf" type="radio" groupName="exp" data="pdf"/>
						<menu label="导出Word" type="radio" groupName="exp" data="word"/>
					</menu>
					<menu type="separator"/>
					<menu label="关闭" data="close"/>
				</menu>
				<menu label="编辑" data="top">
					<menu label="剪切" data="cut"/>
					<menu label="复制" data="copy"/>
					<menu label="粘贴" data="paste"/>
					<menu type="separator"/>
					<menu label="删除" data="delete"/>
				</menu>
			</mx:XMLList>
		</mx:MenuBar>
	</mx:Panel>
</mx:Application>

 

 

三、弹出式按钮菜单控件（PopUpMenuButton Control）

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.MenuEvent;
			import mx.controls.Menu;
			
			[Bindable]
			private var data2: Array = [
				{label: "menu1", data: "data1"},
				{label: "menu2", data: "data2"},
				{label: "menu3", data: "data3"},
				{label: "menu4", data: "data4"},
				{label: "menu5", data: "data5"}
			];
			
			private function click1(event:MenuEvent):void{
				Alert.show(event.index + "\n" + event.item.label + "\n" + event.item.data);
			}
		]]>
	</mx:Script>
	
	<mx:PopUpMenuButton id="p1" x="367" y="183" 
		label="PopUpMenu" 
		icon="@Embed(source='images/msg.png')" 
		width="143" 
		fontSize="12" 
		dataProvider="{data2}"
		itemClick="click1(event)"/>
	
</mx:Application>