Flex 如何实现按钮之间的切换，按钮点击事件

来源：互联网发布：人工智能蒋里博士编辑：程序博客网时间：2024/04/25 21:54

Flex 如何实现按钮之间的切换，按钮点击事件

先来看效果以国家图书馆为例，（以下附得代码与图文无关）

下面具体操作步骤，我们知道可以定义skin皮肤的方法来控制BUTTON当然也可以用BorderContainer，这里以BorderContainer为例介绍图片切换，及按钮点击事件的效果，包括选中效果和mouseOver mouseOut MouseEvent属性

一：定义BorderContainer

<?xml version="1.0" encoding="utf-8"?><s:BorderContainer xmlns:s="library://ns.adobe.com/flex/spark"  xmlns:fx="http://ns.adobe.com/mxml/2009"  xmlns:d="http://ns.adobe.com/fxg/2008/dt"  width="60" height="60" backgroundAlpha="0" borderAlpha="0"><fx:Script><![CDATA[import mx.controls.Alert;import mx.events.FlexEvent;public var isClick:Boolean=false;protected function mouseOverHandler(event:MouseEvent):void{// TODO Auto-generated method stubif(!isClick){btn_click.visible=false;btn_select.visible=true;}}protected function mouseOutHandler(event:MouseEvent):void{// TODO Auto-generated method stubif(!isClick){btn_click.visible=false;btn_select.visible=false;}}public function click():void{isClick=true;btn_click.visible=true;btn_select.visible=false;}public function unClick():void{isClick=false;btn_click.visible=false;btn_select.visible=false;}]]></fx:Script><s:Image  source="@Embed('/assets/images/bj/重点生态功能区.png')" mouseOver="mouseOverHandler(event)" smooth="true" depth="1" x="0" y="0"/><s:Image id="btn_click" visible="false" mouseOut="mouseOutHandler(event)" smooth="true" source="@Embed('/assets/images/bj/topClickBackDown.png')" depth="1" x="-27" y="2" /><s:Image id="btn_select" visible="false" mouseOut="mouseOutHandler(event)" smooth="true" source="@Embed('/assets/images/bj/topClickBack.png')" depth="1" x="-7" y="-2" /></s:BorderContainer>

二.然后通过id调用

<components:btn_qg id="btn_qg"  x="280" y="5" click="toggleMain('province')"/><components:btn_zd id="btn_zd"  x="376" y="5"  click="toggleMain('zdst')"/><components:btn_jh id="btn_jh"  x="481" y="5"  click="toggleMain('jhgl')"/><components:btn_qt id="btn_qt"  x="586" y="5"  click="toggleMain('qtzd')"/><components:btn_nl id="btn_nl"  x="691" y="5"  click="toggleMain('nlqttd')"/>

三.显示切换效果方法

<fx:Script><![CDATA[import mx.controls.Alert;import mx.core.FlexGlobals;import mx.events.FlexEvent;protected function toggleMain(mainName:String):void{btn_qg.unClick();btn_zd.unClick();btn_jh.unClick();btn_qt.unClick();btn_nl.unClick();// TODO Auto-generated method stubFlexGlobals.topLevelApplication.bc_center.toggleMain(mainName);if(mainName=="province"){btn_qg.click();}if(mainName=="zdst"){btn_zd.click();}if(mainName=="jhgl"){btn_jh.click();}if(mainName=="qtzd"){btn_qt.click();}if(mainName=="nlqttd"){btn_nl.click();}}]]></fx:Script>

能实现如下效果了

转载请标明出处

0 0