Flex的领航TabNavigator演示示例

Flex的导航TabNavigator演示示例

<?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>