Flex创建弹出菜单(PopUpButton/Menu/PopMenuButton)

最新推荐文章于 2021-05-26 01:37:16 发布

原创最新推荐文章于 2021-05-26 01:37:16 发布 · 304 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flex #菜单 #PopUpButton #Menu #PopUpMenuButton

Flex 专栏收录该内容

12 篇文章

订阅专栏

本文提供了一段使用MXML创建弹出菜单的Flash代码示例，并详细解释了如何设置菜单的数据源、样式以及弹出按钮的交互逻辑。

弹出菜单的运行Flash效果见：http://tongqiuyan.blog.163.com/blog/static/1955453022011922113758634/

静态图片：

 <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12">
 <mx:Script>
  <![CDATA[
   import mx.controls.Menu;
   private var menu:Menu;
   private function init():void
   {
    menu = new Menu();
    menu.labelField = "@label";
    // 设置menu的数据源
    menu.dataProvider = xmlDP;
    //设置menu不要展现父子排列结构
    menu.showRoot = false;
    menu.width = popUpButton.width;
    // 设置弹出的内容为menu
    popUpButton.popUp = menu;
   }
  ]]>
 </mx:Script>
 <mx:Style>
.popUpButtonStyle{fontWeight:normal; textAlign:left;}
 </mx:Style>
 <mx:XML id="xmlDP">
  <root>
   <node label="菜单项1" />
   <node label="菜单项2" enabled="false" />
   <node type="separator" />
   <node label="父项" enabled="false">
    <node label="子项1" />
   </node>
   <node label="父项">
    <node label="子项1" />
    <node label="子项2" />
    <node label="子项3" />
   </node>
   <node type="separator" />
   <node label="type=check" type="check" toogled="true" />
   <node label="type=check(disabled)" type="check" toogled="true" enabled="false" />
   <node type="separator" />
   <node label="1) type=Radio" type="radio" groupName="radioGroup" toggled="true" />
   <node label="2) type=Radio" type="radio" groupName="radioGroup" />
   <node label="3) type=Radio" type="radio" groupName="radioGroup" />
   <node label="4) type=Radio(disabled)" type="radio" groupName="radioGroup" enabled="false" />
  </root>
 </mx:XML>
 <mx:Panel title="创建弹出菜单" width="300" height="200" horizontalAlign="center" paddingTop="10">
  <mx:PopUpButton id="popUpButton" label="选择菜单中的项" creationComplete="init();" width="200" popUpStyleName="popUpButtonStyle" />
 </mx:Panel>
</mx:Application>