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

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 stub
if(!isClick){
btn_click.visible=false;
btn_select.visible=true;
}
}

protected function mouseOutHandler(event:MouseEvent):void{
// TODO Auto-generated method stub
if(!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 stub
FlexGlobals.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>

能实现如下效果了

转载请标明出处