<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="appHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.events.IndexChangedEvent;
protected function tb_handler(event:FlexEvent):void{
var tabNames:String="";
for(var i=0;i<tb.numChildren;i++){
var obj:Object=tb.getTabAt(i);
tabNames+=obj.label+" ";
}
lblResult.text="共"+tb.numChildren+"个选项卡,他们的名称分别是:"+tabNames;
}
//全局监听
protected function appHandler(event:FlexEvent):void{
tb.addEventListener(IndexChangedEvent.CHANGE,indexHandler);
}
//
protected function indexHandler(event:IndexChangedEvent):void{
txtResult.text+="打卡【"+tb.getTabAt(tb.selectedIndex).label+"】选项卡 索引为:"+tb.selectedIndex+"\n";
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:Panel title="使用TabNavigator示例" width="90%" height="90%" horizontalCenter="0" verticalCenter="0">
<s:layout>
<s:VerticalLayout>
</s:VerticalLayout>
</s:layout>
<s:VGroup paddingTop="10" paddingLeft="10" width="100%" height="100%" >
<s:Label color="#ff0000" text="单击切换选项卡查看效果" fontSize="16" >
</s:Label>
<!--tab-->
<mx:TabNavigator id="tb" width="80%" height="130" creationComplete="tb_handler(event)">
<s:NavigatorContent label="AP元素" width="100%" height="100%" icon="@Embed(source='assets/images/cn.png')" backgroundColor="#C17F7F">
<s:Label x="10" y="38" text="现在打开的是【AP元素】选项卡" fontSize="16">
</s:Label>
</s:NavigatorContent>
<s:NavigatorContent label="HS元素" width="100%" height="100%" icon="@Embed(source='assets/images/br.png')" backgroundColor="#C17F7F">
<s:Label x="10" y="38" text="现在打开的是【HS元素】选项卡" fontSize="16">
</s:Label>
</s:NavigatorContent>
<s:NavigatorContent label="CD元素" width="100%" height="100%" icon="@Embed(source='assets/images/de.png')" backgroundColor="#C17F7F">
<s:Label x="10" y="38" text="现在打开的是【CD元素】选项卡" fontSize="16">
</s:Label>
</s:NavigatorContent>
<s:NavigatorContent label="MN元素" width="100%" height="100%" icon="@Embed(source='assets/images/es.png')" backgroundColor="#C17F7F">
<s:Label x="10" y="38" text="现在打开的是【MN元素】选项卡" fontSize="16">
</s:Label>
</s:NavigatorContent>
</mx:TabNavigator>
<!--lblResult-->
<s:Label text="标签:" id="lblResult" fontSize="14">
</s:Label>
<!--txtResult-->
<s:TextArea id="txtResult" width="460" height="108">
</s:TextArea>
</s:VGroup>
</s:Panel>
</s:Application>
Flex的导航TabNavigator演示示例
最新推荐文章于 2021-03-24 23:54:48 发布