Flex的导航TabNavigator演示示例

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/big1989wmf/article/details/84597718
<?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>
展开阅读全文

没有更多推荐了,返回首页