![使用导航容器 - JQD - The future is in my 使用导航容器 - JQD - The future is in my](http://img.ph.126.net/cVe0JXao0KhQIqBdWo80Pg==/3276368728913667810.jpg)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="550" height="550" viewSourceURL="src/NavigationContainers/index.html">
<mx:Panel layout="absolute" left="10" top="10" right="10" bottom="10" title="Navigators">
<!--Accordion 容器定义一个子面板序列-->
<mx:Accordion width="47.5%" height="200" top="36" left="10">
<mx:Canvas label="Navigation button 1" width="100%" height="100%">
<mx:Label x="10" y="10" text="Contents 1"/>
</mx:Canvas>
<mx:Canvas label="Navigation button 2" width="100%" height="100%">
<mx:Label x="10" y="10" text="Contents 2"/>
</mx:Canvas>
<mx:Canvas label="Navigation button 3" width="100%" height="100%">
<mx:Label x="10" y="10" text="Contents 3"/>
</mx:Canvas>
</mx:Accordion>
<!--TabNavigator 选项卡 -->
<mx:TabNavigator right="10" width="47.5%" height="200" y="36">
<mx:Canvas label="Tab 1" width="100%" height="100%">
<mx:Label x="10" y="10" text="Contents 1"/>
</mx:Canvas>
<mx:Canvas label="Tab 2" width="100%" height="100%">
<mx:Label x="10" y="10" text="Contents 2"/>
</mx:Canvas>
<mx:Canvas label="Tab 3" width="100%" height="100%">
<mx:Label x="10" y="10" text="Contents 3"/>
</mx:Canvas>
</mx:TabNavigator>
<mx:Label x="10" y="252" text="ButtonBar"/>
<mx:Label x="10" y="10" text="Accordion"/>
<mx:Label x="262.5" y="10" text="TabNavigator"/>
<mx:Label x="262.5" y="252" text="ViewStack"/>
<mx:Label x="10" y="308" text="ToggleButtonBar"/>
<mx:Label x="10" y="364" text="LinkBar"/>
<mx:Label x="10" y="424" text="TabBar"/>
<!--其他导航绑定到 ViewStack-->
<mx:ButtonBar x="10" y="278" dataProvider="{myViewStack}" />
<mx:ToggleButtonBar x="10" y="334" dataProvider="{myViewStack}" />
<mx:LinkBar x="10" y="390" dataProvider="{myViewStack}" />
<mx:TabBar x="10" y="444" dataProvider="{myViewStack}" />
<mx:ViewStack id="myViewStack" width="47.5%" height="200" right="10" bottom="10" borderColor="#000000" borderStyle="solid">
<mx:Canvas label="View 1" width="100%" height="100%">
<mx:Label text="Contents 1"/>
</mx:Canvas>
<mx:Canvas label="View 2" width="100%" height="100%">
<mx:Label text="Contents 2"/>
</mx:Canvas>
<mx:Canvas label="View 3" width="100%" height="100%">
<mx:Label text="Contents 3"/>
</mx:Canvas>
</mx:ViewStack>
</mx:Panel>
</mx:Application>