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 示例.如果您单击该按钮,菜单会不断重新打开.
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.
现在,我通过设置一个变量来打开和关闭它,所以当点击按钮时它会进行检查.但是,如果您在远离屏幕的地方单击,则会调度 HIDE 事件并关闭菜单.这弄乱了设置的打开关闭变量.
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.
如何让下面的 Flex 示例在单击按钮时显示菜单,然后在第二次单击按钮时关闭菜单?考虑到如果您从菜单中点击,它会关闭它.
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.
此外,我使用了按钮的 MOUSE_DOWN_OUTSIDE 事件并设置了 preventDefault,并将 FlexMouseEvent event.cancelable 设置为 false.
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.
更改为 PopUpMenuButton 不是一种选择.我需要涉及很多皮肤.
Changing to a PopUpMenuButton is not an option. I have to much skinning involved.
这是 Flex 示例:
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屋!