flex---->菜单设计

最新推荐文章于 2017-05-12 20:35:08 发布
最新推荐文章于 2017-05-12 20:35:08 发布
阅读量2.4k 收藏
点赞数
分类专栏： Flex 文章标签： application menu function encoding import layout

 菜单设计

菜单主要的作用就是功能模块的导航，通过菜单，用户可以快速的切换到需要的功能。Flex中的菜单大体有三种：上下文菜单、菜单条以及弹出式菜单

一、上下文菜单的设计
上下文菜单是菜单的基础形式，如常用的右键菜单。上下文菜单定义比较灵活，可以在任意位置、任意组件上弹出菜单。

1.1 使用Menu控件创建菜单
在Flex中，上下文菜单的设计需要依靠Menu类来实现。在Menu类的createMenu方法中，已经定义了创建菜单所需要的基本要素，并以参数的形式设置。createMenu方法的语法格式如下所示。 public static function createMenu(parent:DisplayObjectContainer, mdp:Object, showRoot:Boolean = true):Menu 参数说明：
parent：放置菜单控件的父容器。
mdp：菜单控件显示的数据源。
showRoot：在菜单上是否显示数据源的根节点。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:Style>
		.MenuStyle
		{
			fontSize : 14;
		}
	</mx:Style>
	
	<mx:Script>
		<![CDATA[
			// 导入 Menu 类
			import mx.controls.Menu;
			// 创建一个 Menu 控件
			private function createAndShow():void 
			{
				var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
				myMenu.labelField="@label";
				myMenu.styleName = "MenuStyle";
				myMenu.show(myButton.x + myButton.width, myButton.y + myButton.height);
			}
		]]>
	</mx:Script>
	
	<!-- 定义菜单数据 -->
	<mx:XML format="e4x" id="myMenuData">
		<root>
			<menuitem label="菜单 A" >
				<menuitem label="子菜单 A-1" enabled="false"/>
				<menuitem label="子菜单 A-2"/>
			</menuitem>
			<menuitem label="菜单 B" type="check" toggled="true"/>
			<menuitem label="菜单 C" type="check" toggled="false"/>
			<menuitem type="separator"/>
			<menuitem label="菜单 D" >
				<menuitem label="子菜单 D-1" type="radio" groupName="one"/>
				<menuitem label="子菜单 D-2" type="radio" groupName="one" toggled="true"/>
				<menuitem label="子菜单 D-3" type="radio" groupName="one"/>
			</menuitem>
		</root>
	</mx:XML>

	<mx:Button id="myButton" label="打开菜单" fontSize="14" 
		click="createAndShow();" x="31" y="27"/>

</mx:Application>


1.2 菜单事件
在菜单控件中，定义了几个常用的事件，包括单击菜单项、更改当前选择菜单、菜单显示和隐藏等。这些事件类型包含在MenuEvent类中，

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:Style>
		.MenuStyle
		{
			fontSize : 14;
		}
	</mx:Style>
	
	<mx:Script>
		<![CDATA[
			import mx.events.MenuEvent;
			// 导入 Menu 类
			import mx.controls.Menu;
			
			// 创建一个 Menu 控件
			private function createAndShow():void 
			{
				var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
				myMenu.labelField="@label";
				myMenu.styleName = "MenuStyle";
				// 添加事件
				myMenu.addEventListener(MenuEvent.ITEM_CLICK, itemClickInfo);
				myMenu.show(myButton.x + myButton.width, myButton.y + myButton.height);
			}
			
			// 菜单事件方法
			private function itemClickInfo(event:MenuEvent):void 
			{
				ta1.text="event.type: " + event.type;
				ta1.text+="\nevent.index: " + event.index;
				ta1.text+="\nItem label: " + event.item.@label
				ta1.text+="\nItem selected: " + event.item.@toggled;
				ta1.text+= "\nItem type: " + event.item.@type;
			}
		]]>
	</mx:Script>
	
	<!-- 定义菜单数据 -->
	<mx:XML format="e4x" id="myMenuData">
		<root>
			<menuitem label="菜单 A" >
				<menuitem label="子菜单 A-1" enabled="false"/>
				<menuitem label="子菜单 A-2"/>
			</menuitem>
			<menuitem label="菜单 B" type="check" toggled="true"/>
			<menuitem label="菜单 C" type="check" toggled="false"/>
			<menuitem type="separator"/>
			<menuitem label="菜单 D" >
				<menuitem label="子菜单 D-1" type="radio" groupName="one"/>
				<menuitem label="子菜单 D-2" type="radio" groupName="one" toggled="true"/>
				<menuitem label="子菜单 D-3" type="radio" groupName="one"/>
			</menuitem>
		</root>
	</mx:XML>

	<mx:Button id="myButton" label="打开菜单" fontSize="14" 
		click="createAndShow();" x="31" y="27"/>
	
	<mx:TextArea x="31" y="82" fontSize="12" width="200" height="100" id="ta1"/>

</mx:Application>

二、 菜单条
菜单条是一个显示顶级菜单项的横向条目。单击每个顶级菜单都会弹出一个子菜单。菜单条是继承了Menu类，所以，具有和Menu控件同样的事件。

2.1 使用MenuBar控件创建菜单
菜单条的设计要依赖于MenuBar控件，这个是在Flex中已经提供了。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:MenuBar id="myMenuBar" labelField="@label" fontSize="14">
		<mx:XMLList>
			<menuitem label="菜单 A" >
				<menuitem label="子菜单 A-1" enabled="false"/>
				<menuitem label="子菜单 A-2"/>
			</menuitem>
			<menuitem label="菜单 B" type="check" toggled="true"/>
			<menuitem label="菜单 C" type="check" toggled="false"/>
			<menuitem type="separator"/>
			<menuitem label="菜单 D" >
				<menuitem label="子菜单 D-1" type="radio" groupName="one"/>
				<menuitem label="子菜单 D-2" type="radio" groupName="one" toggled="true"/>
				<menuitem label="子菜单 D-3" type="radio" groupName="one"/>
			</menuitem>
		</mx:XMLList>
	</mx:MenuBar>

</mx:Application>

2.2 菜单事件
由于MenuBar控件是继承自Menu类的，所以具有Menu类的所有事件特性。

<?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;
			
			// MenuBar 控件的 change 事件.
			private function changeHandler(event:MenuEvent):void 
			{
				// 获取选中项目的 label 属性
				if (event.menu != null) 
				{
					Alert.show("Label: " + event.item.@label);
				}
			}
			
			// MenuBar 控件的 itemRollOver 事件.
			private function rollOverHandler(event:MenuEvent):void 
			{
				rollOverTextArea.text = "type: " + event.type + "\n";
				rollOverTextArea.text += "target menuBarIndex: " +
				event.index + "\n";
			}
			
			// MenuBar 控件的 itemClick 事件.
			private function itemClickHandler(event:MenuEvent):void 
			{
				itemClickTextArea.text = "type: " + event.type + "\n";
				itemClickTextArea.text += "target menuBarIndex: " +
				event.index + "\n";
			}
		]]>
	</mx:Script>

	<mx:MenuBar id="myMenuBar" labelField="@label" fontSize="14"
		change="changeHandler(event);" itemClick="itemClickHandler(event);"
		itemRollOver="rollOverHandler(event);">
		<mx:XMLList>
			<menuitem label="菜单 A" >
				<menuitem label="子菜单 A-1" enabled="false"/>
				<menuitem label="子菜单 A-2"/>
			</menuitem>
			<menuitem label="菜单 B" type="check" toggled="true"/>
			<menuitem label="菜单 C" type="check" toggled="false"/>
			<menuitem type="separator"/>
			<menuitem label="菜单 D" >
				<menuitem label="子菜单 D-1" type="radio" groupName="one"/>
				<menuitem label="子菜单 D-2" type="radio" groupName="one" toggled="true"/>
				<menuitem label="子菜单 D-3" type="radio" groupName="one"/>
			</menuitem>
		</mx:XMLList>
	</mx:MenuBar>
	
	<mx:TextArea id="rollOverTextArea" width="200" height="100" x="10" y="64"/>
	<mx:TextArea id="itemClickTextArea" width="200" height="100" x="218" y="64"/>

</mx:Application>

三、 弹出式按钮菜单的设计
弹出式按钮菜单是一个以按钮的形式弹出的菜单。当用户单击按钮时，会弹出一个顶级的菜单项。与菜单和菜单条不同，弹出式按钮菜单只支持顶级菜单。

3.1 使用PopUpMenuButton控件创建菜单
要设计一个弹出式按钮菜单，需要使用Flex中提供的PopUpMenuButton控件。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[	
			// 菜单数据
			[Bindable]
			public var menuDP:Array = 
			[
				{label: "收件箱", data: "inbox"},
				{label: "日历", data: "calendar"},
				{label: "发件箱", data: "sent"},
				{label: "已删除邮件", data: "deleted"},
				{label: "垃圾邮件", data: "spam"}
			];
		]]>
	</mx:Script>
	<mx:PopUpMenuButton id="p1"
		showRoot="true"
		dataProvider="{menuDP}"
		fontSize="14"
	 x="33" y="31"/>
</mx:Application>


3.2 菜单事件
PopUpMenuButton是PopUpButton控件的子类，所以，PopUpMenuButton控件支持PopUpButton控件的所有事件。

<?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.*;
			import mx.controls.*;
			
			// 初始化数据
			private function initData():void 
			{
				Menu(p1.popUp).selectedIndex = 3;
			}
			
			// itemClick 事件
			// 获取 label 和 data 属性的值,
			// 获取索引 index
			public function itemClickHandler(event:MenuEvent):void 
			{
				Alert.show("itemClick event label: " + event.label
							+ " \nindex: " + event.index
							+ " \nitem.label: " + event.item.label
							+ " \nitem.data: " + event.item.data);
			}
			
			// 单击事件
			public function clickHandler(event:MouseEvent):void 
			{
				Alert.show(" Click Event currentTarget.label: "
				+ event.currentTarget.label);
			}
			
			// 菜单数据
			[Bindable]
			public var menuDP:Array = 
			[
				{label: "收件箱", data: "inbox"},
				{label: "日历", data: "calendar"},
				{label: "发件箱", data: "sent"},
				{label: "已删除邮件", data: "deleted"},
				{label: "垃圾邮件", data: "spam"}
			];
		]]>
	</mx:Script>
	<mx:PopUpMenuButton id="p1"
		showRoot="true"
		dataProvider="{menuDP}"
		click="clickHandler(event)"
		itemClick="itemClickHandler(event);"
		fontSize="14"
	/>
</mx:Application>


 

ncepustrong
关注
专栏目录
FLEX实现的导航菜单
01-09
里面包含源码及事例，效果类似QQ导航菜单，可实现子菜单、为菜单添加图片等功能
Flex导航菜单
03-22
NULL 博文链接：https://guangqiang.iteye.com/blog/1007618
Copy and Paste DataGridItem
bootong的专栏
09-30 131
[code="java"] = 0) a = s.split("\t"); else if (s.indexOf(" ") >= 0) a = s.split(" "); else ...
flex---->按钮
weixin_34245749的博客
08-28 145
按钮 Flex中的按钮控件分为几种， 普通按钮 按钮条 单选框 复选框 弹出式按钮 文本链接按钮 一、普通按钮 普通按钮在大部分应用程序中都会出现，使用的频率非常高。按钮是最简单直接的来与用户交互的方式之一，在Flex中也提供了按钮Button控件. 1.1 使用Button控件设计按钮 在Flex中提供了按钮Button控件，用来设计按钮。按钮的设计相对简单，只需从工具面板...
flex-menu.rar_Flex 4_Menu_flex_flex Menu_flex 菜单
09-24
这个"flex-menu.rar"压缩包包含了一个使用Flex 4构建的菜单组件，专为Flash Builder 4设计。Flash Builder 4是基于Eclipse IDE的开发工具，用于创建、测试和调试Flex和ActionScript项目。 Flex 4中的菜单系统是用户...
CSS-flex-style:CSS中不同样式的Flex样式
03-15
在CSS世界里，Flex布局（Flexible Box）是一种强大的工具，用于创建响应式和动态的网页设计。...无论是在响应式布局、导航菜单、卡片布局还是复杂组件设计中，Flex布局都是现代Web开发不可或缺的一部分。
html-flex-template：具有页眉和页脚以及相关CSS的flex main模板
02-17
页眉（header）通常包含网站的logo、导航菜单等元素。在这个模板中，页眉可能使用Flexbox来实现水平居中或灵活的导航链接布局。例如，可以使用`justify-content: center;`使所有页眉元素水平居中，或者使用`align-...
flex-bootstrap.jar.zip
11-19
这可能需要在Flex的MXML文件中使用`<mx:HTML>`或`<s:HTML>`标签，并指定Bootstrap的CSS URL。 3. **使用组件**：Flex Bootstrap提供了一些自定义的Flex组件，它们模仿了Bootstrap的HTML组件，如Button、Navbar、...
flex-input,支持emoji、媒体附件和拍照的android文本输入小部件.zip
10-11
"flex-input"是一个专门为Android平台设计的文本输入小部件，它是一个EditText的包装器，集成了对文本、emoji表情、摄像头拍照以及媒体文件上传的支持。通过这个组件，开发者可以快速地在自己的应用中添加这些功能，...
Flex创建菜单栏
03-28
NULL 博文链接：https://tongqiuyan.iteye.com/blog/1207523
flex常用动态菜单
03-29
flex常用的几种动态菜单
Flex点击弹出菜单示例
02-16 936
在某个组件上点击，弹出一个菜单。选择可执行的操作 Flex 3.0SDK <![CDATA[ //导入需要的包 import mx.controls.Menu; import mx.events.MenuEvent; import mx.controls.Alert; import flash.geom.Poin
Flex中menu菜单
09-09 6070
  Flex中生成菜单："1.0"?>"http://www.adobe.com/2006/mxml"     layout="absolute">                        import mx.controls.Menu;            // Method to create an Array-based menu.    
flex_菜单栏使用浅析；
cenyebao的专栏
03-23 2553
xmlns:s="library://ns.adobe.com/flex/spark"                xmlns:mx="library://ns.adobe.com/flex/mx"                minWidth="1024" minHeight="768" pageTitle="TheStudioOfCenyebao">
Flex 菜单效果
ystyaoshengting的专栏
10-22 5242
Flex的菜单大致有三种形式：菜单控件（Menu），菜单栏控件（MenuBar），弹出式按钮菜单控件（PopUpButtonMenu）Menu 控件创建可分别选择的选项的弹出菜单，此弹出菜单类似于大多数软件应用程序中的“文件”或“编辑”菜单。弹出菜单可以具有所需的任何数目的子菜单级别。打开 Menu 控件后，此控件将一直可见，直到通过下列任一操作将其关闭：调用 Menu.hide() 方法。用户选择已启用的菜单项。用户在 Menu 控件外部单击。用户选择该应用程序中的其他组件。Menu 类没有对应的 MXM
flex 菜单栏
Luxika的专栏
07-20 198
[size=large] //在XML里加入这个就可以有分割线了 这个就可以加入分割线了，但是我想说，还能不能再对这个分割线进行控制，比如改变他的颜色，长度等等[code] Menu{ ...
flex 侧面可以选择性隐藏的菜单
Leon_Mathilda的博客
05-12 768
显示时的效果图： 隐藏时的效果图： 主要思想就是：利用flex的状态切换来控制，菜单的显示和隐藏 部分代码：                                                                                                                      
Flex之旅：第一部分：flex必备基础知识积累(8)---动态填充和修改菜单
miqi770的专栏
03-18 926
首先来看看Flex菜单的静态加载 直接上代码： <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWi
React组件库ant-design企业级UI设计语言详解
4. 导航：菜单、面包屑、标签页、侧边栏等。 5. 布局：栅格系统、布局容器、Flex布局等。 6. 其他：按钮、图标、弹出框、画板等。 在react框架中使用ant-design，可以极大地提升开发效率，因为开发者无需从零开始...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值