欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Flex菜单弹跳效果

程序员文章站 2024-03-24 11:24:40
...
一个很简单的单击效果(弹跳,选中时加下划线),可适用于菜单单击,将下面代码作为MenuItemRenderer。实现这个效果无非就是使用了Move3D。(选自FlexViewer)
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:components="com.components.*"
implements="mx.managers.IFocusManagerComponent"
buttonMode="true"
focusEnabled="true"
useHandCursor="true"
click="itemClickHandler(event)">

<fx:Declarations>
<s:Move3D id="moveEffect" duration="200" effectEnd="moveEffectEndHandler(event)" repeatBehavior="reverse" repeatCount="2" target="{icon}" yBy="-8" yFrom="0"/>
</fx:Declarations>

<fx:Script>
<![CDATA[
import mx.events.EffectEvent;
import mx.events.FlexEvent;

/**
* 是否打开标识
*/
private var isOpen:Boolean = false;


/**
* 数据更改时触发函数,如果作为菜单的ItemRenderer时,监听DataChangeEvent。否则要外部调用执行。以便实现窗口关闭还原状态
*/
public function itemrenderer_dataChangeHandler(open:Boolean):void
{
//itemrenderer_dataChangeHandler(event:CustomEvent):void
//作为renderer时,派发自定义事件,data属性中设置open状态,直接赋值即可。
// icon.source = event.data.icon;
// underline.open = event.data.open;

underline.open = open;
}


/**
* 鼠标移出事件处理
*/
private function mouseOutHandler(event:MouseEvent):void
{
//执行鼠标移出处理
}

/**
* 鼠标移上事件处理
*/
private function mouseOverHandler(event:MouseEvent):void
{
//执行鼠标移上处理
}

/**
* 单击事件处理函数
*/
private function itemClickHandler(event:MouseEvent):void
{
if ( !isOpen )
{
moveEffect.end();
moveEffect.play();
underline.open = isOpen = true;
}
}

/**
* 单击时效果渲染完毕 处理函数
*/
private function moveEffectEndHandler(event:EffectEvent):void
{
//执行单击操作
}

//--------------------------------------------------------------------------
//
// Focus Management
//
//--------------------------------------------------------------------------

/**
* 获取焦点,可在此函数中通过焦点来执行鼠标移上移出处理。
*/
override public function drawFocus(isFocused:Boolean):void
{
super.drawFocus(isFocused);

// Popup the tooltip or remove the menu
if (isFocused)
{
mouseOverHandler(null);
}
else
{
mouseOutHandler(null);
}
}


/**
* 空格事件处理,按下空格键派发Click事件
*/
private var keyboardPressed:Boolean = false;

override protected function keyDownHandler(event:KeyboardEvent):void
{
if (event.keyCode != Keyboard.SPACE)
{
return;
}

keyboardPressed = true;
event.updateAfterEvent();
}

override protected function keyUpHandler(event:KeyboardEvent):void
{
if (event.keyCode != Keyboard.SPACE)
{
return;
}

if (enabled && keyboardPressed)
{
// Mimic mouse click on the button.
keyboardPressed = false;
dispatchEvent(new MouseEvent(MouseEvent.CLICK));
}
event.updateAfterEvent();
}
]]>
</fx:Script>

<s:VGroup width="50" height="30" gap="2" horizontalAlign="center" verticalAlign="middle">
<s:Image id="icon" source="@Embed('assets/images/icons/i_clock.png')" width="25" height="25" buttonMode="true"
mouseOut="mouseOutHandler(event)" mouseOver="mouseOverHandler(event)" smooth="true" useHandCursor="true"/>
<components:Underline id="underline"/>
</s:VGroup>

</s:VGroup>


Underline
<?xml version="1.0" encoding="utf-8"?>
<!--

绘制线段

-->
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
[Bindable]
public var open:Boolean = false;
]]>
</fx:Script>
<s:Line width="10" includeInLayout="{open}" visible="{open}">
<s:stroke>
<s:SolidColorStroke caps="square" color="0x000000" weight="2"/>
</s:stroke>
</s:Line>
</s:Group>
相关标签: flex