Flex菜单控制 - 单击一个按钮，显示一个菜单。我怎样才能再次点击该按钮并隐藏该菜单？ [英] Flex Menu Control - Click a button and a menu is displayed. How can I click that button a second time and hide that menu?

问题描述

基本上，我有一个按钮，点击它显示一个菜单。我想再次单击该菜单，菜单关闭。目前，每次点击按钮，菜单重新打开。我粘贴了下面的Flex livedoc例子。如果你点击按钮，菜单不断重新打开。

现在，我通过设置一个var来打开和关闭它，所以当点击按钮时， 。但是，如果您从屏幕上单击，HIDE事件将被分派，菜单将关闭。这弄乱了开放的关闭变量被设置。

我怎么能让这个下面的Flex示例显示按钮单击菜单，然后在第二个按钮单击，它关闭菜单？如果你点击离开菜单，它会关闭它。

另外，我玩弄了按钮的MOUSE_DOWN_OUTSIDE事件，并设置了preventDefault， FlexMouseEvent event.cancelable设置为false。

更改为PopUpMenuButton不是一个选项。

以下是Flex示例：

 < mx：Script> 
 <！[CDATA [
 //导入菜单控件。 
导入mx.controls.Menu; 
 
 //创建并显示Menu控件。 
 private function createAndShow（）：void {
 var myMenu：Menu = Menu.createMenu（null，myMenuData，false）; 
 myMenu.labelField =@ label; 
 myMenu.show（10，10）; 
} 
]]> 
< / mx：Script> 
 
 <！ - 定义菜单数据。 - > 
< mx：XML format =e4xid =myMenuData> 
< root> 
< menuitem label =MenuItem A> 
 < menuitem label =SubMenuItem A-2/> 
< / menuitem> 
  < menuitem type =separator/> 
< menuitem label =MenuItem D> 
  groupName =one/> 
  groupName =onetoggled =true/> 
  groupName =one/> 
< / menuitem> 
< / root> 
< / mx：XML> 
 
< mx：VBox> 
 <！ - 定义一个按钮控件来打开菜单 - > 
< mx：Button id =myButton
 label =Open Menu
 click =createAndShow（）;/> 
< / mx：VBox> 
  

解决方案

  //将菜单声明为实例变量而不是本地变量
 private var myMenu：Menu; 
 
 // var存储菜单状态
 private var isMenuVisible：Boolean 
 
 //创建Menu控件。从
 //应用程序的creationComplete或它所属的Component调用它。 
 private function createMenu（）：void 
 {
 var myMenu：Menu = Menu.createMenu（null，myMenuData，false）; 
 myMenu.labelField =@ label; 
 //菜单隐藏时触发一个事件;听这个。 
 myMenu.addEventListener（MenuEvent.MENU_HIDE，onMenuHidden）; 
 
 private menu onMenuHidden（e：MenuEvent）：void 
 {
 / * 
 menuHide事件触发菜单或其中一个子菜单
隐藏 - 确保它确实是被隐藏的主菜单
我没有编译器方便地测试这个，所以如果为
比较myMenu和e.menu的某些原因不起作用，
尝试if（e.target == myMenu）来代替; 
请通过评论让我知道哪一个工作:) 
 * / 
 
 if（e.menu == myMenu）
 isMenuVisible = false; 
 
 //从按钮点击
 private function toggleMenu（）：void 
 {
 if（isMenuVisible）
 myMenu.hide（）; 
 else 
 myMenu.show（）; 
} 
  

Basically, I have a button and on click it displays a menu. I want to click that menu a second time and the menu closes. Currently, every time you click the button, the menu reopens. I pasted the Flex livedoc example below. If you click the button, the menu keeps reopening.

Now, I rigged it up by setting a var to open and closed, so when clicking the button it does a check. However, if you click away from the screen, the HIDE event gets dispatched, and the menu closes. This messed up the open close var being set.

How could I make this Flex example below show the menu on button click, and then on a second button click, it closes the menu? Take into affect that if you click away from the menu, it closes it.

Also, I played around with the MOUSE_DOWN_OUTSIDE event for the button and set the preventDefault, and the FlexMouseEvent event.cancelable is set to false.

Changing to a PopUpMenuButton is not an option. I have to much skinning involved.

Here is the Flex example:

<mx:Script>
    <![CDATA[
        // Import the Menu control.
        import mx.controls.Menu;

        // Create and display the Menu control.
        private function createAndShow():void {
            var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
            myMenu.labelField="@label";
            myMenu.show(10, 10);
        }
    ]]>
</mx:Script>

<!-- Define the menu data. -->
<mx:XML format="e4x" id="myMenuData">
    <root>
        <menuitem label="MenuItem A" >
            <menuitem label="SubMenuItem A-1" enabled="false"/>
            <menuitem label="SubMenuItem A-2"/>
        </menuitem>
        <menuitem label="MenuItem B" type="check" toggled="true"/>
        <menuitem label="MenuItem C" type="check" toggled="false"/>
        <menuitem type="separator"/>     
        <menuitem label="MenuItem D" >
            <menuitem label="SubMenuItem D-1" type="radio" 
                groupName="one"/>
            <menuitem label="SubMenuItem D-2" type="radio" 
                groupName="one" toggled="true"/>
            <menuitem label="SubMenuItem D-3" type="radio" 
                groupName="one"/>
        </menuitem>
    </root>
</mx:XML>

<mx:VBox>
    <!-- Define a Button control to open the menu -->
    <mx:Button id="myButton" 
        label="Open Menu" 
        click="createAndShow();"/>
</mx:VBox>

解决方案

//Declare menu as an instance variable instead of a local var
private var myMenu:Menu;

//var to store menu status
private var isMenuVisible:Boolean

//Create the Menu control. call this from the creationComplete of the 
//application or the Component that it is part of.
private function createMenu():void 
{
    var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
    myMenu.labelField="@label";
    //menu fires an event when it is hidden; listen to it.
    myMenu.addEventListener(MenuEvent.MENU_HIDE, onMenuHidden);
}
private function onMenuHidden(e:MenuEvent):void
{
    /*
    menuHide event fired whenever the menu or one of its submenus
    are hidden - makes sure it was indeed the main menu that was hidden
    I don't have compiler handy to test this, so if for 
    some reason comparing myMenu with e.menu doesn't work,
    try if(e.target == myMenu) instead; 
    And please let me know which one works via comment :)
    */

    if(e.menu == myMenu)
       isMenuVisible = false;
}
//call this from button's click 
private function toggleMenu():void
{
    if(isMenuVisible)
        myMenu.hide();
    else
        myMenu.show();
}

这篇关于Flex菜单控制 - 单击一个按钮，显示一个菜单。我怎样才能再次点击该按钮并隐藏该菜单？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！